/* Farrever After Events - rebuilt site.
   Type and color are lifted from the business's own brand: Didot italic display
   (Playfair Display here), Brandon Grotesque Light body (Jost here), ink #414141,
   cream #F7EFE9 and clay #DEA27A from the live site, gold #C0A030 and sage #7E9A8C
   sampled from the logo artwork.
   Controlling idea: the site is a wedding-day RUN OF SHOW. A hairline time spine
   runs down every page; sections are call times on it. */

:root{
  color-scheme: only light;
  /* Straight off her live site: white ground, blush-cream panel #F7EFE9,
     soft charcoal text #414141 (never black), clay accent #DEA27A. The logo's
     gold and sage are deliberately NOT in the interface: the logo is an older
     asset and the site she actually runs is white, cream, charcoal and clay. */
  --paper:#ffffff;
  --cream:#f7efe9;
  --cream-2:#fcf8f5;
  --ink:#414141;
  --ink-2:#6f6a66;
  --char:#3c3a39;          /* her one dark band, deepened a hair for contrast */
  --clay:#dea27a;          /* her accent, decorative and on dark */
  --clay-ink:#a35a2c;      /* the same hue darkened until small text passes AA */
  --line:#eaded4;
  --line-2:#f4ece5;

  --display:"Bodoni Moda",Didot,"Bodoni MT","Playfair Display","Times New Roman",serif;
  --sans:"Jost","Brandon Grotesque",Futura,"Century Gothic",system-ui,sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:160ms;
  --t-mid:320ms;
  --t-slow:640ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  position:relative;
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.72;
  letter-spacing:.008em;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* width set in CSS plus a height attribute squashes the image; the
   attributes are there to reserve space, not to size it. */
.sbs img,.seenon img,.flogo img,.awardmarks img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.14;margin:0}
h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:-.012em}
h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.008em}
h3{font-size:clamp(20px,2.3vw,27px)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--char)}
::selection{background:var(--clay);color:#fff}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.narrow{width:min(760px,100%)}
/* A narrow column inherits margin-inline:auto from .wrap and centers itself,
   which under a left-aligned page header reads as a block that missed its
   margin. Centered is right for the centered CTA blocks and wrong for prose.
   Setting margin-inline:0 on the .wrap itself was wrong twice over: it also
   threw away the page gutter, so the text ran to the window edge. Keep the
   wrap where it is and hold the measure on its children. */
.wrap.narrow.flush{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.wrap.narrow.flush > *{max-width:760px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--char);color:#fff;
  padding:12px 18px;font-size:14px}
.skip:focus{left:8px;top:8px}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

/* ---------- the time spine: the motif, repeated on every page ---------- */
.spine{position:absolute;left:calc(var(--gut) / 2);top:0;bottom:0;width:1px;
  background:var(--line);pointer-events:none;z-index:0}
.spine::after{content:"";position:absolute;inset:0 auto 0 0;width:1px;
  background:linear-gradient(var(--clay),var(--clay-ink));
  transform-origin:top;transform:scaleY(var(--spine,0));transition:transform 80ms linear}
@media (max-width:960px){.spine{display:none}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
header.stuck{border-color:var(--line-2);box-shadow:0 1px 24px rgba(60,58,57,.05)}
.bar{display:flex;align-items:center;gap:20px;min-height:76px}
/* Her own logo, keyed off its plate by mklogo.py. A text wordmark is not a
   logo, and this one is hers. */
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;line-height:0}
.brand img{height:clamp(42px,4.2vw,56px);width:auto;display:block}
@media (max-width:560px){.brand img{height:40px}}
nav.main{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.9vw,28px)}
nav.main a{text-decoration:none;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;transition:color var(--t-fast) var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-mid) var(--ease)}
nav.main a:hover{color:var(--char)}
nav.main a:hover::after,nav.main a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
nav.main a[aria-current=page]{color:var(--char)}
.navcta{border:1px solid var(--char);padding:10px 18px !important;color:var(--char) !important;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.navcta::after{display:none}
.navcta:hover{background:var(--char);color:#fff !important}
.burger{margin-left:auto;display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:var(--char);margin:5px 0;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast) var(--ease)}
body.navopen .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:block}
  /* Anchored to the header rather than a fixed 76px, because the preview
     banner sits above it at the top of the page and moves it down. */
  header{position:sticky}
  nav.main{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--gut) 26px;border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
  body.navopen nav.main{opacity:1;transform:none;pointer-events:auto}
  nav.main a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:15px}
  .navcta{margin-top:16px;text-align:center;border-bottom:1px solid var(--char) !important}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:15px 28px;border:1px solid var(--char);
  background:var(--char);color:#fff;cursor:pointer;font-family:var(--sans);font-weight:400;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(60,58,57,.18)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--char)}
.btn.ghost:hover{background:var(--char);color:#fff}
.btn svg{width:14px;height:14px;transition:transform var(--t-mid) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
/* Her own secondary CTA, measured off her home page: display italic, about
   17px, then a gap and a hairline clay rule running off to the right. */
.rulelink{display:inline-flex;align-items:center;gap:18px;text-decoration:none;
  font-family:var(--display);font-style:italic;font-size:clamp(16px,1.35vw,18.5px);
  color:var(--char);white-space:nowrap;padding:4px 0;min-height:24px}
.rulelink::after{content:"";display:block;width:clamp(48px,5vw,78px);height:1px;
  background:var(--clay);transition:width var(--t-mid) var(--ease)}
.rulelink:hover{color:var(--clay-ink)}
.rulelink:hover::after{width:clamp(66px,7vw,104px)}
.deep .rulelink{color:#f2ece6}
@media (max-width:560px){
  /* A stack of shrink-to-fit buttons has a ragged right edge and reads as
     unfinished. One width, so the stack is a stack. */
  .btn{width:100%;justify-content:center}
}

/* ---------- section furniture ---------- */
section{position:relative;padding:clamp(64px,9vw,128px) 0}
section.tight{padding:clamp(44px,6vw,80px) 0}
.cream{background:var(--cream)}
.cream-2{background:var(--cream-2)}
.deep{background:var(--char);color:#f2ece6}
.deep h2,.deep h3,.deep strong{color:#fff}
.deep .eyebrow{color:var(--clay)}

/* the call time - the spine's tick marks, and the site's recurring motif */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay-ink);margin:0 0 18px;font-weight:400}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:0 0 auto}
.eyebrow.center{justify-content:center}

/* Didot-style drop initial - lifted from her own headings ("S ervices") */
.dropcap{font-family:var(--display);font-style:italic;letter-spacing:.06em;
  font-size:clamp(24px,2.3vw,32px);line-height:1.3;margin-top:.62em}
.dropcap::first-letter{font-size:3.18em;line-height:.8;padding-right:.05em;
  letter-spacing:0;color:var(--char)}

.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.66;color:var(--ink-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- hero ---------- */
/* CANDIDATE: her framing. Her hero is a photograph mounted on the page with
   white around it, not a full-bleed slab. */
.hero{position:relative;min-height:min(80vh,720px);display:flex;align-items:flex-end;
  padding:0;overflow:hidden;background:var(--char);
  width:calc(100% - var(--gut)*2);margin:0 auto clamp(18px,2.2vw,32px)}
@media (max-width:620px){.hero{width:calc(100% - var(--gut));margin-bottom:14px}}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
html.js .hero-img img{transform:scale(1.06);opacity:0;transition:opacity 900ms var(--ease-soft),transform 2400ms var(--ease-soft)}
html.js .hero-img img.in{opacity:1;transform:scale(1)}
.hero-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(26,23,20,.62) 0%,rgba(26,23,20,.34) 42%,rgba(26,23,20,0) 72%),
    linear-gradient(180deg,rgba(26,23,20,.34) 0%,rgba(26,23,20,.06) 34%,rgba(26,23,20,.72) 100%)}
@media (max-width:860px){
  .hero-img::after{background:
    linear-gradient(180deg,rgba(26,23,20,.5) 0%,rgba(26,23,20,.28) 38%,rgba(26,23,20,.8) 100%)}
}
.hero-body{position:relative;z-index:2;color:#fff;padding-bottom:clamp(48px,7vw,92px);
  padding-top:clamp(120px,18vw,200px);width:100%}
.hero h1{color:#fff;font-style:italic;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero .lede{color:rgba(255,255,255,.9);max-width:46ch;margin-top:22px}
.hero .eyebrow{color:rgba(255,255,255,.94)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .btn{background:#fff;border-color:#fff;color:var(--char)}
.hero .btn.ghost{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--char);border-color:#fff}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}

/* page header for interior pages */
.phead{padding:clamp(56px,8vw,104px) 0 clamp(32px,4vw,52px);position:relative}
.phead h1{font-style:italic;max-width:16ch}
/* Her page headers run the text against a matted photograph. Ours wrapped the
   heading at 16ch and left the other half of the window empty. */
.pheadgrid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,64px);align-items:center}
.matted{background:var(--cream);padding:clamp(12px,1.7vw,26px)}
.matted .frame{background:var(--paper)}
@media (max-width:860px){
  .pheadgrid{grid-template-columns:1fr;gap:clamp(26px,5vw,34px)}
  .phead h1{max-width:none}
}
.phead-more{margin-top:14px;color:var(--ink-2)}
.phead .lede{margin-top:22px;max-width:60ch}

/* ---------- run of show: the signature block ---------- */
.ros{list-style:none;margin:0;padding:0;position:relative}
.ros::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.deep .ros::before{background:rgba(255,255,255,.2)}
.ros li{position:relative;padding:0 0 clamp(30px,4vw,46px) clamp(30px,5vw,60px)}
.ros li:last-child{padding-bottom:0}
.ros li::before{content:"";position:absolute;left:-3.5px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--clay);box-shadow:0 0 0 5px var(--paper)}
.cream .ros li::before{box-shadow:0 0 0 5px var(--cream)}
.deep .ros li::before{background:var(--clay);box-shadow:0 0 0 5px var(--char)}
.ros .when{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-ink);margin-bottom:7px}
.deep .ros .when{color:var(--clay)}
.ros h3{margin-bottom:8px}
.ros p{color:var(--ink-2);max-width:62ch}
.deep .ros p{color:rgba(242,236,230,.82)}

/* ---------- generic layout helpers ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:center}
/* The media column matches the prose column's height instead of setting its
   own; see .split>.stack2 further down. */
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
@media (max-width:860px){
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .split .frame.ar34{aspect-ratio:4/5}
  section{padding:clamp(52px,8vw,96px) 0}
}
.grid{display:grid;gap:clamp(18px,2.6vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.frame{position:relative;overflow:hidden;background:var(--cream)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-soft)}
.frame:hover img{transform:scale(1.035)}
.ar43{aspect-ratio:4/3}.ar11{aspect-ratio:1/1}.ar34{aspect-ratio:3/4}.ar169{aspect-ratio:16/9}
.credit{font-size:12px;letter-spacing:.06em;color:var(--ink-2);margin-top:9px}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line-2);padding:clamp(24px,3vw,38px);
  position:relative;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
  border-color var(--t-mid) var(--ease)}
.cream .card{background:var(--paper)}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(60,58,57,.07);border-color:var(--line)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-2)}
.card .price{font-family:var(--display);font-style:italic;font-size:26px;color:var(--clay-ink);
  display:block;margin:2px 0 14px}
a.card{text-decoration:none;display:block}
a.card .more{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--char)}
a.card .more svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease)}
a.card:hover .more svg{transform:translateX(5px)}

/* ---------- inclusions / checklists (her package copy) ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.checks li{position:relative;padding-left:30px;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:7px;
  border-left:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:rotate(-45deg)}
.subhead{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.stats div{background:var(--paper);padding:clamp(22px,3vw,34px);text-align:center}
.cream .stats div{background:var(--cream)}
.stats b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(32px,4.4vw,50px);color:var(--char);line-height:1}
.stats span{display:block;margin-top:9px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2)}
/* The gallery breaks 165 photographs into five categories, and five cells in a
   four-column grid leaves one on a row of its own. */
.stats.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.stats.five{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.stats,.stats.five{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews ---------- */
.quote{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.5vw,31px);
  line-height:1.44;color:var(--char)}
.rev{break-inside:avoid;background:var(--paper);border:1px solid var(--line-2);
  padding:clamp(22px,2.6vw,32px);margin-bottom:clamp(18px,2.4vw,30px)}
.cream .rev{background:var(--paper)}
.rev .stars{color:var(--clay-ink);letter-spacing:3px;font-size:13px;margin-bottom:12px}
.rev h3{font-size:19px;margin-bottom:10px}
.rev p{font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.rev .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px 14px}
.rev .who b{color:var(--char);font-weight:400}
.grid>.rev{display:flex;flex-direction:column}
.grid>.rev .who{margin-top:auto}
.masonry{columns:3;column-gap:clamp(16px,2.2vw,26px)}
@media (max-width:1000px){.masonry{columns:2}}
@media (max-width:640px){.masonry{columns:1}}
/* ---------- the award wall ----------
   The badges are keyed to transparency by mkbadges.py, so there are no cells
   and no borders here: the marks sit on the page at one optical height and are
   grouped by who issued them. */
.awards{background:var(--paper);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.awardwall{display:grid;gap:clamp(28px,3.6vw,46px);max-width:980px;margin-inline:auto}
.awardrow+.awardrow{border-top:1px solid var(--line-2);padding-top:clamp(26px,3.4vw,42px)}
.awardlabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(16px,2vw,24px)}
.awardlabel b{color:var(--clay-ink);font-weight:400}
.awardmarks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(10px,1.4vw,18px)}
.awardmarks li{display:grid;place-items:center;
  width:clamp(88px,8.4vw,118px);height:clamp(72px,6.8vw,96px)}
.awardmarks img{width:100%;height:100%;
  object-fit:contain;transition:transform var(--t-mid) var(--ease)}
.awardmarks li:hover img{transform:translateY(-4px) scale(1.04)}
@media (max-width:560px){
  .awardmarks{gap:14px}
  .awardmarks li{width:84px;height:68px}
}
.seenon{margin:clamp(30px,4vw,52px) auto 0;max-width:560px;padding:0;border:0}
.seenon img{width:100%;display:block}

/* ---------- gallery ---------- */
/* Same mat as every other group of photographs on the site: she never lets
   two pictures touch, and a 165-tile contact sheet is where that matters most. */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(5px,.75vw,11px);background:var(--cream);padding:clamp(11px,1.7vw,24px)}
.gal button{padding:0;border:0;background:var(--cream);cursor:zoom-in;overflow:hidden;
  aspect-ratio:3/2;display:block}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-soft),
  filter var(--t-mid) var(--ease)}
.gal button:hover img{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(24,21,19,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,48px)}
.lightbox[open],.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;
  animation:lbin var(--t-mid) var(--ease)}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lightbox .lbbtn{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:30px;line-height:1;padding:16px;opacity:.75;transition:opacity var(--t-fast) var(--ease)}
.lightbox .lbbtn:hover{opacity:1}
.lb-close{top:6px;right:10px}
.lb-prev{left:2px;top:50%;transform:translateY(-50%)}
.lb-next{right:2px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);
  font-size:12.5px;letter-spacing:.14em}

/* ---------- forms ---------- */
form.inquire{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:8px}
label .req{color:var(--clay)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;font-weight:300;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:14px 15px;
  border-radius:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--char);
  box-shadow:0 0 0 3px rgba(222,162,122,.22);outline:none}
.hp{position:absolute;left:-9999px}
.formnote{font-size:13.5px;color:var(--ink-2)}
.formstatus{padding:14px 16px;border:1px solid var(--clay-ink);background:#f3f7f4;font-size:15px;display:none}
.formstatus.on{display:block}
.formstatus.err{border-color:var(--clay);background:#fdf3ec}
/* Field-level errors. --clay-ink is the only warm tone here that clears AA on
   white at this size, which matters because the message is the whole point. */
.fielderr{margin:7px 0 0;font-size:13.5px;color:var(--clay-ink);letter-spacing:.01em}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--clay-ink)}

/* ---------- contact rows ---------- */
.contactlist{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--line-2)}
.contactlist a,.contactlist div{display:flex;gap:16px;align-items:center;background:var(--paper);
  padding:19px 22px;text-decoration:none;transition:background var(--t-fast) var(--ease)}
.contactlist a:hover{background:var(--cream-2)}
.contactlist svg{width:19px;height:19px;flex:0 0 auto;color:var(--clay-ink);stroke-width:1.4}
.contactlist b{display:block;font-weight:400;color:var(--char);font-size:16.5px}
.contactlist span{display:block;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(18px,2vw,22px);color:var(--char)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-mid) var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .ans{padding:0 0 26px;color:var(--ink-2);max-width:72ch}

/* ---------- footer ---------- */
footer{background:var(--char);color:#e9e2da;padding:clamp(56px,7vw,86px) 0 34px;position:relative}
footer a{color:#e9e2da;text-decoration:none}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.flogo{max-width:230px;margin-bottom:20px}
.fh{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);
  margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:15px}
footer ul a{display:inline-block;padding:3px 0;min-height:24px}
footer ul a{opacity:.86;transition:opacity var(--t-fast) var(--ease)}
footer ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.fbot{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:rgba(233,226,218,.62)}
.fbot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- sticky contact bar: her real call / email / facebook / chat ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -2px 22px rgba(60,58,57,.08)}
.actionbar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.actionbar a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px
  calc(10px + env(safe-area-inset-bottom));text-decoration:none;color:var(--char);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.actionbar svg{width:20px;height:20px;stroke-width:1.5;color:var(--clay-ink)}
.actionbar a+a{border-left:1px solid var(--line-2)}
@media (max-width:860px){.actionbar{display:block}body{padding-bottom:70px}}

/* ---------- motion system ---------- */
/* Content must never depend on JavaScript to be visible. The reveal only arms
   itself once the inline head script has marked the document as scripted. */
html.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html.js [data-reveal]{opacity:1;transform:none}
  html.js .hero-img img,html.js .hero-img img.in{opacity:1;transform:none}
}
@media print{header,footer,.actionbar,.spine{display:none}body{padding:0}}

/* Her logo artwork is shipped untouched; it carries its own pale ground, so the
   footer plate is set to that exact color instead of keying the artwork. */
/* The logo's wordmark is near-black, so on the charcoal footer it needs a
   light ground. A warm cream plate belongs to this palette; the artwork's own
   cool #e9ecee plate, which is what this used to be, did not. */
.flogo{display:block;margin-bottom:22px;max-width:196px;
  background:var(--cream);padding:14px 16px}
.flogo img{width:100%;height:auto;display:block}
.badges img[src$="favicon.png"]{display:none}

/* Tap targets: every inline link in prose clears 24px. The old selector list
   named four places and missed the rest, so "The Knot" in a sentence was an
   18px target on a phone. Vertical padding on an inline element grows the hit
   box without turning it into something that cannot break across lines, which
   display:inline-block does. */
.deep p a,.wrap > p a,.credit a,.faq .ans a{display:inline-block;padding:3px 0;min-height:24px}
p a,li a,figcaption a,.pvbanner a,.src a,.rev .who a,.revscore-l a,.rb-src a,
.kv a,.attrib a,.formnote a{padding-block:4px}
/* The rating bar sets its source links at 12px, so four pixels of padding
   still left them at 22. Name the minimum instead of guessing the padding. */
.rb-src a{display:inline-block;min-height:24px;padding-block:5px}
.contactlist b{text-transform:none;letter-spacing:.005em;line-height:1.35}
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.62em}
@media (max-width:560px){.eyebrow::before{display:none}}

/* ---------- reviews as an argument ---------- */
.revhead{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(30px,5vw,64px);align-items:end}
@media (max-width:860px){.revhead{grid-template-columns:1fr}}
.revscore{text-align:center;border:1px solid var(--line);padding:clamp(22px,3vw,32px);
  background:var(--cream-2)}
.revscore-n{font-family:var(--display);font-style:italic;font-size:clamp(54px,7vw,82px);
  line-height:.9;color:var(--char)}
.revscore-s{color:var(--clay-ink);letter-spacing:4px;font-size:15px;margin-top:10px}
.revscore-l{margin-top:12px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.6}
.revscore-l a{color:var(--char)}

.srcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media (max-width:820px){.srcs{grid-template-columns:repeat(2,1fr)}}
.src{background:var(--paper);padding:clamp(20px,2.6vw,30px);text-align:center}
.src b{display:block;font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(30px,4vw,44px);line-height:1;color:var(--char)}
.src b span{font-size:.46em;font-style:normal;color:var(--ink-2);margin-left:2px}
.src>span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.src em{display:block;margin-top:9px;font-style:normal;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-ink)}
.src em a{color:inherit}

.revfeature{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);
  align-items:center}
@media (max-width:900px){.revfeature{grid-template-columns:1fr}}
.rev-pull{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(21px,2.5vw,32px);line-height:1.42;color:#fff;max-width:26ch}
.rev-attr{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,236,230,.75)}
.rev-attr b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:19px;letter-spacing:.01em;text-transform:none;color:#fff;margin-bottom:6px}

.sechead{max-width:66ch;margin-bottom:clamp(34px,5vw,58px)}
.sechead .lede{margin-top:18px}

.theme{border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,40px);
  margin-top:clamp(30px,4vw,52px)}
.theme-head{display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,3vw,44px);
  margin-bottom:clamp(22px,3vw,34px)}
@media (max-width:720px){.theme-head{grid-template-columns:1fr;gap:12px}}
.theme-mark{display:flex;flex-direction:column;gap:8px}
.theme-n{font-family:var(--display);font-style:italic;font-size:34px;line-height:1;
  color:var(--clay)}
.theme-count{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.theme-text h3{margin-bottom:9px}
.theme-note{color:var(--ink-2);max-width:62ch;margin:0}
.theme-q{columns:3;column-gap:clamp(16px,2.2vw,26px)}
@media (max-width:1040px){.theme-q{columns:2}}
@media (max-width:640px){.theme-q{columns:1}}

.rev{break-inside:avoid;background:var(--paper);border:1px solid var(--line-2);
  padding:clamp(20px,2.4vw,28px);margin:0 0 clamp(16px,2.2vw,26px)}
.cream .rev{background:var(--paper)}
.rev blockquote{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.rev blockquote p{margin:0 0 .9em}
.rev blockquote p:last-child{margin:0}
.rev h4{font-family:var(--display);font-size:18px;font-weight:400;margin:0 0 10px;
  color:var(--char)}
.rev .stars{color:var(--clay-ink);letter-spacing:3px;font-size:12.5px;margin-bottom:11px}
.rev .who{margin-top:15px;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:5px 13px}
.rev .who b{color:var(--char);font-weight:400}
.rev-long{border-color:var(--line);background:var(--cream-2)}
.cream .rev-long{background:var(--cream-2)}

.panel{background:var(--cream);padding:clamp(28px,4vw,46px);border:1px solid var(--line)}
.panel h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.panel p{color:var(--ink-2);max-width:66ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px clamp(18px,3vw,34px);margin:24px 0 0}
.kv dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-ink);
  padding-top:3px}
.kv dt a{color:inherit}
.kv dd{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:620px){.kv{grid-template-columns:1fr;gap:4px 0}.kv dd{margin-bottom:14px}}

/* ---------- CTA band, and the run-of-show on light ---------- */
.ctaband{border-top:1px solid var(--line)}
.ctaline{margin-top:26px;font-size:14.5px;color:var(--ink-2);display:flex;gap:10px;
  justify-content:center;flex-wrap:wrap;align-items:center}
.ctaline a{color:var(--char);text-decoration:none;border-bottom:1px solid var(--line);
  padding:3px 0;min-height:24px;display:inline-block;
  transition:border-color var(--t-fast) var(--ease)}
.ctaline a:hover{border-color:var(--clay-ink)}
.rossticky{position:sticky;top:110px}
@media (max-width:860px){.rossticky{position:static}}
.attrib{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);
  margin-top:-4px}
.rev .who .tag{border:1px solid var(--line);padding:2px 7px;color:var(--clay-ink);
  letter-spacing:.09em;font-size:10.5px}
p .tag{border:1px solid var(--line);padding:2px 7px;color:var(--clay-ink);
  letter-spacing:.09em;font-size:11px;text-transform:uppercase;white-space:nowrap}
/* The press banner carries its own near-white ground; the plate matches it so the
   artwork never shows as a lighter box on the cream. */
/* Her own "as seen on" graphic, keyed off its paper ground by hand so it sits
   on the page instead of in a visible off-white rectangle. */
.seenon{background:transparent;padding:0}
/* The section numeral is large display text, so 3:1 is the bar; the raw clay
   only reaches 2.2:1 on paper. */
.theme-n{color:#c9753f}

/* ---------- /compare : the pitch page ---------- */
.cmphead h1{max-width:18ch}
/* The page is an argument about two screens, so it opens on both of them
   rather than on a heading and 700px of nothing. Side by side and cropped to
   the top of each page: stacked at full height they came to 1,566px against a
   600px heading, and centring that put 800px of white above the headline,
   which is the exact fault this page is about. */
.cmpteaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.cmpteaser figure{margin:0;background:var(--cream);padding:clamp(8px,.9vw,13px)}
.cmpteaser img{width:100%;height:clamp(230px,23vw,330px);object-fit:cover;
  object-position:top center;display:block}
.cmpteaser figcaption{margin-top:9px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.cmpteaser figure:last-child figcaption{color:var(--clay-ink)}
@media (max-width:560px){.cmpteaser img{height:150px}}
.cmplinks{margin-top:26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cmplinks a{color:var(--char);text-decoration:none;border-bottom:1px solid var(--clay);
  padding:4px 0;min-height:24px;display:inline-block}
.scores{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px)}
@media (max-width:820px){.scores{grid-template-columns:1fr}}
.score{border:1px solid var(--line);padding:clamp(24px,3vw,38px);background:var(--paper)}
.score.new{background:var(--cream-2);border-color:var(--clay)}
.scorelabel{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2)}
.scoren{margin:6px 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(54px,7vw,84px);line-height:1;color:var(--char)}
.scoren i{font-size:.3em;font-style:normal;color:var(--ink-2);margin-left:4px}
.score.new .scoren{color:var(--clay-ink)}
.scoreline{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}
.scoreparts{list-style:none;margin:24px 0 0;padding:20px 0 0;display:grid;gap:13px;
  border-top:1px solid var(--line-2)}
.scoreparts li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.scoreparts span:first-child{font-size:14.5px;color:var(--ink-2)}
.scoreparts b{font-weight:400;font-family:var(--display);font-size:19px;color:var(--char)}
.scoreparts b i{font-size:.6em;font-style:normal;color:var(--ink-2)}
.scoreparts .bar{grid-column:1/-1;height:3px;background:var(--line-2);display:block}
.scoreparts .bar span{display:block;height:100%;background:var(--clay)}
.score.new .scoreparts .bar span{background:var(--clay-ink)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);font-size:15px;min-width:520px}
table.cmp th,table.cmp td{padding:13px clamp(12px,1.6vw,20px);text-align:left;
  border-bottom:1px solid var(--line-2)}
table.cmp thead th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;background:var(--cream-2);white-space:nowrap}
table.cmp tbody th{font-weight:400;color:var(--ink-2)}
table.cmp td{font-family:var(--display);font-size:18px;color:var(--char);white-space:nowrap}
table.cmp td.win{color:var(--clay-ink)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
/* On a phone the comparison stops being a table and becomes one card per row,
   with both numbers beside each other. Scrolling sideways to find the column
   the page is arguing for is not a comparison. */
@media (max-width:680px){
  .tablewrap.cmpwrap{overflow-x:visible}
  table.cmp{min-width:0;display:block;border:0;background:transparent}
  table.cmp thead{display:none}
  table.cmp tbody{display:grid;gap:10px}
  table.cmp tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;
    background:var(--paper);border:1px solid var(--line);padding:13px 15px}
  table.cmp tbody th{grid-column:1/-1;border:0;padding:0 0 9px;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  table.cmp td{border:0;padding:0;font-size:17px}
  table.cmp td::before{content:attr(data-col);display:block;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
}
/* ---------- what a search engine is given ----------
   Deliberately NOT a mock Google result: a fake SERP is a fabricated artifact,
   and the point is the literal tag text, which is checkable. Labelled fields
   on two panels instead. */
.serp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(26px,3.4vw,40px);align-items:stretch}
.serp-col{background:var(--paper);border:1px solid var(--line);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.serp-col.win{border-color:var(--clay)}
.serp-label{margin:0 0 18px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.serp-col.win .serp-label{color:var(--clay-ink)}
.serp-field{margin:18px 0 6px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}
.serp-field:first-of-type{margin-top:0}
.serp-title{margin:0;font-family:var(--display);font-size:clamp(17px,1.6vw,21px);
  line-height:1.3;color:var(--char)}
.serp-desc,.serp-h1{margin:0;font-size:15px;line-height:1.66;color:var(--ink-2)}
.serp-h1{font-family:var(--display);font-style:italic;font-size:17px;color:var(--char)}
.serp-h1.none{font-family:var(--sans);font-style:normal;font-size:15px;color:var(--clay-ink)}
.serp-note{margin:auto 0 0;padding-top:20px;font-size:14px;line-height:1.6;
  color:var(--ink-2);border-top:1px solid var(--line-2)}
@media (max-width:760px){.serp{grid-template-columns:1fr}}

.seowhy{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px)}
.seoitem{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.seoitem h3{font-size:clamp(18px,1.7vw,22px);margin:0 0 12px}
.seoitem p{margin:0;color:var(--ink-2);font-size:15.5px}
@media (max-width:760px){.seowhy{grid-template-columns:1fr}}

/* Who decided each finding. A template default and a decision she made are
   different things, and a list that does not say which is which reads as a
   list of her mistakes. */
.findwho{margin-left:14px;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);padding:3px 9px;white-space:nowrap}
.findwho.plat{color:var(--clay-ink);border-color:var(--clay)}
.findn{display:flex;align-items:center;flex-wrap:wrap;gap:6px}

/* ---------- /email: the deliverability findings ---------- */
.emq{margin:0;background:var(--cream);padding:clamp(24px,3vw,38px);
  border-left:2px solid var(--clay)}
.emq p{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(17px,1.7vw,22px);line-height:1.5;color:var(--char)}
.emq cite{display:block;margin-top:18px;font-style:normal;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

table.dns{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);font-size:15px;min-width:660px}
table.dns th,table.dns td{padding:14px clamp(12px,1.5vw,18px);text-align:left;
  border-bottom:1px solid var(--line-2);vertical-align:top}
table.dns thead th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;background:var(--cream-2);white-space:nowrap}
table.dns tbody th{font-weight:400;color:var(--char);white-space:nowrap}
table.dns code{font-size:12.5px;word-break:break-word;color:var(--ink-2)}
.dnswhy{color:var(--ink-2);font-size:14.5px;max-width:34ch}
.dnsflag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border:1px solid var(--line);white-space:nowrap}
.dnsflag.gap{color:var(--clay-ink);border-color:var(--clay)}
.dnsflag.ok{color:var(--ink-2)}
.dnsflag.info{color:var(--ink-2);border-style:dashed}
@media (max-width:680px){
  .tablewrap table.dns{min-width:560px}
}

.correction-body b{color:var(--char);font-weight:500}
.src{margin-top:18px;font-size:14px;color:var(--ink-2)}

.candgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(26px,3.4vw,40px)}
.cand{background:var(--paper);padding:clamp(22px,2.6vw,32px)}
.candn{margin:0 0 12px;font-family:var(--display);font-style:italic;
  font-size:19px;color:var(--clay-ink)}
.cand h3{font-size:clamp(17px,1.6vw,21px);margin:0 0 10px}
.cand p{color:var(--ink-2);font-size:15px;margin:0 0 12px}
.candlike{font-size:13.5px !important;color:var(--clay-ink) !important}
.candtell b{color:var(--char);font-weight:500}
@media (max-width:860px){.candgrid{grid-template-columns:1fr}}
.settle{margin-top:clamp(26px,3vw,36px);font-family:var(--display);
  font-style:italic;font-size:clamp(18px,1.9vw,24px);line-height:1.5;
  color:var(--char);max-width:64ch}

.fixsteps{list-style:none;counter-reset:fix;margin:clamp(26px,3.4vw,40px) 0 0;padding:0;
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.fixsteps li{counter-increment:fix;background:var(--paper);
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,32px);
  display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline}
.fixsteps li::before{content:counter(fix);font-family:var(--display);
  font-style:italic;font-size:22px;color:var(--clay-ink);grid-row:1/3}
.fixsteps h3{margin:0;font-size:clamp(17px,1.6vw,21px)}
.fixsteps p{margin:6px 0 0;color:var(--ink-2);font-size:15.5px;grid-column:2}
.fixsteps code{font-size:13px;background:var(--cream);padding:2px 6px;
  color:var(--clay-ink);word-break:break-word}
.notdone{margin-top:clamp(26px,3vw,34px);padding-top:22px;
  border-top:1px solid var(--line-2);color:var(--ink-2);font-size:15px;max-width:70ch}

.ansmore{margin:16px 0 0}
.ansmore a{font-family:var(--display);font-style:italic;font-size:16px;
  color:var(--clay-ink);text-decoration:none;display:inline-flex;align-items:center;
  gap:12px;padding-block:4px}
.ansmore a::after{content:"";width:40px;height:1px;background:var(--clay);
  transition:width var(--t-mid) var(--ease)}
.ansmore a:hover::after{width:58px}
.credits{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.credits li{background:var(--paper);padding:clamp(16px,2vw,22px);
  font-family:var(--display);font-size:clamp(16px,1.4vw,19px);color:var(--char)}
.cream .credits li{background:var(--cream)}
@media (max-width:720px){.credits{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.credits{grid-template-columns:1fr}}
.tablenote{margin-top:22px;font-size:14.5px;color:var(--ink-2);max-width:74ch}
.tablenote b{color:var(--char)}

/* ---------- before / after: one column per SITE ----------
   The reader is comparing two websites, not four pictures, so each site owns a
   column and holds both of its screens. */
.sbsgroup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);
  align-items:start}
@media (max-width:820px){.sbsgroup{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}}
.site{margin:0;border:1px solid var(--line-2);background:var(--cream-2);
  padding:clamp(14px,1.8vw,22px)}
.site.new{border-color:var(--clay);background:var(--paper)}
.sitelabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 clamp(12px,1.4vw,16px)}
.site.new .sitelabel{color:var(--clay-ink)}
.screen img{width:100%;height:auto;display:block;border:1px solid var(--line-2);
  background:var(--paper)}
.screen.phone{width:58%;margin:clamp(12px,1.6vw,18px) auto 0}
@media (max-width:820px){.screen.phone{width:64%}}
@media (max-width:520px){.screen.phone{width:76%}}

/* Eight findings in one column is a wall. Two columns halves the scroll and
   lets each one be read as a unit. */
.findgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px)}
@media (max-width:860px){.findgrid{grid-template-columns:1fr}}
.find{border-top:2px solid var(--clay);padding-top:clamp(16px,2vw,22px)}
.findn{font-family:var(--display);font-style:italic;font-size:22px;
  color:var(--clay-ink);margin:0 0 6px}
.find h3{margin-bottom:12px;font-size:clamp(19px,2vw,23px)}
.find p{color:var(--ink-2);max-width:60ch;font-size:15px}
.evidence{font-family:var(--display);font-size:17px;color:var(--char);
  border-left:2px solid var(--clay);padding:6px 0 6px 16px;margin-bottom:14px}
.why b{color:var(--char);font-weight:400}

.plainlist{margin:0;padding:0 0 0 1.6em;display:grid;gap:14px;color:var(--ink-2)}
.plainlist li{padding-left:6px}
.plainlist li::marker{color:var(--clay-ink);font-family:var(--display);font-style:italic}
.correction{border:1px solid var(--clay);background:var(--cream-2);
  padding:clamp(20px,2.6vw,30px)}
.correction p{color:var(--ink-2);font-size:15.5px;max-width:72ch}
.correction p+p{margin-top:.9em}
.correctionlabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-ink);margin:0 0 12px}

/* ---------- ratings banner: proof as numbers, directly under the hero ----------
   Each cell leads with the figure and names where it came from underneath, so
   every number on it is checkable. The badges do the same job at the foot of the
   page; this does it in the first three seconds. */
.ratings{border-bottom:1px solid var(--line-2)}
.ratingbar{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px)}
/* Two columns all the way down: one column made the banner 1,188px tall on a
   phone and pushed the whole page below it. */
@media (max-width:860px){.ratingbar{grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,4vw,30px)}}
@media (max-width:560px){
  .ratingbar{gap:18px 16px}
  .rb b{font-size:30px}
  .rb-line{font-size:14px;margin-top:9px}
  .rb-src{font-size:10.5px;letter-spacing:.1em}
}
.rb{border-top:2px solid var(--clay);padding-top:16px;min-width:0}
.rb b{display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--char)}
.rb b .u{font-size:max(13px,.4em);font-style:normal;color:var(--ink-2);
  margin-left:3px;letter-spacing:.01em}
.rb-line{display:block;margin-top:11px;font-size:15px;color:var(--ink-2);line-height:1.45}
.rb-stars{color:var(--clay-ink);letter-spacing:1.5px;font-size:13px}
.rb-src{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay-ink)}
.rb-src a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px}
.rb-src a:hover{border-color:var(--clay-ink)}

.scorenote{margin:clamp(18px,2.2vw,26px) 0 0;font-size:14px;color:var(--ink-2)}
.scorenote a{color:var(--clay-ink)}
.correction{scroll-margin-top:100px}

/* ---------- spec-build preview banner ----------
   This is an unsolicited concept using someone else's brand. It says so on every
   page, and every page is noindex so it cannot compete with her real site. */
.pvbanner{background:var(--char);color:#e9e2da;font-size:12.5px;line-height:1.5;
  padding:9px var(--gut);letter-spacing:.01em;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:4px 22px;text-align:center}
.pvbanner b{color:#fff;font-weight:500}
.pvbanner a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* The side-by-side is the reason the rest of the site is here, so it reads as
   an invitation rather than another sentence in the disclaimer. */
.pvbanner .pv-cmp{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  color:var(--clay);text-decoration:none;white-space:nowrap}
.pvbanner .pv-cmp b{color:var(--clay);font-weight:400}
.pvbanner .pv-cmp::after{content:"";width:22px;height:1px;background:var(--clay);
  transition:width var(--t-mid) var(--ease)}
.pvbanner .pv-cmp:hover::after{width:34px}
@media (max-width:620px){.pvbanner{gap:2px 14px;font-size:12px}}


/* ---------- every page, paired ---------- */
.pairsec{padding:clamp(34px,4.4vw,60px) 0;border-top:1px solid var(--line-2)}
.pairsec:first-of-type{border-top:0}
.pairhead{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;
  margin-bottom:clamp(14px,1.8vw,20px)}
.pairhead h3{margin:0;font-size:clamp(21px,2.4vw,28px)}
.pairpath{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pairpath.new{color:var(--clay-ink)}
.pairnote{margin:0 0 clamp(16px,2vw,22px);color:var(--ink-2);font-size:15px;max-width:74ch}
.sbsgroup.solo{grid-template-columns:minmax(0,1fr);max-width:620px}
.pairjump{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(18px,2.2vw,26px)}
.pairjump a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-2);border:1px solid var(--line);padding:8px 13px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pairjump a:hover{border-color:var(--clay-ink);color:var(--clay-ink)}
.pairsec{scroll-margin-top:90px}

/* ---------- photo-led home ----------
   Measured against her live site: hers is 87.9% photograph by area, the first
   version of this was 16.6%. She sells a visual service and there are 165
   photographs available. */
/* Mounted, like the hero and like every photograph on her site: nothing on
   this page runs off the edge of the paper. */
.photoband{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(6px,.85vw,13px);width:calc(100% - var(--gut)*2);margin:0 auto;
  background:var(--cream);padding:clamp(11px,1.7vw,24px)}
@media (max-width:820px){.photoband{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.photoband{gap:8px;padding:8px}}
.photoband .frame{aspect-ratio:4/5;background:var(--paper)}

/* dense packing, or a tile that spans 4 columns leaves a hole the next tile
   cannot fill and the spread renders with white gaps in it. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(0,19vw);grid-auto-flow:row dense;
  gap:clamp(5px,.75vw,11px);margin:clamp(18px,2.2vw,28px) auto 0;
  width:calc(100% - var(--gut)*2);
  background:var(--cream);padding:clamp(11px,1.7vw,24px)}
.mosaic .mt{grid-column:span 2;grid-row:span 1;overflow:hidden;display:block;
  background:var(--cream)}
.mosaic .mt.wide{grid-column:span 4}
.mosaic .mt.tall{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease-soft)}
.mosaic .mt:hover img{transform:scale(1.05)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,26vw)}
  .mosaic .mt.wide{grid-column:span 4}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(0,42vw);gap:6px;padding:6px}
  .mosaic .mt,.mosaic .mt.wide{grid-column:span 1}
  .mosaic .mt.tall{grid-row:span 1}
}

.stack2{display:grid;gap:clamp(10px,1.4vw,16px)}
/* Filling the row is only correct when the split is what defines the height.
   A stack sitting loose in a column has nothing to fill, so it keeps the
   aspect ratios its frames were given. */
.split>.stack2{align-self:stretch;grid-auto-rows:1fr}
.split>.stack2.uneven{grid-auto-rows:auto;grid-template-rows:1.38fr 1fr}
.split>.stack2>.frame{aspect-ratio:auto;height:100%;min-height:150px}
.split>.stack2>.frame img{position:absolute;inset:0}
@media (max-width:860px){
  .stack2{grid-template-columns:1fr 1fr}
  .split>.stack2{grid-auto-rows:auto}
  .split>.stack2.uneven{grid-template-rows:auto}
  .split>.stack2>.frame{aspect-ratio:3/4;height:auto;min-height:0}
  .split>.stack2>.frame img{position:static}
}
.galhead{display:grid;gap:clamp(14px,1.6vw,20px);justify-items:start}

/* the condensed run of show used on the home page */
.ros.tight li{padding-bottom:clamp(20px,2.4vw,28px)}
.ros.tight h3{font-size:clamp(18px,1.9vw,21px)}

/* ---------- page pairs as disclosures ---------- */
.pairsec{border-top:1px solid var(--line);margin:0}
.pairsec:last-of-type{border-bottom:1px solid var(--line)}
.pairsec summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:10px 18px;flex-wrap:wrap;padding:clamp(18px,2.2vw,24px) 44px clamp(18px,2.2vw,24px) 0;
  position:relative}
.pairsec summary::-webkit-details-marker{display:none}
.pairsec summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--clay-ink);border-bottom:1.5px solid var(--clay-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-mid) var(--ease)}
.pairsec[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.pairsec summary:hover .pairname{color:var(--clay-ink)}
.pairname{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);color:var(--char);
  transition:color var(--t-fast) var(--ease)}
.pairbody{padding:0 0 clamp(26px,3.4vw,40px)}
.pairsec{scroll-margin-top:90px}

/* ---------- interior page photo grids ---------- */
.pgrid{display:grid;gap:clamp(5px,.75vw,11px);
  background:var(--cream);padding:clamp(11px,1.7vw,24px)}
.pgrid .frame{background:var(--paper)}
.pgrid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.pgrid.c4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.pgrid.c4{grid-template-columns:repeat(2,1fr)}}

/* ---------- gallery filter + paging ---------- */
.galfilter{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:clamp(16px,2vw,24px)}
.galfilter button{font-family:var(--sans);font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;transition:all var(--t-fast) var(--ease)}
.galfilter button:hover{border-color:var(--char);color:var(--char)}
.galfilter button[aria-pressed=true]{background:var(--char);border-color:var(--char);color:#fff}
.gcount{font-size:11px;opacity:.65}
.gal .gtile[hidden]{display:none}
.galstatus{margin-top:14px;font-size:13px;color:var(--ink-2)}
#galmore[hidden]{display:none}

/* ---------- the package ----------
   This was a 412px card beside an 1,814px list: pinned to the top it read as
   unfinished, centred it floated in 1,400px of dead cream. A 4:1 height ratio is
   not a two-column layout. The price runs full width as a banner and the three
   lists sit beside each other underneath, which is also how they are read. */
.pricebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:clamp(18px,2.6vw,40px);align-items:center;background:var(--paper);
  border:1px solid var(--line);padding:clamp(22px,2.8vw,34px)}
@media (max-width:980px){.pricebar{grid-template-columns:1fr 1fr;
  align-items:start}.pricebar .pb-cta{grid-column:1/-1}}
@media (max-width:640px){.pricebar{grid-template-columns:1fr;gap:18px}}
.pricebar h3{margin:0}
.pb-sub{margin:4px 0 0;color:var(--ink-2)}
.pb-price .price{margin:0 0 8px}
.pb-note{margin:0;color:var(--ink-2);font-size:14.5px;max-width:46ch}
.pb-cta{justify-self:end}
@media (max-width:980px){.pb-cta{justify-self:start}}

/* Six items, four items and four items. Left as bare columns on a cream
   ground the two short ones trailed 220px of empty background and the block
   read as half-finished. As panels the same difference reads as three things
   of different size, which is what they are. */
.inclusions{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(30px,4vw,52px);align-items:stretch}
@media (max-width:900px){.inclusions{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.inclusions{grid-template-columns:1fr}}
.inc{background:var(--paper);padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line-2)}
.inc .subhead{margin-bottom:18px}
.inc .checks li{font-size:15px}

/* ---------- services index ---------- */
.offergrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px)}
@media (max-width:800px){.offergrid{grid-template-columns:1fr}}
.offer{text-decoration:none;display:flex;flex-direction:column;
  border:1px solid var(--line-2);
  background:var(--paper);transition:transform var(--t-mid) var(--ease),
  box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.offer:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(60,58,57,.08);
  border-color:var(--line)}
.offer .frame{border-bottom:1px solid var(--line-2)}
.offerbody{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;flex:1}
.offerprice{margin:0 0 6px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay-ink)}
.offer h3{margin:0 0 10px}
.offer p{color:var(--ink-2)}
.offer .more{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  margin-top:auto;padding-top:18px;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--char)}
.offer .more svg{width:13px;height:13px;transition:transform var(--t-mid) var(--ease)}
.offer:hover .more svg{transform:translateX(5px)}
.addons{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;background:var(--line-2);
  border:1px solid var(--line-2)}
.addons li{background:var(--paper);padding:20px 22px;display:grid;
  grid-template-columns:1fr auto;gap:4px 18px}
.addons b{font-weight:400;font-family:var(--display);font-size:19px;color:var(--char)}
.apx{font-family:var(--display);font-style:italic;font-size:21px;color:var(--clay-ink);
  grid-row:1/3}
.addons li>span:last-child{grid-column:1;color:var(--ink-2);font-size:15px}
.dmv{margin-top:10px;font-family:var(--display);font-style:italic;font-size:17px;
  color:var(--clay)}

/* ---------- category head-to-head ---------- */
.catcompare{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.catrow{background:var(--paper);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) auto;
  gap:10px clamp(16px,2.4vw,32px);align-items:center;padding:clamp(16px,2vw,22px)}
@media (max-width:760px){.catrow{grid-template-columns:1fr auto;gap:8px 14px}
  .catbars{grid-column:1/-1}}
.catname{margin:0;font-size:15.5px;color:var(--char)}
.catbars{display:grid;gap:7px;min-width:0}
.catbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:10px;position:relative}
.catbar .cb{display:block;height:12px;background:var(--clay);opacity:.55}
.catbar.new .cb{background:var(--clay-ink);opacity:1}
.catbar b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--char);
  min-width:1.6em;text-align:right}
.catbar em{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);min-width:5.2em}
.catbar.new em{color:var(--clay-ink)}
.catdelta{margin:0;font-family:var(--display);font-style:italic;font-size:20px;
  color:var(--clay-ink);min-width:2.4em;text-align:right}

/* ---------- botanical ornament, lifted from her own logo ---------- */
.orn{display:flex;justify-content:center;margin-inline:auto}
.orn img{width:100%;height:auto;display:block}
.orn-md{max-width:300px;margin-block:clamp(34px,4.4vw,58px)}
.orn-sm{max-width:200px;margin-block:clamp(20px,2.6vw,30px) 0}
.phead .orn-sm{margin-inline:0;justify-content:flex-start}
.orn.flip img{transform:scaleY(-1)}
@media (max-width:560px){.orn-md{max-width:220px}.orn-sm{max-width:160px}}