/* rmajijic.com -- R&M Ajijic
------------------------------------------------------------------
ONE COMMITTED PALETTE, NO DARK MODE. The brand is cream paper and
lake teal, it is the same palette the Lakeside Letter has been
sending since August, and an email cannot do prefers-color-scheme
anyway. A site that flipped to charcoal at dusk would stop matching
the thing clients actually receive. Every colour below is painted
explicitly for that reason -- nothing inherits from the browser.
WARMTH COMES FROM LIGHT AND SHAPE, NOT FROM MORE ORANGE. The first
version of this sheet was all hairline rules on flat cream and read
as a research paper -- correct, cold. The identity allows orange
twice on a surface at most, so the fix could not be more accent.
It is: rounder corners, soft warm-tinted shadows instead of 1px
borders, photographs given room, larger and looser type, and the
sections alternating paper / panel / teal so the page has a pulse.
THE SCRIPT IS DECORATION AND ONLY DECORATION. Yellowtail sets one
word at a time as a flourish -- never the logo, never a heading
that has to survive being retyped. That was the settled rule when
the cursive "Ajijic" was deliberately kept out of the wordmark.
FONTS ARE SELF-HOSTED, not pulled from Google. Two reasons and both
matter: a client-facing page should not announce every visitor to a
third party, and the tailnet build has to render correctly when
Tailscale is up but the house internet is not.
------------------------------------------------------------------ */
/* SAME TYPE AS THE FLYERS (2026-10-01). Lora for headings, Roboto for
text, Roboto Slab for numbers -- the three faces the tour and AMPI
flyers use. Fraunces was dropped: its variable "wonky" shapes made
S and f look like upside-down letters at heading sizes. */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;
src:url('fonts/Lora-400-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;
src:url('fonts/Lora-400-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;
src:url('fonts/Lora-500-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;
src:url('fonts/Lora-500-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;
src:url('fonts/Lora-600-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;
src:url('fonts/Lora-600-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;
src:url('fonts/Lora-700-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;
src:url('fonts/Lora-700-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;
src:url('fonts/Roboto-300-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;
src:url('fonts/Roboto-300-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;
src:url('fonts/Roboto-400-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;
src:url('fonts/Roboto-400-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;
src:url('fonts/Roboto-500-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;
src:url('fonts/Roboto-500-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;
src:url('fonts/Roboto-700-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;
src:url('fonts/Roboto-700-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;
src:url('fonts/RobotoSlab-400-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;
src:url('fonts/RobotoSlab-400-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;
src:url('fonts/RobotoSlab-500-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;
src:url('fonts/RobotoSlab-500-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;
src:url('fonts/RobotoSlab-600-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;
src:url('fonts/RobotoSlab-600-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;
src:url('fonts/RobotoSlab-700-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;
src:url('fonts/RobotoSlab-700-latinext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;
src:url('fonts/Lora-italic-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Yellowtail';font-style:normal;font-weight:400;
src:url('fonts/yellowtail.woff2') format('woff2');font-display:swap}
:root{
--paper:#FFFAF2; --panel:#FAF5EB; --sand:#F4EADA;
--ink:#2B2B2B; --soft:#6B6257;
--teal:#1E5B6B; --teal-deep:#17454F; --teal-pale:#E3EEF1;
--orange:#E8772C; --rule:#E4DCCF;
--serif:Lora,Georgia,'Times New Roman',serif;
--sans:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
--mono:'Roboto Slab',Georgia,serif;
--script:Yellowtail,'Snell Roundhand','Brush Script MT',cursive;
/* Shadows are TINTED TEAL, not grey. A neutral shadow on cream reads
as dirt; a shadow carrying a little of the brand colour reads as
depth. Two layers: a tight one for the edge, a wide soft one for
the lift. */
--lift:0 1px 2px rgba(30,91,107,.05), 0 6px 20px rgba(30,91,107,.06);
--lift-hi:0 2px 4px rgba(30,91,107,.07), 0 14px 38px rgba(30,91,107,.10);
--r:14px; --r-s:9px;
--shell:min(1120px,100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; background:var(--paper); color:var(--ink);
font:400 17.5px/1.7 var(--sans);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:2px solid var(--orange); outline-offset:3px; border-radius:3px}
.shell{width:var(--shell); margin-inline:auto; padding-inline:22px}
/* ---- draft banner ------------------------------------------------
Removed by build_site.py when --public is passed. It exists so that
nobody -- including a future me -- mistakes the tailnet build for
something that has cleared the questions Jaime has not answered. */
.draft{background:var(--teal-deep); color:#FFFAF2; font:500 13px/1.5 var(--mono);
letter-spacing:.02em; padding:9px 0}
.draft .shell{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.draft b{color:#F2B98A; font-weight:700}
/* ---- masthead ---------------------------------------------------- */
.mast{background:var(--paper); position:relative; z-index:2}
.mast .shell{display:flex; align-items:center; gap:18px;
padding-block:22px; flex-wrap:wrap}
.mast .logo{flex:0 0 auto}
.mast .logo img{width:200px}
nav{margin-left:auto; display:flex; gap:3px; flex-wrap:wrap}
nav a{
font:500 15px/1 var(--sans); color:var(--ink);
text-decoration:none; padding:11px 14px; border-radius:999px; white-space:nowrap;
transition:background .15s ease, color .15s ease}
nav a:hover{background:var(--sand); color:var(--teal)}
nav a[aria-current=page]{background:var(--teal-pale); color:var(--teal-deep)}
/* The one call to action in the nav. Last in the row, because that is where a
primary action goes -- but painted, because last in a row of eight plain
links is also where a link goes to be ignored, and this one sits directly
after Contact, which asks for the same thing in a quieter way. */
nav a.cta{background:var(--teal); color:var(--paper); font-weight:600;
margin-left:7px}
nav a.cta:hover{background:var(--teal-deep); color:var(--paper)}
nav a.cta[aria-current=page]{background:var(--teal-deep); color:var(--paper)}
/* ---- type -------------------------------------------------------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; color:var(--ink);
line-height:1.13; margin:0; text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,54px); letter-spacing:-.015em}
h2{font-size:clamp(26px,3.4vw,36px); color:var(--teal); letter-spacing:-.01em}
h3{font-size:20px; font-family:var(--sans); font-weight:600; line-height:1.4}
p{margin:0 0 1.1em; max-width:64ch}
.lede{font-size:clamp(18.5px,2.3vw,22px); line-height:1.6; color:var(--soft); max-width:56ch}
/* A heading and its lede are one unit; without this the lede sits hard
against the descenders of a 54px heading line. */
h1 + .lede,h2 + .lede{margin-top:24px}
/* Headings carry no margin of their own by design -- whatever FOLLOWS sets
the gap (.cards has 36px, .lede has 24px, .prose h2 has its own). A bare
h2 followed straight by a .prose block or a paragraph had no such rule,
so the first line sat on the heading's baseline. Scoped to a direct child
of .shell so it cannot double up with .prose's own heading margins. */
section > .shell > h2 + .prose,
section > .shell > h2 + p,
section > .shell > h2 + ul,
section > .shell > h2 + ol{margin-top:18px}
.eyebrow{font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
color:var(--orange); margin:0 0 18px}
strong{font-weight:600}
/* The flourish. One word, decorative, never load-bearing -- if the
font fails to load the fallback cursive still reads, and if that
fails too the sentence around it still makes sense. */
.script{font-family:var(--script); font-weight:400; font-style:normal;
color:var(--orange); line-height:1; letter-spacing:.01em}
/* Inside the mono eyebrow the script has to be pulled back OUT of the
uppercasing and the tracking, and set much larger -- at the
eyebrow's own 12px it reads as a rendering fault rather than a
flourish, which is exactly how the first render looked. */
.eyebrow .script{font-size:26px; text-transform:none; letter-spacing:0;
line-height:0; position:relative; top:3px; margin-inline:3px}
/* ---- sections ---------------------------------------------------- */
/* SECTION RHYTHM. Padding STACKS at a joint: two sections each giving a
full pad put 184px of nothing between the last line of one and the first
of the next, which reads as the end of the page rather than a breath.
Measured on every page with audit_space.py before and after.
Three rules, in order of how much they buy:
1. a smaller base pad, so a joint is ~130px and not ~184px;
2. no leading or trailing margin INSIDE that pad -- a paragraph's
1.1em and a .lines' 32px sat on top of the padding and nobody
could see which was which;
3. a hero and the content it introduces are ONE unit, so that joint is
tightened hard. It is a title and its subject, not two topics. */
section{padding-block:clamp(46px,5vw,66px)}
section > .shell > *:first-child{margin-top:0}
section > .shell > *:last-child{margin-bottom:0}
.prose > *:last-child{margin-bottom:0}
section.hero{padding-bottom:clamp(20px,2.4vw,30px)}
section.hero + section{padding-top:clamp(24px,2.8vw,36px)}
/* For joints that are one unit without being a hero: a question and the
photographs that answer it. */
section.tight-top{padding-top:clamp(26px,3vw,38px)}
section.tight-bottom{padding-bottom:clamp(20px,2.2vw,28px)}
section.tint{background:var(--panel)}
section.sand{background:var(--sand)}
section.deep{background:var(--teal); color:var(--paper)}
section.deep h2{color:var(--paper)}
section.deep p{color:#DCEAEE}
section.deep .eyebrow{color:#F2B98A}
section.deep a{color:var(--paper)}
/* ---- buttons ----------------------------------------------------- */
.btn{display:inline-block; font:600 16px/1 var(--sans); text-decoration:none;
padding:16px 24px; border-radius:999px; background:var(--teal); color:#FFFAF2;
border:1px solid var(--teal); box-shadow:var(--lift);
transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{background:var(--teal-deep); border-color:var(--teal-deep);
transform:translateY(-1px); box-shadow:var(--lift-hi)}
.btn.ghost{background:transparent; color:var(--teal); box-shadow:none;
border-color:rgba(30,91,107,.28)}
.btn.ghost:hover{background:var(--paper); color:var(--teal-deep);
border-color:var(--teal)}
section.deep .btn{background:var(--paper); color:var(--teal-deep); border-color:var(--paper)}
section.deep .btn:hover{background:#fff; color:var(--teal-deep)}
section.deep .btn.ghost{background:transparent; color:var(--paper);
border-color:rgba(255,250,242,.45)}
section.deep .btn.ghost:hover{background:rgba(255,250,242,.1); color:var(--paper)}
.btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
/* ---- the split hero ---------------------------------------------
Text beside a photograph rather than text over one. These are
high-key studio shots on a near-white seamless; nothing legible
sits on top of them, and a dark scrim to force it would throw away
the warmth that is the entire reason the photograph is here. */
.split{display:grid; gap:clamp(28px,4vw,56px); align-items:center;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.split .art{position:relative}
.split .art img{width:100%; border-radius:var(--r); box-shadow:var(--lift-hi)}
/* ---- cards ------------------------------------------------------- */
.cards{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
margin-top:36px}
.card{background:var(--paper); border-radius:var(--r); padding:30px 28px;
display:flex; flex-direction:column; gap:11px; box-shadow:var(--lift);
transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--lift-hi)}
.card h3{margin:0; font-family:var(--serif); font-size:23px; font-weight:600; color:var(--teal)}
.card p{margin:0; font-size:16px; color:var(--soft)}
.card a.more{margin-top:auto; padding-top:14px; font:600 15px/1 var(--sans);
text-decoration:none; color:var(--teal)}
.card a.more:hover{text-decoration:underline}
section.deep .card{background:rgba(255,250,242,.07); box-shadow:none}
section.deep .card h3{color:var(--paper)}
section.deep .card p{color:#DCEAEE}
/* ---- note / aside ------------------------------------------------ */
.note{background:var(--sand); border-radius:var(--r); padding:26px 28px;
margin:32px 0; box-shadow:var(--lift)}
.note :last-child{margin-bottom:0}
.note h3{margin:0 0 10px; color:var(--teal); font-family:var(--serif); font-size:21px}
section.tint .note,section.sand .note{background:var(--paper)}
/* ---- pull quote -------------------------------------------------- */
.quote{font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(23px,3.2vw,33px); line-height:1.35; max-width:22ch; margin:0}
.quote-by{font:500 14px/1.5 var(--mono); letter-spacing:.05em; color:#A7C6CE;
margin:18px 0 0}
/* ---- prose ------------------------------------------------------- */
.prose{max-width:66ch}
.prose h2{margin:44px 0 16px}
.prose h3{margin:32px 0 9px}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:24px; max-width:64ch}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--orange)}
.prose hr{border:0; border-top:1px solid var(--rule); margin:38px 0}
/* NO positional size bump here. There was a `.prose > p:first-of-type`
rule setting 19.5px as "an opening flourish for a long read", but every
one of these pages already opens with a hero .lede, so the bump landed
on whatever paragraph happened to come first -- mid-story on about.html,
under an h2 on both guides -- and read as two paragraph sizes for no
reason. If a lead paragraph is ever wanted, give it a class and say so. */
/* ---- steps ------------------------------------------------------- */
ol.steps{list-style:none; margin:34px 0 0; padding:0; counter-reset:s;
display:grid; gap:16px}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:52px 1fr;
gap:0 20px; padding:26px 28px; background:var(--paper);
border-radius:var(--r); box-shadow:var(--lift)}
section.tint ol.steps li,section.sand ol.steps li{background:var(--paper)}
ol.steps li::before{content:counter(s,decimal-leading-zero);
font:500 14px/1.7 var(--mono); color:var(--orange);
/* The number owns column one for BOTH rows. Without this the heading
auto-places beside it and the paragraph falls into the 52px column,
one word per line -- which looks like a font bug, not a grid bug. */
grid-row:1 / span 2}
ol.steps h3{margin:0 0 7px; grid-column:2}
ol.steps p{margin:0; color:var(--soft); font-size:16px; grid-column:2}
/* ---- people ------------------------------------------------------ */
figure.wide{margin:0 0 38px} /* NOT .mb3: `figure.wide` outranks a bare class, so mb3 silently lost */
figure.wide img{border-radius:var(--r); width:100%; box-shadow:var(--lift-hi)}
figcaption{font:400 14.5px/1.6 var(--sans); color:var(--soft); margin-top:14px}
/* ---- listings -----------------------------------------------------
A photograph, the asking price, and the four numbers somebody actually
compares on. Everything else -- the agent, the marketing paragraph, the
MLS link -- is deliberately not here; see build_listings.py for why. */
.listings{display:grid; gap:26px; margin-top:36px;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.listing{background:var(--paper); border-radius:var(--r); overflow:hidden;
display:flex; flex-direction:column; box-shadow:var(--lift);
transition:transform .15s ease, box-shadow .15s ease}
.listing:hover{transform:translateY(-2px); box-shadow:var(--lift-hi)}
.listing .shot{display:block}
.listing img{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--sand)}
.listing h3 a{color:inherit; text-decoration:none}
.listing h3 a:hover{text-decoration:underline}
.listing .where{margin:-4px 0 0}
.listing-body{padding:24px 26px 26px; display:flex; flex-direction:column;
gap:10px; flex:1}
.listing .price{margin:0; font:600 22px/1.2 var(--serif); color:var(--ink)}
.listing h3{margin:0; font-family:var(--serif); font-size:19px; font-weight:600;
color:var(--teal)}
.listing .facts{margin:0; font-size:16px; color:var(--soft)}
/* Break BETWEEN facts, never inside one: "510 m2" split across two lines
reads as a different number for the length of a blink. */
.listing .facts span{white-space:nowrap}
.listing .chips{margin:0; display:flex; flex-wrap:wrap; gap:7px}
/* The primary button goes full width in a card: two pill buttons side by
side wrap into a ragged stack at 300px, and the second one reads as a
competitor to the first rather than an alternative to it. */
.listing .btns{margin-top:auto; padding-top:16px; display:block}
.listing .btn{display:block; text-align:center}
.listing .more-row{margin:14px 0 0; display:flex; gap:18px; flex-wrap:wrap}
.listing .more{font:600 15px/1 var(--sans); color:var(--teal); text-decoration:none}
.listing .more:hover{text-decoration:underline}
/* ---- a listing's own page ------------------------------------------
Ours rather than the office site's, so the enquiry reaches Russ and Mike
instead of a shared inbox. Same information the office publishes for the
same home -- see build_listings.py for the field-by-field benchmark. */
.listing-hero .eyebrow a{color:var(--orange); text-decoration:none}
.listing-hero .eyebrow a:hover{text-decoration:underline}
.price-big{margin:18px 0 4px; font:600 clamp(26px,3.4vw,34px)/1.1 var(--serif);
color:var(--teal)}
.where{margin:0; font-size:16px; color:var(--soft)}
/* The five numbers everyone compares, in a row that survives a phone. */
.headline{display:grid; gap:14px; margin:30px 0 6px;
grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.headline div{background:var(--paper); border-radius:var(--r-s); padding:16px 10px;
text-align:center; box-shadow:var(--lift)}
.headline b{display:block; font:600 21px/1.2 var(--serif); color:var(--ink)}
.headline span{font:500 11px/1.6 var(--mono); letter-spacing:.09em;
text-transform:uppercase; color:var(--soft)}
.features{list-style:none; margin:0 0 1.1em; padding:0; display:grid; gap:8px 18px;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:none}
.features li{margin:0; padding-left:18px; position:relative; font-size:16px;
color:var(--soft)}
.features li::before{content:"+"; position:absolute; left:0; color:var(--orange)}
/* Two columns of label/value need a COLUMN gap, or the value in the left
column and the label in the right one meet with nothing between them and
read as one run-on line. */
.details{margin:0 0 1.1em; display:grid; gap:0 72px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.details > div{display:flex; justify-content:space-between; gap:18px;
padding:11px 0; border-bottom:1px solid var(--rule)}
.details dt{color:var(--soft); font-size:16px}
.details dd{margin:0; font-weight:600; font-size:16px; text-align:right}
.gallery{display:grid; gap:12px; margin-top:28px;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.gallery img{width:100%; aspect-ratio:3/2; object-fit:cover;
border-radius:var(--r-s); background:var(--sand)}
.fineprint{font-size:15px; color:var(--soft); max-width:70ch}
/* ---- listing index: areas, and the by-price lists -------------------- */
.areas{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:10px;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.areas a{display:flex; justify-content:space-between; align-items:baseline;
gap:12px; background:var(--paper); border-radius:var(--r-s); padding:14px 18px;
text-decoration:none; color:var(--teal); font-weight:600; font-size:16px;
box-shadow:var(--lift)}
.areas a:hover{box-shadow:var(--lift-hi)}
.areas span{font:500 13px/1 var(--mono); color:var(--soft)}
/* Hundreds of rows, so this is a list and not cards: price first, because
price is what you are scanning for on this page. */
.pricelist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:2px}
.pricelist a{display:grid; gap:2px 22px; align-items:baseline; padding:11px 14px;
text-decoration:none; color:var(--ink); border-radius:var(--r-s);
grid-template-columns:minmax(130px,auto) 1fr}
.pricelist a:hover{background:var(--paper); box-shadow:var(--lift)}
.pricelist b{font:600 16px/1.3 var(--serif); color:var(--teal)}
.pricelist span{font-size:15.5px}
.pricelist .where{grid-column:2; font-size:14.5px; color:var(--soft)}
/* ---- contact lines ----------------------------------------------- */
.lines{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px}
.lines li{background:var(--paper); border-radius:var(--r); padding:22px 26px;
display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
box-shadow:var(--lift)}
.lines .who{font-family:var(--serif); font-weight:600; font-size:19px;
color:var(--teal); min-width:86px}
.lines a{font-family:var(--mono); font-size:15.5px; text-decoration:none}
.lines a:hover{text-decoration:underline}
.tag{font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
color:var(--soft); background:var(--sand); border-radius:999px; padding:6px 11px}
/* ---- footer ------------------------------------------------------ */
footer.site{background:var(--teal-deep); color:#FFFAF2; padding-block:52px}
footer.site .shell{display:grid; gap:30px;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer.site img{width:172px}
footer.site a{color:#FFFAF2; text-decoration-color:rgba(255,250,242,.35)}
footer.site a:hover{text-decoration-color:#FFFAF2}
footer.site p,footer.site li{font-size:15px; line-height:1.65; color:#D7E7EB;
max-width:42ch}
footer.site ul{list-style:none; margin:0; padding:0; display:flex;
flex-direction:column; gap:9px}
footer.site .head{font:600 12px/1 var(--mono); letter-spacing:.16em;
text-transform:uppercase; color:#F2B98A; margin:0 0 14px}
footer.site .fine{grid-column:1/-1; border-top:1px solid rgba(255,250,242,.2);
margin-top:10px; padding-top:22px; font-size:13.5px; color:#BED5DA}
/* ---- the Get started questionnaire --------------------------------
Native controls, styled with accent-color and nothing else. A custom
radio built out of pseudo-elements is a week of work and a lifetime
of not quite matching what a phone keyboard, a screen reader or a
high-contrast mode expects -- and this form has around forty of
them. accent-color gets the brand colour onto a real that
already behaves correctly everywhere.
NO JAVASCRIPT ANYWHERE. Same rule as the rest of the site. The
consequence worth knowing: there is no live count of how many homes
your must-haves still match. That check runs in match.py where a
human reads it, which is the honest place for it -- a counter that
says "0 homes" while somebody is halfway through answering is a
counter that teaches them to lie to the form.
------------------------------------------------------------------ */
.wish{display:grid; gap:clamp(30px,3.4vw,44px); margin:0}
.wish input,.wish select,.wish textarea{
font:400 16.5px/1.55 var(--sans); color:var(--ink); background:var(--paper);
border:1px solid var(--rule); border-radius:var(--r-s);
padding:12px 14px; width:100%; max-width:34rem;
transition:border-color .15s ease, box-shadow .15s ease}
.wish textarea{max-width:48rem; resize:vertical; min-height:7.5em}
.wish input:focus,.wish select:focus,.wish textarea:focus{
outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-pale)}
.wish input[type=radio],.wish input[type=checkbox]{
width:auto; padding:0; accent-color:var(--teal); flex:0 0 auto;
margin:0; transform:translateY(1px)}
/* A block is one numbered part of the form. It is a