/* =====================================================================
   Aisle Handle It, the site.

   One stylesheet for every page. The planner is deliberately a single
   self-contained file — that is a build and hosting decision, not a
   product one. NOBODY DOWNLOADS THE HTML. The only file a couple ever
   receives is the PDF, printed from the planner. The site is the
   opposite shape: many small pages, edited often, and they should all
   change together when a colour changes.

   The palette is the waitlist page's, not the forest planner's. The
   planner wears six different skins; the site has to be one thing, and
   deep wine on ivory is the thing.
   ===================================================================== */

:root{
  --ink:#54202E;
  --ink-2:#6E3543;
  --muted:#8B5B67;
  --faint:#C8A8B0;

  --paper:#FDF8F5;
  --sand:#F6EAE7;
  --line:#EBDBD8;

  --acc:#9E4155;
  --acc-ink:#8A3346;
  --acc-lt:#E3AEB9;

  --btn:#D99AA8;
  --btn-hi:#E8B9C3;
  --btn-ink:#3A1620;

  --on-dark:#EBD5D8;
  --on-hi:#FCF1EF;
  --shadow:rgba(84,32,46,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:300;margin:0;letter-spacing:-.01em}
a{color:var(--acc-ink)}
/* height:auto matters more than it looks. These images carry width/height
   attributes so the layout does not jump while they load — but an explicit
   height overrides `aspect-ratio`, which is how the looks grid ended up
   rendering nine 1000px-tall paintings. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:980px;margin:0 auto;padding-left:44px;padding-right:44px}
.narrow{max-width:660px}

/* ---------------------------------------------------------------
   The wordmark. Letterspaced serif caps between two hairlines, the
   same mark the waitlist page uses. Not italic: it reads as a mark
   rather than as a line of text somebody typed.
   --------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand span{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  letter-spacing:.06em;white-space:nowrap;line-height:1.05
}
/* The hairlines belonged to the old mark. */
.brand i{display:none}
.brand.on-dark span{color:var(--on-hi)}
.brand.on-light span{color:var(--ink)}

/* The rings. Inlined rather than fetched, so the mark can never arrive
   late and shuffle the header about while somebody is reading it. */
.brand::before{
  content:"";display:block;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain
}
.brand.on-dark::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none' stroke='%23E3AEB9' stroke-width='1.9'%3E%3Ccircle cx='23' cy='22' r='13'/%3E%3Ccircle cx='37' cy='18' r='13'/%3E%3C/svg%3E")}
.brand.on-light::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none' stroke='%23B5697C' stroke-width='1.9'%3E%3Ccircle cx='23' cy='22' r='13'/%3E%3Ccircle cx='37' cy='18' r='13'/%3E%3C/svg%3E")}

/* Large: the rings sit above the name, centred. */
.brand.lg{flex-direction:column;gap:14px;max-width:430px;margin:0 auto 46px}
.brand.lg span{font-size:clamp(26px,4.4vw,38px);letter-spacing:.05em}
.brand.lg::before{width:56px;height:37px}

/* Small: the rings tuck in beside it, so the header stays one line. */
.brand.sm span{font-size:19px}
.brand.sm::before{width:30px;height:20px}

/* The lockup brings its own rings now. */
.hero .mark{display:none}

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:40;background:rgba(253,248,245,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)
}
.nav-in{
  max-width:980px;margin:0 auto;padding:14px 44px;
  display:flex;align-items:center;gap:26px
}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{
  color:var(--ink-2);text-decoration:none;font-size:13.5px;letter-spacing:.03em
}
.nav-links a:hover{color:var(--acc-ink)}
.nav-links a.here{color:var(--acc-ink)}
.nav .btn{padding:9px 17px;font-size:10.5px}
.nav.dark{background:var(--ink);border-bottom-color:rgba(255,255,255,.12)}
.nav.dark .nav-links a{color:var(--on-dark)}
.nav.dark .nav-links a:hover{color:#fff}

/* ---------------------------------------------------------------
   Buttons. Two only: the pink one, and a quiet outline.
   --------------------------------------------------------------- */
.btn{
  display:inline-block;border:none;border-radius:2px;cursor:pointer;
  background:var(--btn);color:var(--btn-ink);
  padding:15px 27px;font-family:'Karla',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  transition:.18s;white-space:nowrap;text-align:center
}
.btn:hover{background:var(--btn-hi)}
.btn:disabled{opacity:.6;cursor:default}
.btn.wide{width:100%}
.btn.ghost{
  background:none;border:1px solid var(--line);color:var(--ink-2)
}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc-ink);background:none}
.btn.dark{background:var(--ink);color:var(--on-hi)}
.btn.dark:hover{background:var(--ink-2)}
.reassure{font-size:12.5px;color:var(--muted);margin-top:13px}
.reassure.on-dark{color:var(--faint)}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{background:var(--ink);color:var(--on-hi);padding:76px 44px 96px;text-align:center}
.hero-in{max-width:640px;margin:0 auto}
.mark{display:block;margin:0 auto 26px}
.eyebrow{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--acc-lt);margin-bottom:40px
}
.hero h1{font-size:clamp(37px,6.4vw,58px);line-height:1.07;color:#fff}
.hero h1 em{font-style:italic;color:var(--acc-lt)}
.lede{
  max-width:520px;margin:26px auto 0;color:var(--on-dark);
  font-weight:300;font-size:17px;line-height:1.68
}
/* The line that carries the whole product, given room of its own rather
   than being the tail of a paragraph. Serif italic so it reads as a thing
   somebody said, not as another sentence of body copy. */
.line{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:clamp(18px,2.5vw,23px);line-height:1.45;
  color:var(--acc-lt);margin:26px auto 0;max-width:440px
}
.cta{margin-top:34px}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.badge{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);
  border:1px solid rgba(255,255,255,.20);border-radius:20px;padding:7px 15px
}

/* ---------------------------------------------------------------
   Sections. One rule for all of them so the rhythm never drifts.

   Was 120px, which let every idea take a whole viewport — fine when
   half the sections were images, far too airy once they are not.
   --------------------------------------------------------------- */
section{padding-top:86px}
@media (max-width:640px){ section{padding-top:60px} }
.kicker{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--acc-ink);text-align:center
}
h2{font-size:clamp(29px,4.6vw,41px);color:var(--ink);text-align:center;margin:14px 0 16px;line-height:1.14}
.sub{
  text-align:center;color:var(--muted);font-weight:300;max-width:560px;
  margin:0 auto 38px;font-size:16px;line-height:1.7
}
.sub + .sub{margin-top:-24px}
.rule{width:46px;height:2px;background:var(--acc);margin:0 auto 34px}

/* ---------------------------------------------------------------
   Cards
   --------------------------------------------------------------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:30px 28px 32px;box-shadow:0 1px 10px var(--shadow)
}
.card h3{font-size:21px;color:var(--ink);margin-bottom:11px;line-height:1.3}
.card p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.66}
.card p + p{margin-top:12px}

/* A worked example, set in mono so it reads as the product talking. */
.demo{
  margin-top:18px;background:var(--sand);border-radius:3px;padding:13px 15px;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ink);line-height:2
}
.demo .was{color:#7C525C;text-decoration:line-through}
.demo .now{color:var(--acc-ink);font-weight:700}

/* ---------------------------------------------------------------
   The screenshot slot. Sized to the real thing so nothing jumps
   when a picture goes in.
   --------------------------------------------------------------- */
.shot{
  border:1px solid var(--line);border-radius:4px;background:#fff;
  box-shadow:0 3px 22px var(--shadow);overflow:hidden
}

/* Keep the homepage recording within the text column. Its aspect ratio
   stays unchanged, and the frame shrinks with the column on small screens. */
.shot.wide{
  width:100%;
  max-width:100%;
  margin-left:0;
  transform:none
}
.shot-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:var(--sand);border-bottom:1px solid var(--line)
}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--faint);display:block}
.shot-bar span{
  margin-left:10px;font-size:11.5px;color:var(--muted);letter-spacing:.04em
}
/* The recording's pause button. F4, 7 October 2026.
   It lives in the frame's title bar rather than over the film: a control
   layered on the video would either cover the thing it is there to let you
   watch, or appear on hover only — and hover reaches neither a keyboard nor a
   touchscreen, which are exactly the people this is for.

   Built by site.js, not written here, so it cannot exist unless something is
   listening to it. margin-left:auto pushes it to the far end of the bar,
   where a window's own controls would sit. */
.shot-pause{
  margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:3px;padding:3px 10px;cursor:pointer;
  font-family:inherit;font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);line-height:1.6
}
.shot-pause:hover{color:var(--ink);border-color:var(--muted)}
.shot-pause:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* THE SLOT HOLDS A FILM, AND ONLY A FILM. Rewritten 6 October 2026.

   This was aspect-ratio:16/10 + flex centring + padding:24px, which mounted
   a screenshot inside a white border. With a 1.9:1 recording in it the video
   sat at the bottom of a tall white box — exactly what KT was looking at
   when she said "absolutely not".

   I first tried to fix that with a modifier class AND a :has() fallback in
   ONE rule:

       .shot-body.is-film,
       .shot-body:has(.shot-film){...}

   which was worse than either alone. A selector list is invalid as a WHOLE
   if any selector in it is unsupported, so on a browser without :has() the
   .is-film half was discarded too and nothing applied. Belt and braces,
   tied together, so one failing took the other down with it.

   So: no modifier, no :has(), no cleverness. The frame's only occupant is
   the recording, so the frame is simply styled for it. The height comes
   from .shot-film's own aspect-ratio below.

   welcome.html also uses .shot, but as <div class="shot"><img></div> with no
   .shot-body inside it, so none of this reaches it — checked before
   changing the base rule rather than after. */
.shot-body{display:block;padding:0;background:#000}
.shot-empty{
  text-align:center;color:var(--faint);font-size:13.5px;line-height:1.8;max-width:340px
}
.shot-empty b{display:block;color:var(--muted);font-weight:500;margin-bottom:4px}
.shot img{width:100%;display:block}

/* THE RECORDING IN THE SCREENSHOT FRAME. 6 October 2026.
   Sized exactly like .shot img so the frame does not change shape when the
   slot holds a video rather than a still. The 16/10 aspect-ratio on
   THE aspect-ratio IS NOT DECORATION. Without it, a <video> that has not
   loaded yet has no intrinsic size, so the browser gives it a default box
   and the page reflows when the film arrives. Stating 1280/676 — the
   recording's real dimensions — means the space is correct from the first
   paint and nothing jumps.

   I found this the awkward way: the preview panel I was checking the layout
   in cannot play video at all, so the element collapsed and I spent three
   rounds blaming the CSS for what was a limitation of the thing I was
   looking through. Stating the ratio makes the box right even where the
   film never loads, which is both the fix and the lesson. */
/* height:auto IS THE WHOLE FIX, and it took measuring to find.

   The <video> carries width="1280" height="676" so the box is the right
   shape before the file loads. But those are PRESENTATIONAL attributes: the
   height one applies as a literal 676px. With width:100% and no CSS height,
   the element rendered 460 wide by 676 TALL — a tall narrow box with the
   film sitting at the bottom of it and a great deal of nothing above.

   That is the white panel KT kept seeing. I blamed .shot-body's padding
   twice and its aspect-ratio once, and all three were innocent. I only
   found it by printing getBoundingClientRect() instead of looking at a
   picture and reasoning backwards — which is the whole lesson of this
   repository, applied to CSS for a change.

   height:auto lets the attributes do their real job (reserving the right
   shape via aspect-ratio) without dictating a pixel height. */
.shot-film{width:100%;height:auto;display:block;aspect-ratio:1280/676}



/* MOTION IS A PREFERENCE, NOT A DECISION WE GET TO MAKE.
   The autoplay attribute cannot be withdrawn in CSS, so site.js pauses the
   video and rewinds it to the poster frame when this preference is set. If
   the script does not run for any reason, this rule at least removes the
   loop's visual pull by showing the poster underneath a paused frame. The
   script is the real mechanism; this is the belt to its braces. */
@media (prefers-reduced-motion:reduce){
  .shot-film{animation:none;transition:none}
}
.caption{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}

/* ---------------------------------------------------------------
   Lists
   --------------------------------------------------------------- */
.list{max-width:640px;margin:0 auto;list-style:none;padding:0}
.list li{
  padding:19px 0 19px 30px;position:relative;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.65
}
.list li:last-child{border-bottom:none}
.list li::before{
  content:"";position:absolute;left:3px;top:28px;width:7px;height:7px;
  background:var(--acc);border-radius:50%
}
.list b{color:var(--ink);font-weight:700}

/* ---------------------------------------------------------------
   Themes
   --------------------------------------------------------------- */
.themes{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.theme{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  box-shadow:0 1px 10px var(--shadow);display:flex;flex-direction:column
}
.theme-top{height:104px;position:relative;display:flex;align-items:flex-end}
.theme-swatches{display:flex;width:100%;height:100%}
.theme-swatches i{flex:1;display:block}
.theme-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.theme h3{font-size:22px;color:var(--ink);margin-bottom:5px}
.theme .say{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:15px;
  color:var(--acc-ink);margin:0 0 12px
}
.theme p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65}
.theme .go{margin-top:18px}
.soon{
  border-style:dashed;box-shadow:none;background:none
}
.soon .theme-top{background:var(--sand)}
.soon h3{color:var(--muted)}

/* ---------------------------------------------------------------
   THE HOMEPAGE, section by section.

   Every one of these exists so that the page stops being
   "section → three white cards" six times in a row. The copy was
   already editorial; the layout was not.
   --------------------------------------------------------------- */

/* What it is: a compact index of the six parts. Categories, not chapters —
   the point is "there is a home for this", so it should read like the
   contents page of a book rather than a feature matrix.

   The first version boxed each one in a filled cell with borders on every
   side, six times. Even in the right colours that is a grid of boxes, and
   it fought the rest of the page. Hairlines only now: no fills, no borders
   except the rule above each line, nothing to look at but the words. */
.index6{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;gap:0 44px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
}
.index6 li{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 2px;border-top:1px solid var(--line)
}
.index6 b{
  flex:none;min-width:88px;
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:17px;color:var(--ink)
}
.index6 span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* The three connections, which are the actual product. Money, people and
   time — one piece of information each, entered once, showing up wherever it
   is needed afterwards.

   A definition list because that is what this is: a term and what follows
   from it. It also means the three lead-ins are marked up as the headings
   they read as, rather than as bold text that happens to look like one. */
.once{margin:0}
.once dt{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:19px;color:var(--ink);margin:0 0 5px
}
.once dd{
  margin:0 0 22px;font-size:15px;color:var(--ink-2);line-height:1.68
}
.once dd:last-child{margin-bottom:0}

/* Text one side, one screenshot the other. Deliberately not full
   width: it needs to say "this is a real thing", not carry the page. */
.beside{
  display:grid;gap:40px;align-items:center;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)
}
.beside .shot{margin:0;max-height:500px;overflow:hidden}
.beside p{font-size:15.5px;color:var(--ink-2);line-height:1.72;margin:0 0 15px}
.beside p:last-child{margin-bottom:0}
@media (max-width:760px){ .beside{grid-template-columns:1fr;gap:26px} }

/* Today, drawn rather than screenshotted — a real screenshot here was
   a third big image on a page that already had too many. */
.today-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 1px 10px var(--shadow);padding:6px 22px;max-width:420px
}
.t-row{
  display:flex;gap:13px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)
}
.t-row:last-child{border-bottom:none}
.t-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px}
.t-what{flex:1;font-size:14.5px;color:var(--ink);line-height:1.45}
.t-what small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.t-when{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);flex:none}

/* The venue examples: a flat strip, so they do not read as a third
   set of white cards straight after the budget's. */
.strip{border-top:1px solid var(--line)}
.strip > div{
  display:grid;gap:8px 34px;padding:24px 0;
  border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,240px) minmax(0,1fr)
}
.strip h3{font-size:19px;color:var(--ink);margin:0;line-height:1.3}
.strip p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.68}
.strip p + p{margin-top:8px}
@media (max-width:640px){ .strip > div{grid-template-columns:1fr;gap:6px} }

/* A closing line under a section, in the accent serif. Not a heading and not
   body copy — the thought the section leaves you with. */
.line-mid{
  text-align:center;max-width:560px;margin:34px auto 0;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:var(--acc-ink)
}

/* Looks on the homepage: three small landscape tiles, no prose. The
   full paintings and the aesthetic writing live on themes.html. */
/* Sized to match the look picker inside the app (.pick, 196px minimum with a
   62px band) rather than to fill the page. They were 200px tall and turned
   this section into a gallery you had to scroll past. */
.tiles3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tile3{
  display:block;text-decoration:none;color:inherit;
  border-radius:3px;overflow:hidden;box-shadow:0 2px 14px var(--shadow);
  position:relative;background:var(--sand)
}
.tile3 img{
  width:100%;height:138px;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.tile3:hover img{transform:scale(1.03)}
.tile3 .cap{
  position:absolute;inset:auto 0 0 0;padding:30px 15px 12px;
  background:linear-gradient(to top,rgba(30,22,18,.78),rgba(30,22,18,.22) 62%,transparent)
}
.tile3 .cap b{display:block;color:#fff;font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:17px;line-height:1.2}
.tile3 .cap span{display:block;color:#F3DEDF;font-family:'Fraunces',Georgia,serif;
  font-style:italic;font-size:12.5px;margin-top:2px}
@media (max-width:640px){ .tile3 img{height:150px} }
@media (prefers-reduced-motion:reduce){
  .tile3 img{transition:none}
  .tile3:hover img{transform:none}
}

/* Two columns of plain text. For ideas that need explaining once, not
   splitting into three feature cards. */
.two-col{
  display:grid;gap:20px 46px;max-width:800px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}
.two-col p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.72}
.two-col p b{color:var(--ink);font-weight:500}

/* One statement, said once, with two quiet labels under it. */
.statement{
  text-align:center;max-width:660px;margin:0 auto;
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(20px,2.9vw,27px);line-height:1.42;color:var(--ink)
}
.statement + .two-col{margin-top:34px;max-width:660px}

/* ---------------------------------------------------------------
   Themes, image-led. Used on themes.html.

   The first version of this section was four colour swatches and a
   paragraph, three times. The watercolours are the strongest thing
   on this site and the homepage was not showing a single one.

   So: one wide painting per look, stacked full width, and the
   palette demoted to four small dots underneath where it belongs —
   it is supporting information, not the headline.
   --------------------------------------------------------------- */
/* Three across, not one enormous painting after another. At full width this
   page was nine screens of scrolling and the palette dots — which are half
   the reason somebody is comparing looks — were always below the fold. */
.looks{
  display:grid;gap:34px 26px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))
}
.look{display:block;text-decoration:none;color:inherit}

.look-art{
  position:relative;border-radius:4px;overflow:hidden;
  box-shadow:0 3px 22px var(--shadow);background:var(--sand)
}
/* A fixed height rather than a ratio, so the row is the same shape whatever
   the column width does — and short enough that the palette dots and the
   description are on screen with the picture rather than below it. */
.look-art img{
  width:100%;height:186px;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)
}
@media (max-width:900px){ .look-art img{height:200px} }
.look:hover .look-art img{transform:scale(1.022)}

/* The name sits ON the painting, over a gradient that only darkens
   the bottom third — these are pale, and a full scrim would flatten
   them. */
.look-name{
  position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;
  background:linear-gradient(to top,rgba(30,22,18,.78),rgba(30,22,18,.3) 52%,transparent);
  color:#fff;pointer-events:none
}
.look-name h3{
  font-size:21px;color:#fff;line-height:1.16;margin:0
}
.look-name .say{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:13.5px;color:#F3DEDF;margin:3px 0 0
}

.look-under{
  display:block;margin-top:13px;padding:0 2px
}
.look-under p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.62}
.dots{display:flex;gap:6px;margin-top:11px}
.dots i{
  width:16px;height:16px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)
}
@media (max-width:640px){
  .looks{gap:26px}
  .look-name{padding:40px 16px 14px}
  .look-art img{height:210px}
}
@media (prefers-reduced-motion:reduce){
  .look-art img{transition:none}
  .look:hover .look-art img{transform:none}
}

/* ---------------------------------------------------------------
   Two columns with a painting on one side. Used by the photos
   section, where the words need something to sit beside.
   --------------------------------------------------------------- */
.split{
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)
}
.split img{border-radius:4px;box-shadow:0 3px 22px var(--shadow)}
.split .split-art{order:2}
.split h3{font-size:21px;color:var(--ink);margin:0 0 9px}
.split p{margin:0 0 15px;font-size:15px;color:var(--ink-2);line-height:1.7}
.split p:last-child{margin-bottom:0}
@media (max-width:760px){
  .split{grid-template-columns:1fr;gap:28px}
  .split .split-art{order:0}
}

/* One reassurance that should be there without being sold. Smaller and
   greyer than the copy above it, because "you do not have to think about
   this" is undercut by saying it loudly. */
.split p.quiet{font-size:13.5px;color:var(--muted);line-height:1.65}

/* Screenshots inside a split column need to fill it rather than sit at
   the .shot default width. */
.split .shot{margin:0}

/* A quiet aside. Not a warning box — it is reassurance, and it should
   not look like a problem. */
.aside{
  border-left:2px solid var(--acc-lt);padding:4px 0 4px 20px;
  margin-top:22px;font-size:14px;color:var(--muted);line-height:1.68
}
.aside b{color:var(--ink-2);font-weight:500}

/* ---------------------------------------------------------------
   Pricing. One plan, so no card-versus-card layout and no
   "Most Popular" badge on the only thing for sale.
   --------------------------------------------------------------- */
.price{
  max-width:720px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:4px;
  box-shadow:0 2px 18px var(--shadow);padding:44px 46px 40px
}
.price-top{text-align:center;margin-bottom:34px}
.price .fig{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(52px,8vw,72px);line-height:1;color:var(--ink)
}
.price .fig span{
  display:inline-block;font-size:16px;font-style:italic;
  color:var(--muted);margin-left:10px;vertical-align:middle
}
/* No struck-through price that nobody was ever charged. The number it is
   going to is stated forwards, which is true and does the same job. */
.price .then{
  margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.7
}
.price .two-col{gap:16px 40px}
@media (max-width:640px){ .price{padding:32px 24px 30px} }

.price-card{
  max-width:430px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:38px 34px;text-align:center;box-shadow:0 3px 20px var(--shadow)
}
.price-fig{
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:54px;
  color:var(--ink);line-height:1;margin:6px 0 4px
}
.price-fig small{font-size:16px;color:var(--muted);letter-spacing:.02em}
.price-note{font-size:13.5px;color:var(--muted);margin-bottom:26px}
.price-list{list-style:none;margin:0 0 28px;padding:0;text-align:left}
.price-list li{
  padding:10px 0 10px 26px;position:relative;font-size:14.5px;
  color:var(--ink-2);border-bottom:1px solid var(--line)
}
.price-list li:last-child{border-bottom:none}
.price-list li::before{
  content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;
  background:var(--acc);border-radius:50%
}

/* A block that is deliberately unfinished, so it cannot ship by accident. */
.todo{
  border:1px dashed var(--acc);background:var(--sand);border-radius:3px;
  padding:16px 18px;font-size:13.5px;color:var(--acc-ink);line-height:1.7;
  max-width:560px;margin:0 auto
}
.todo b{font-weight:700;letter-spacing:.02em}

/* ---------------------------------------------------------------
   Forms, on ivory. The waitlist page's fields sit on wine; these
   are the light-background pair.
   --------------------------------------------------------------- */
.panel{
  max-width:430px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:36px 34px;box-shadow:0 3px 20px var(--shadow)
}
.panel h1{font-size:31px;color:var(--ink);text-align:center;margin-bottom:8px}
.panel .say{
  text-align:center;color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 26px
}
.fld{margin-bottom:16px}
.fld label{
  display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px
}
.fld input{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:14px 15px;color:var(--ink);font-family:'Karla',sans-serif;font-size:15.5px;
  outline:none;transition:.18s
}
.fld input:focus{border-color:var(--acc);background:#fff}
.fld input::placeholder{color:var(--faint)}
.msg{margin-top:14px;font-size:14px;min-height:20px;text-align:center}
.msg.ok{color:var(--acc-ink)}
.msg.bad{color:#B03A2E}

/* ASK FOR BETA ACCESS — the form on the home page. Added 5 October 2026.
   .hp is the Netlify honeypot. It is moved off screen rather than hidden
   with display:none, because display:none is the one thing a careful bot
   checks before filling a field in. Width and height stay non-zero for the
   same reason. The markup carries aria-hidden and tabindex="-1" so this
   costs nothing to a screen reader or to the keyboard. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ask-row{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  max-width:520px;margin:0 auto
}
.ask-row .fld{flex:1;min-width:220px;margin-bottom:0}
/* .reassure carries no alignment of its own — elsewhere it inherits centring
   from a wrapper. Here it is a direct child of the section, so it says so. */
.ask-foot{text-align:center;line-height:1.9}
/* On a narrow screen the row wraps and the button should own its line
   rather than sit in a 90px stub beside nothing. */
@media (max-width:420px){
  .ask-row .btn{width:100%}
}
/* Agreeing to the terms. Unticked by default, because a box that
   arrives already ticked is not somebody agreeing to anything. */
.agree{
  display:flex;gap:9px;align-items:flex-start;margin:4px 0 18px;
  font-size:13px;color:var(--ink-2);line-height:1.6;cursor:pointer
}
.agree input{margin-top:3px;flex:none}
.agree a{color:var(--acc-ink);text-underline-offset:2px}

.swap{text-align:center;font-size:14px;color:var(--muted);margin-top:22px}
.swap button{
  background:none;border:none;padding:0;cursor:pointer;color:var(--acc-ink);
  font-family:'Karla',sans-serif;font-size:14px;text-decoration:underline;
  text-underline-offset:2px
}
.fineprint{
  font-size:11.5px;color:var(--muted);line-height:1.7;text-align:center;
  margin-top:22px
}
.fineprint a{color:var(--acc-ink);text-underline-offset:2px}

/* ---------------------------------------------------------------
   The walkthrough only. None of this ships.
   --------------------------------------------------------------- */
.devbar{
  position:sticky;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:10px 20px;background:#2C2C2A;color:#D3D1C7;
  font-size:12px;letter-spacing:.02em
}
.dv-tag{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--acc);color:#fff;border-radius:2px;padding:3px 8px
}
.dv-who b{color:#fff;font-weight:500}
.dv-btns{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.dv-btns button{
  background:none;border:1px solid #5F5E5A;border-radius:2px;color:#D3D1C7;
  font-family:'Karla',sans-serif;font-size:11px;padding:5px 10px;cursor:pointer
}
.dv-btns button:hover{border-color:#B4B2A9;color:#fff}
@media print{.devbar{display:none}}

/* A pretend email, shown on screen because there is no inbox. */
.letter{
  max-width:430px;margin:22px auto 0;border:1px solid var(--line);border-radius:3px;
  background:#fff;overflow:hidden;box-shadow:0 3px 20px var(--shadow)
}
.letter-top{
  padding:11px 18px;background:var(--sand);border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.letter-body{padding:24px 22px;text-align:center}
.letter-body p{margin:0 0 18px;font-size:14.5px;color:var(--ink-2);line-height:1.7}

/* ---------------------------------------------------------------
   Banners, for things the page needs to say before anything else
   --------------------------------------------------------------- */
.banner{
  padding:14px 20px;font-size:14px;line-height:1.6;text-align:center;
  border-bottom:1px solid var(--line);background:var(--sand);color:var(--ink-2)
}
.banner b{color:var(--ink)}
.banner a{color:var(--acc-ink)}
.banner.warm{background:#FAEEDA;border-bottom-color:#EF9F27;color:#633806}
.banner.warm b{color:#412402}
.banner.stop{background:var(--ink);color:var(--on-dark);border-bottom:none}
.banner.stop b{color:#fff}
.banner.stop a{color:var(--acc-lt)}

/* ---------------------------------------------------------------
   Picking a theme
   --------------------------------------------------------------- */
.pick{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-bottom:30px}
.pick label{cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick .opt{
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff;
  transition:.15s
}
.pick label:hover .opt{border-color:var(--acc-lt)}
.pick input:focus-visible + .opt{outline:2px solid var(--acc);outline-offset:2px}
.pick input:checked + .opt{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.pick .cols{display:flex;height:62px}
.pick .cols i{flex:1;display:block}
.pick .lab{padding:12px 14px 14px}
.pick .lab b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:17px;color:var(--ink)}
.pick .lab span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}

/* ---------------------------------------------------------------
   The signed-in hub
   --------------------------------------------------------------- */
.cover{
  background:var(--ink);color:var(--on-hi);text-align:center;padding:58px 44px 62px
}
.cover .names{
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(30px,5.4vw,46px);
  line-height:1.12;color:#fff;margin:0;letter-spacing:-.01em
}
.cover .when{color:var(--acc-lt);font-size:13.5px;letter-spacing:.06em;margin-top:12px}
.cover .count{
  font-family:'Fraunces',Georgia,serif;font-size:15px;font-style:italic;
  color:var(--on-dark);margin-top:6px
}
.tiles{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:24px 24px 26px;
  box-shadow:0 1px 10px var(--shadow);display:flex;flex-direction:column
}
.tile h3{font-size:19px;color:var(--ink);margin-bottom:8px}
.tile p{margin:0 0 16px;font-size:14px;color:var(--ink-2);line-height:1.65}
.tile .go{margin-top:auto}

/* ---------------------------------------------------------------
   Seats
   --------------------------------------------------------------- */
.seat{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap
}
.seat:last-of-type{border-bottom:none}
.seat .who{flex:1;min-width:150px;font-size:14.5px;color:var(--ink);word-break:break-word}
.seat .who small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.seat .money{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.seat .drop{
  background:none;border:none;cursor:pointer;color:var(--muted);font-size:12.5px;
  text-decoration:underline;text-underline-offset:2px;padding:0
}
.seat .drop:hover{color:var(--acc-ink)}
.seat-empty{padding:16px 0;color:var(--muted);font-style:italic;font-size:14px}

/* ---------------------------------------------------------------
   Long-form documents. The privacy policy and the terms are the two
   pages most companies make unreadable, which is a choice. These are
   set to be read: one column, generous line height, real headings.
   --------------------------------------------------------------- */
.doc{max-width:680px;margin:0 auto;padding:56px 26px 96px}
.doc h1{font-size:clamp(31px,5vw,42px);color:var(--ink);line-height:1.12;margin-bottom:10px}
.doc .stamp{font-size:12.5px;color:var(--muted);letter-spacing:.03em;margin-bottom:34px}
.doc h2{
  font-size:23px;text-align:left;color:var(--ink);
  margin:52px 0 12px;padding-top:26px;border-top:1px solid var(--line);line-height:1.25
}
.doc h2:first-of-type{border-top:none;padding-top:0}
.doc h3{font-size:17px;color:var(--ink);margin:26px 0 8px}
.doc p{margin:0 0 16px;color:var(--ink-2);line-height:1.8}
.doc ul{margin:0 0 18px;padding-left:20px;color:var(--ink-2)}
.doc li{margin-bottom:9px;line-height:1.75}
.doc b,.doc strong{color:var(--ink);font-weight:700}
.doc a{color:var(--acc-ink);text-underline-offset:2px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.doc th{
  text-align:left;font-family:'Karla',sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:9px 12px 9px 0;border-bottom:1px solid var(--line)
}
.doc td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.doc tr:last-child td{border-bottom:none}

/* The plain-English summary that sits above every one of these. */
.gist{
  background:var(--sand);border-radius:3px;padding:24px 26px;margin:0 0 40px
}
.gist h2{
  border:none;padding:0;margin:0 0 10px;font-size:19px
}
.gist p{margin:0 0 12px;color:var(--ink-2)}
.gist p:last-child{margin:0}

/* Anything still to be settled, marked so it cannot ship unnoticed. */
.blank{
  background:var(--sand);border-bottom:1px dashed var(--acc);color:var(--acc-ink);
  padding:1px 5px;font-weight:700;white-space:nowrap
}
.warn{
  border:1px dashed var(--acc);background:var(--sand);border-radius:3px;
  padding:18px 20px;margin:0 0 36px;font-size:14px;color:var(--acc-ink);line-height:1.75
}
.warn b{color:var(--acc-ink)}

/* ---------------------------------------------------------------
   Closing band and footer
   --------------------------------------------------------------- */
.closing{
  background:var(--ink);color:var(--on-dark);text-align:center;
  padding:92px 44px;margin-top:120px
}
.closing h2{color:#fff}
.closing .sub{color:var(--on-dark);margin-bottom:32px}
footer{text-align:center;padding:46px 44px 62px;color:var(--muted);font-size:13px;line-height:1.9}
footer .sign{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:20px;
  color:var(--acc-ink);display:block;margin-bottom:12px
}
.foot-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:13px}
.foot-links a:hover{color:var(--acc-ink)}

/* The line that says who owns this. KT, 8 September: "can we add a Copyright
   symbol for For The Plot, then All rights Reserved."

   NO YEAR, deliberately. A hardcoded "2026" is wrong every January and
   nobody remembers to change it across nine pages; a scripted one is a
   date calculation in a footer. Neither buys anything — the notice is what
   carries weight, not the year beside it. */
.legal{
  margin:12px 0 0;font-size:12px;color:var(--faint);letter-spacing:.03em
}

/* ---------------------------------------------------------------
   Narrow screens. Not the full mobile pass, which is parked, but
   enough that nothing here breaks on a phone.
   --------------------------------------------------------------- */
@media(max-width:720px){
  .wrap{padding-left:26px;padding-right:26px}
  .nav-in{padding:12px 26px;gap:14px}
  .nav-links{gap:14px}
  .nav-links a.hide-sm{display:none}
  .hero{padding:52px 26px 76px}
  section{padding-top:84px}
  .closing{padding:68px 26px;margin-top:84px}
  .panel,.price-card{padding:30px 24px}
  .cta .btn{width:100%}
}