/* ════════════════════════════════════════════════════════════════════
   JUST LANDED KIT: design system
   Ported from Fieldnotes. Tokens, components, spacing and motion are
   carried over verbatim. The palette is neutral by design: cream paper,
   ink black, grey. No hue anywhere. Fieldnotes' blue accent (#1457CC) is
   retired rather than replaced, which is close to how Fieldnotes actually
   reads in practice, since all ten of its folders render black.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* Backgrounds */
  --bg-cream:#FFFEFB; --bg-default:#FFFFFF; --bg-light:#F4F3F1;
  --bg-muted:#F7F7F7; --bg-dark:#100F11;
  /* Text */
  --text-primary:#100F11; --text-dark:#262626; --text-secondary:#5D5D5D;
  --text-muted:#B4B4B4; --text-cream:#FBFAF7; --text-inverse:#FFFFFF;
  /* Brand: neutral. Ink for accents and actions, a soft grey wash for
     highlight surfaces. No hue anywhere. */
  --brand-primary:#100F11; --brand-primary-dark:#000000;
  --accent-wash:#F2F1EE;
  /* CTA hover: warm yellow-orange, dark ink text for contrast. */
  --cta-hover:#F5A93B; --cta-hover-dark:#E89419;
  /* Borders */
  --border-light:#D3D3D3; --border-default:#E0E0E0; --border-faint:#F3F3F3;
  /* Radii */
  --r-sm:4px; --r-md:10px; --r-lg:14px; --r-card:16px; --r-chip:44.673px; --r-pill:50px;
  /* Elevation */
  --shadow-card:0px 1px 10.4px 0px rgba(0,0,0,0.12);
  /* Fonts */
  --font-sans:'Work Sans','system-ui',sans-serif;
  --font-kanit:'Kanit',sans-serif;
  --font-inter:'Inter',sans-serif;

  /* TYPE SCALE. Seven steps, down from twenty ad-hoc sizes.
     Every heading and every paragraph on the site resolves to one of these. */
  --fs-display:clamp(44px, 6vw, 72px);  /* page hero h1            */
  --fs-h1:40px;                         /* folder-page title       */
  --fs-h2:32px;                         /* section heading         */
  --fs-h3:22px;                         /* sub-section heading     */
  --fs-h4:20px;                         /* card title              */
  --fs-body:16px;                       /* UI body, lists, forms   */
  --fs-prose:18px;                      /* long-form reading copy   */
  --fs-small:14px;                      /* secondary / meta        */
  --fs-micro:12px;                      /* eyebrows, captions      */
  --lh-body:1.75;
  --lh-tight:1.15;

  /* SPACING SCALE */
  --space-section:96px;   /* between major sections   */
  --space-block:40px;     /* between blocks in one    */
  --space-para:20px;      /* between paragraphs       */

  /* nav: pill and CTA share one height so they read as a single bar */
  --nav-h:52px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{ scroll-behavior:smooth; }

body{
  background:var(--bg-cream); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.5;
  letter-spacing:-0.16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* PAPER GRAIN: fixed full-bleed overlay */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.07  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode:multiply; opacity:0.05;
}

/* Eyebrow / small-caps: the dominant labeling motif */
.eyebrow{
  font-family:var(--font-sans); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--brand-primary);
}

.page-wrap{ position:relative; z-index:2; }
.section-rule{ height:1px; background:var(--border-faint); max-width:1180px; margin:0 auto; }

/* ════════════════════════════════════════════════════════════════════
   FLOATING PILL NAV
   Styled in Fieldnotes but never rendered there. Activated here.
   ════════════════════════════════════════════════════════════════════ */
.topnav{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:center;
  padding:18px 0; pointer-events:none;
}
/* Once the page scrolls, the bar gets a solid cream backing and a hairline,
   so copy passing underneath doesn't show through the gap between the pill
   and the CTA. Sits behind both via z-index, and is purely opacity-driven so
   nothing reflows when it turns on. */
.topnav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bg-cream);
  border-bottom:1px solid var(--border-faint);
  opacity:0; transition:opacity .28s ease;
  pointer-events:none;
}
.topnav.is-stuck::before{ opacity:1; }
/* Sits on the same 1300px rail as .home-body and the footer, so once split the
   wordmark lines up with the section headings and the CTA with the right margin.
   The group itself stays click-through; only the pill and the CTA take pointer
   events, since the bar spans the full width.

   Two states: at the top of the page the pill and CTA sit CENTERED as a floating
   pair; on scroll they glide apart to the rail edges. Layout is always
   space-between, and the centered state is produced by translating each half
   inward by --nav-split (measured in site.js). Doing it with transforms rather
   than switching justify-content is what makes it glide instead of snap. */
.topnav-group{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1300px; padding:0 40px; gap:16px;
  pointer-events:none;
  --nav-split:0px;
  --nav-ease:transform .5s cubic-bezier(.16,1,.3,1);
}
/* The pill's original padding was sized around a 34px circular logo mark.
   With the mark gone it's wordmark-plus-links, so the whole thing gets more
   air: roomier pill, a hairline between the wordmark and the links, and
   wider link targets. */
.nav-pill{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-cream); border:1px solid var(--border-light);
  border-radius:var(--r-pill); box-shadow:var(--shadow-card);
  min-height:var(--nav-h); padding:0 16px 0 24px;
  pointer-events:auto;
  transform:translateX(var(--nav-split));
  transition:var(--nav-ease);
}
.topnav.is-stuck .nav-pill{ transform:translateX(0); }
.nav-brand{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:inherit;
  padding-right:14px; border-right:1px solid var(--border-faint);
}
.nav-wordmark{
  display:block; height:34px; width:auto;
}
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-small); letter-spacing:-0.14px;
  color:var(--text-dark); text-decoration:none;
  padding:8px 16px; border-radius:var(--r-pill);
  transition:background .3s ease, color .3s ease;
}
.nav-link:hover{ background:var(--bg-muted); color:var(--brand-primary); }
.nav-link.is-current{ color:var(--brand-primary); background:var(--accent-wash); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small); letter-spacing:-0.14px;
  color:var(--text-inverse); text-decoration:none;
  background:linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 55%, #3a3a3a 100%);
  border:1px solid #0a0a0a;
  border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.18);
  min-height:var(--nav-h); padding:0 24px;
  pointer-events:auto;
  transform:translateX(calc(-1 * var(--nav-split)));
  transition:border-color .3s ease, color .3s ease, var(--nav-ease);
}
.topnav.is-stuck .nav-cta{ transform:translateX(0); }
.nav-cta .arrow{ color:var(--text-inverse); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.nav-cta:hover{
  box-shadow:0 2px 4px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.22);
  background:linear-gradient(145deg, var(--cta-hover-dark) 0%, var(--cta-hover) 60%, #F8BC5E 100%);
  border-color:var(--cta-hover-dark);
  color:var(--brand-primary);
}
.nav-cta:hover .arrow{ color:var(--brand-primary); }
/* hover lift composes with whichever split offset is active */
.nav-cta:hover{ transform:translateX(calc(-1 * var(--nav-split))) translateY(-1px); }
.topnav.is-stuck .nav-cta:hover{ transform:translateY(-1px); }
.nav-cta:hover .arrow{ transform:translateX(3px); }

/* ── Footer ───────────────────────────────────────────────────────── */
/* Bottom banner: a quiet, centered send-off above the footer. */
.footer-banner{
  position:relative; z-index:2;
  /* Watercolor-gingham picnic blanket: two crossed sets of translucent
     blue stripes over white; where they overlap the blue deepens. */
  background:
    repeating-linear-gradient(0deg,  rgba(244,211,94,.5) 0 44px, transparent 44px 100px),
    repeating-linear-gradient(90deg, rgba(244,211,94,.5) 0 44px, transparent 44px 100px),
    #fff;
  border-radius:22px;
  max-width:1300px; margin:0 auto; padding:80px 40px;
  text-align:center;
}
.banner-card{
  display:inline-block;
  background:#FDFCF9;
  border-radius:18px;
  padding:40px 56px;
  box-shadow:0 10px 30px rgba(30,30,30,.12);
}
.footer-banner h2{
  font-family:var(--font-kanit); font-weight:600;
  font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:-0.5px;
}
.footer-banner p{
  margin-top:12px; font-size:var(--fs-prose); color:var(--text-secondary);
}
.footer-banner .btn-primary{ margin-top:28px; }

.site-footer{
  position:relative; z-index:2;
  border-top:1px solid var(--border-faint);
  max-width:1300px; margin:0 auto; padding:64px 40px 80px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.footer-brand{ display:flex; flex-direction:column; gap:6px; }
.footer-mark{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.footer-mark .nav-wordmark{ height:42px; }
.footer-tagline{ font-size:var(--fs-small); font-style:italic; color:var(--text-secondary); }

/* Footer flight: a yellow line-drawn plane crossing the footer with puffs of
   air trailing behind it. The plane and the trail share one 9s cycle, and the
   puffs are offset so they read as being left behind rather than led. */
.footer-flight{
  position:relative; display:block;
  width:210px; height:30px; margin-top:12px;
  color:var(--cta-hover);
  overflow:hidden;
}
.footer-flight .ff-plane{
  position:absolute; top:4px; left:0;
  width:34px; height:auto;
  animation:ff-fly 9s cubic-bezier(.42,0,.58,1) infinite;
}
.footer-flight .ff-trail{ position:absolute; top:12px; left:0; }
.footer-flight .ff-trail i{
  position:absolute; top:0; left:0;
  width:5px; height:5px; border-radius:50%;
  border:1.4px solid var(--cta-hover);
  opacity:0;
  animation:ff-puff 9s cubic-bezier(.42,0,.58,1) infinite;
}
.footer-flight .ff-trail i:nth-child(1){ animation-delay:-.28s; }
.footer-flight .ff-trail i:nth-child(2){ animation-delay:-.56s; }
.footer-flight .ff-trail i:nth-child(3){ animation-delay:-.84s; }

@keyframes ff-fly{
  0%        { transform:translateX(-40px) translateY(4px) rotate(-3deg); }
  45%       { transform:translateX(90px)  translateY(-3px) rotate(2deg); }
  100%      { transform:translateX(220px) translateY(2px) rotate(-2deg); }
}
@keyframes ff-puff{
  0%        { transform:translateX(-34px) translateY(4px) scale(.6); opacity:0; }
  12%       { opacity:.75; }
  45%       { transform:translateX(96px) translateY(-3px) scale(1); }
  100%      { transform:translateX(226px) translateY(2px) scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .footer-flight .ff-plane{ animation:none; transform:translateX(4px); }
  .footer-flight .ff-trail{ display:none; }
}
.footer-nav{ display:flex; flex-direction:column; gap:8px; }
.footer-nav a{
  font-size:var(--fs-small); color:var(--text-secondary); text-decoration:none;
  transition:color .25s ease;
}
.footer-nav a:hover{ color:var(--brand-primary); }
.footer-link{ color:var(--brand-primary); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:opacity .15s ease; }
.footer-link:hover{ opacity:.7; }

/* ════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ════════════════════════════════════════════════════════════════════ */

.btn-primary{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body); letter-spacing:-0.15px;
  color:var(--text-inverse); background:var(--brand-primary);
  border:none; padding:13px 26px; border-radius:var(--r-pill); cursor:pointer;
  text-decoration:none;
  transition:background .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover{ background:var(--cta-hover); color:var(--brand-primary); transform:translateY(-1px); }
.btn-primary .arrow{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn-primary:hover .arrow{ transform:translateX(3px); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-small); letter-spacing:-0.14px;
  color:var(--text-secondary); background:transparent; text-decoration:none;
  border:1px solid var(--border-light); padding:11px 22px; border-radius:var(--r-pill); cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.btn-ghost:hover{ border-color:var(--cta-hover-dark); color:var(--brand-primary); background:#FDF3E0; }

/* Stroke / outline button: hairline accent border, fill on hover. */
.btn-stroke{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small); letter-spacing:-0.12px;
  color:var(--brand-primary); background:transparent;
  border:1px solid var(--brand-primary); padding:8px 16px; border-radius:var(--r-pill); cursor:pointer;
  white-space:nowrap; flex:none; text-decoration:none;
  transition:background .3s ease, color .3s ease;
}
.btn-stroke:hover{ background:var(--cta-hover); color:var(--brand-primary); border-color:var(--cta-hover-dark); }
.btn-stroke:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }
.btn-stroke.is-soon{
  color:var(--text-muted); border-color:var(--border-light); border-style:dashed;
  cursor:default; pointer-events:none;
}

/* Chips */
.tag-chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-small); letter-spacing:-0.13px;
  background:var(--bg-muted); border:1px solid var(--border-faint);
  border-radius:var(--r-chip); padding:8px 18px; color:var(--text-dark);
}
.tag-chip .chip-label{ color:var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; font-size:var(--fs-micro); font-weight:600; }
.tag-chip .chip-value{ font-weight:600; color:var(--text-primary); }

/* ════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  text-align:center;
  padding:72px 24px 32px;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 40% at 82% 8%, rgba(16,15,17,0.05) 0%, rgba(16,15,17,0) 60%),
    radial-gradient(60% 50% at 50% 0%, rgba(16,15,17,0.035) 0%, rgba(16,15,17,0) 55%);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 160px 10px rgba(16,15,17,0.045);
}
.hero > *{ position:relative; z-index:1; }

.hero-headline{
  font-family:var(--font-kanit); font-weight:600;
  font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:-0.6px;
  max-width:960px; margin:0 auto;
  color:var(--text-primary);
  text-align:center; text-wrap:balance;
}
.hero-sub{
  /* The tagline carries an explicit <br>, so the measure only has to be wide
     enough that neither of the two lines wraps again on its own. */
  display:block; margin:var(--space-para) auto 0; max-width:720px;
  /* It's an <em>, so the italic has to be turned off explicitly. */
  font-family:var(--font-sans); font-style:normal; font-weight:400;
  font-size:var(--fs-h4); color:var(--text-secondary); letter-spacing:-0.2px;
}
.hero-body{
  margin:24px auto 0; max-width:620px;
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary);
}

.hero-ctas{ display:flex; gap:14px; justify-content:center; align-items:center; margin:40px auto 0; }
.hero-cta{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--nav-h); padding:0 24px; border-radius:var(--r-pill);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small); letter-spacing:-0.14px;
  text-decoration:none; position:relative; overflow:hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
.cta-primary{
  background: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 55%, #3a3a3a 100%);
  color: var(--text-inverse);
  border: 1px solid #0a0a0a;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.18);
}
.cta-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.22), 0 12px 32px rgba(0,0,0,.22);
  background:linear-gradient(145deg, var(--cta-hover-dark) 0%, var(--cta-hover) 60%, #F8BC5E 100%);
  border-color:var(--cta-hover-dark);
  color:var(--brand-primary);
}
.cta-shine{
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events:none; opacity:0;
}
.cta-primary:hover .cta-shine{ animation: cta-shine-sweep .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes cta-shine-sweep{
  0%{ left:-60%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:120%; opacity:0; }
}
.cta-secondary{
  background: var(--bg-default); color: var(--text-primary);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-card);
}
.cta-secondary:hover{ transform: translateY(-1px); border-color: var(--cta-hover-dark); background:#FDF3E0; }
.cta-arrow{ flex:none; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hero-cta:hover .cta-arrow{ transform: translateX(3px); }

/* ── Hero doodles ──────────────────────────────────────────────────────
   Small citrus-and-sparkle spot art scattered around the hero, picking up
   the mimosa theme in a faded pastel lemon. Purely decorative: the layer is
   aria-hidden, pointer-events:none, and sits at z-index 0 so it never
   intercepts the headline or the buttons.

   Positions are percentages of the hero box, so they hold as it reflows.
   Each drifts on its own duration and delay so they never move in lockstep. */
.hero-doodles{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hero .hero-doodles{ z-index:0; }
.hero-doodle{
  position:absolute;
  color:#EBD483;                 /* faded pastel lemon */
  will-change:transform;
  animation:doodle-float 7s ease-in-out infinite;
}
.hero-doodle svg{ display:block; width:100%; height:auto; }

/* Home. Offsets are px from the top of the hero rather than percentages,
   because this hero also contains the marquee: a percentage puts the lower
   doodles behind the photographs.
   Left: lemon then bubbles. Right: bubbles then lemon. */
.hero-doodle.d1{ left:22%; top:80px;  width:36px; opacity:.9;  animation-duration:6.2s; animation-delay:-1.2s; }
.hero-doodle.d2{ left:79%; top:45px;  width:30px; opacity:.55; animation-duration:5.4s; animation-delay:-3.4s; }
.hero-doodle.d3{ left:9%;  top:210px; width:28px; opacity:.72; animation-duration:7.1s; animation-delay:-0.6s; }
.hero-doodle.d4{ left:74%; top:235px; width:42px; opacity:.45; animation-duration:6.7s; animation-delay:-2.5s; }

/* The other heroes hold only a headline and a line or two, and carry no
   marquee, so percentages are safe there and keep the pair centred on the
   headline whatever its height. */
.hero-doodles.is-compact .hero-doodle.c1{ left:16%; top:34%; width:36px; opacity:.85; animation-duration:6.4s; animation-delay:-1.1s; }
.hero-doodles.is-compact .hero-doodle.c2{ left:80%; top:26%; width:30px; opacity:.55; animation-duration:5.8s; animation-delay:-3.1s; }

@keyframes doodle-float{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  33%    { transform:translate(6px,-16px) rotate(9deg); }
  66%    { transform:translate(-5px,-8px) rotate(-6deg); }
}

/* Crowded at tablet width and below: the hero text needs the room. */
@media (max-width:900px){
  .hero-doodles{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-doodle{ animation:none; }
}

/* ── Hero photo marquee ───────────────────────────────────────────────
   An edge-to-edge stream of prints drifting right to left. Pure CSS:
   the track holds four identical .hm-set copies and slides by exactly
   one set width (25%) before wrapping, so the loop stays seamless as
   long as every set stays identical. Hover pauses the drift. Clicking
   a print opens the lightbox: site.js already listens for clicks on
   any .df-photo.has-photo, so the marquee needs no JS of its own. */
.hero-marquee{
  margin:64px -24px 0; overflow:hidden;
  padding:16px 0 8px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee-track{
  display:flex; width:max-content;
  animation:marquee-roll 48s linear infinite;
}
.hero-marquee:hover .hero-marquee-track{ animation-play-state:paused; }
.hm-set{ display:flex; align-items:center; }
.hm-print{
  width:442px; flex:0 0 auto; margin-right:14px;
  background:#FFFEFB; border-radius:22px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  padding:6px;
  transition:transform .3s ease;
}
/* straight, no tilt: a clean row of prints rather than a scattered table */
.hm-print{ transform:none; }
.hm-print:hover{ transform:translateY(-8px); }
.hm-print .df-photo{
  aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:16px; cursor:zoom-in;
}
/* Percentage transforms resolve against the track's own width, so the
   slide distance stays exactly one set even if print sizes change. */
@keyframes marquee-roll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-25%); }
}

/* ── Soft fade-in on scroll (the site's only entrance motion) ──────────
   Scoped to .js so the content is VISIBLE by default. Without this gate a
   slow, stale or blocked site.js leaves the whole page body at opacity:0. */
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
  .nav-pill, .nav-cta{ transition:none; }
  .folder .f-doc{ transition:none; }
  .folder:hover .f-doc-l,
  .folder:hover .f-doc-c,
  .folder:hover .f-doc-r{ transform:none; }
  .hero-marquee-track{ animation:none; }
  .hm-print{ transition:none; }
  .cta-primary:hover .cta-shine{ animation:none; opacity:0; }
  .lightbox{transition:opacity 0s;}
  .lightbox-img{transition:transform 0s;transform:none;}
}

/* ════════════════════════════════════════════════════════════════════
   PAGE BODY + SECTION RHYTHM
   ════════════════════════════════════════════════════════════════════ */
.home-body{ position:relative; z-index:2; max-width:1300px; margin:0 auto; padding:0 40px 120px; }
.home-section{ padding-top:var(--space-section); }
.home-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:var(--space-block); flex-wrap:wrap; }
.home-section-head .hs-eyebrow{ display:block; margin-bottom:10px; }
.home-section-head h3{ font-family:var(--font-kanit); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:-0.5px; }
.home-section-head .arc-note{ font-size:var(--fs-small); color:var(--text-secondary); }

/* prose column: short measure, so it reads like a note not an essay */
.prose{ max-width:660px; }
.prose p{ color:var(--text-secondary); font-size:var(--fs-prose); line-height:var(--lh-body); }
.prose p + p{ margin-top:var(--space-para); }
.prose p strong{ color:var(--text-primary); font-weight:600; }
.prose em{ font-style:italic; }

/* Centred variant: heading, copy and pull quote stack down the middle of the
   rail instead of splitting into two columns. */
.home-section.is-centered{ text-align:center; }
.home-section.is-centered .home-section-head{ justify-content:center; }
.section-stack{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-block);
}
.section-stack .prose{ max-width:720px; margin:0 auto; }
.section-stack .pullquote{ margin:0 auto; }

/* Prose on the left of the reading rail, pull quote parked on the right. */
.section-split{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:64px;
}
.section-split .prose{ flex:1 1 620px; }
.section-split .pullquote{ flex:0 0 320px; margin:0; }

/* Chat bubble, after the green reference card: a bright-green panel holding
   a darker-green bubble whose tail flicks up off the top-right corner, a
   yellow bolt breaking the bubble's top edge, and a winking-eye pill
   tucked under the bubble's bottom edge. */
.pullquote{
  position:relative;
  margin:var(--space-block) 0 0; padding:44px 32px 40px;
  background:
    repeating-linear-gradient(0deg,  rgba(244,211,94,.5) 0 32px, transparent 32px 72px),
    repeating-linear-gradient(90deg, rgba(244,211,94,.5) 0 32px, transparent 32px 72px),
    #fff;
  border-radius:22px;
  max-width:600px;
  text-align:center;
}
.pullquote-bubble{
  position:relative;
  background:#fff;
  border-radius:26px;
  padding:36px 28px 32px;
}
/* Tail: flicks up and out from the bubble's top-right shoulder. */
.pullquote-bubble::before{
  content:''; position:absolute; top:-16px; right:26px;
  width:0; height:0;
  border:16px solid transparent;
  border-top:0;
  border-bottom-color:#fff;
  transform:skewX(28deg);
}
.pullquote-bolt{
  position:absolute; top:-26px; left:26%;
  width:34px; height:auto;
  transform:rotate(-8deg);
}
.pullquote p{
  font-family:var(--font-kanit); font-weight:600; font-style:normal;
  font-size:var(--fs-h3); line-height:1.4; color:#1E1E1E; letter-spacing:-0.3px;
}
.pullquote cite{
  display:block; margin-top:14px; font-style:normal;
  font-family:var(--font-inter); font-size:var(--fs-micro); letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(30,30,30,0.75);
}

/* ════════════════════════════════════════════════════════════════════
   FOLDER CARD
   The folder graphic is Fieldnotes' own Figma export, copied verbatim to
   assets/folder.svg and referenced as an <img> so its internal filter and
   gradient IDs stay scoped to the file and can't collide across the twelve
   cards on a page. Nothing about the artwork is redrawn here.
   ════════════════════════════════════════════════════════════════════ */
/* Columns are exactly folder-width and the row is space-between, so the first
   folder's left edge lands on the content rail (aligned with the section
   heading) and the last folder's right edge lands on the opposite margin.
   The slack becomes generous, even gaps rather than uneven padding inside
   each column, which is what keeps the row from looking off-centre. */
/* Columns are capped at folder width and the track count comes from auto-fit,
   so the row reflows from 3 to 2 to 1 on its own. justify-content:center keeps
   whatever fits centred on the rail instead of space-between flinging two
   folders to opposite margins, and the gap scales with the viewport. */
.class-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 264px));
  justify-content:center;
  gap:clamp(56px, 6vw, 96px) clamp(56px, 7.5vw, 116px);
  max-width:calc(264px * 3 + 116px * 2);
  margin:0 auto;
}
/* Two-up variant (The Kit): cap the track width so the pair reads as a
   pair instead of drifting to opposite edges of a 1300px body. */
.folder{
  position:relative; display:block;
  /* 20% down from 330px. The artwork is an SVG scaled by width, so the bloom
     translations (in viewBox units) shrink with it and need no retuning. */
  width:100%; max-width:264px;
  text-decoration:none; color:inherit;
  transition:transform .25s ease;
}
.folder:hover{ transform:translateY(-4px); transform-origin:center; }

.folder .folder-icon{
  position:relative; width:100%;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.10));
  transition:filter .4s cubic-bezier(.16,1,.3,1);
}
.folder:hover .folder-icon{ filter:drop-shadow(0 14px 32px rgba(0,0,0,0.18)); }
.folder .folder-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* ── Blooming folder ──────────────────────────────────────────────────
   The artwork holds three document sheets fanned inside the folder. On
   hover they spread: the left sheet swings out left, the right sheet out
   right, and the middle one rises highest between them, emerging from
   behind the front panel.

   transform-box:fill-box puts the origin on each sheet's own bounding box
   rather than the SVG root, and 50%/100% pivots from the bottom edge,
   which is buried in the folder. So they hinge outward instead of sliding.
   Translations are in viewBox units (~1:1 with px at the rendered size). */
.folder .f-doc{
  transform-box:fill-box;
  transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.34,1.32,.5,1);
  will-change:transform;
}
.folder:hover .f-doc-l,
.folder:focus-visible .f-doc-l{ transform:translate(-26px,-9px) rotate(-7deg); }
.folder:hover .f-doc-c,
.folder:focus-visible .f-doc-c{ transform:translate(-1px,-24px) rotate(-1deg); }
.folder:hover .f-doc-r,
.folder:focus-visible .f-doc-r{ transform:translate(24px,-7px) rotate(6deg); }

/* Hover tint: the folder body turns yellow-orange while the sheets stay
   paper-white. The two body panels carry Figma gradient fills (paint0 is
   the back panel, paint1 the front); a CSS `fill` beats the presentation
   attribute, so overriding those two keeps the bloom animation untouched.
   Two shades rather than one flat colour, so the folder keeps its depth. */
.folder .folder-svg path[fill*="paint0"],
.folder .folder-svg path[fill*="paint1"]{
  transition:fill .35s cubic-bezier(.16,1,.3,1);
}
.folder:hover .folder-svg path[fill*="paint0"],
.folder:focus-visible .folder-svg path[fill*="paint0"]{ fill:var(--cta-hover-dark); }
.folder:hover .folder-svg path[fill*="paint1"],
.folder:focus-visible .folder-svg path[fill*="paint1"]{ fill:var(--cta-hover); }

/* the sheets lift clear of the folder, so the hovered card needs to sit above
   its neighbours or a lower row's artwork can cross over the rising sheets */
.folder:hover, .folder:focus-visible{ z-index:2; }
.class-grid > .folder{ position:relative; z-index:1; }

/* Line illustration on the folder face. Positioned against the front
   panel, which the artwork draws from roughly 36% to 100% of the height.
   Swap the inline SVG; keep stroke="currentColor". */
.folder .f-art{
  position:absolute; left:12%; top:57%; z-index:2;
  width:15%; color:rgba(255,255,255,0.92); pointer-events:none;
}
.folder .f-art svg{ display:block; width:100%; height:auto; }

/* TEXT ROW below the folder: name left, folder number right. Same shape as
   Fieldnotes' name/date row, with the blurb dropped underneath. */
.folder .f-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:20px;
  font-family:var(--font-inter); font-size:var(--fs-h4); letter-spacing:-0.4px;
}
.folder .f-kind{ font-weight:600; color:var(--text-primary); }
.folder .f-num{ font-weight:500; color:var(--text-primary); white-space:nowrap; }
.folder .f-desc{
  display:block; margin-top:8px;
  font-family:var(--font-sans); font-size:var(--fs-small); line-height:1.5;
  font-weight:400; color:var(--text-secondary); letter-spacing:-0.14px;
}

/* ════════════════════════════════════════════════════════════════════
   DETAIL PAGES: sticky mini-rail + content pane
   ════════════════════════════════════════════════════════════════════ */
.entry-shell{
  display:grid; grid-template-columns:120px 1fr; min-height:100vh;
  background:var(--bg-cream);
  max-width:1120px; margin-inline:auto;
  position:relative; z-index:2;
}

.mini-rail{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--bg-cream);
  padding:22px 10px 32px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.rail-item{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; color:var(--text-primary);
  padding:8px; border-radius:var(--r-md);
  border:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  width:84px;
}
.rail-item:hover{ border-color:var(--border-faint); background:var(--bg-muted); }
.rail-item .ri-icon{ position:relative; display:inline-flex; align-items:center; justify-content:center; line-height:0; color:var(--text-primary); }
.rail-item .ri-icon svg{ display:block; }
.rail-item .ri-label{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small);
  letter-spacing:-0.1px; color:var(--text-primary); text-align:center;
}
.rail-item.is-active{
  background:var(--bg-cream); border-color:var(--border-light);
  box-shadow:var(--shadow-card);
}
.mini-rail .ri-num{
  /* Optically centered in the folder body: the flap eats the top ~20% of
     the icon, so true center sits a touch below the geometric middle. */
  position:absolute; top:57%; left:50%; transform:translate(-50%, -50%);
  font-family:var(--font-sans); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:-0.11px; color:var(--text-primary); pointer-events:none; line-height:1;
}
.mini-rail .rail-item.is-active .ri-num{ color:var(--brand-primary); }
.mini-rail .rail-item.is-active .ri-icon{ color:var(--brand-primary); }
.rail-divider{ width:48px; height:1px; background:var(--border-light); opacity:0.6; margin:4px 0 6px; }

/* RIGHT CONTENT PANE */
.entry-pane{ background:var(--bg-cream); padding:72px 64px 120px; max-width:980px; }
.entry-head{
  position:relative;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding-bottom:32px; margin-bottom:var(--space-block);
}
/* The rule is drawn as a pseudo-element rather than a border so it stops at
   the 660px reading measure, matching the yellow section rules below, while
   the head itself still spans full width to park the spot art on the right. */
.entry-head::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; max-width:660px; height:1px;
  background:var(--border-faint);
}
.entry-head .eyebrow{ display:block; text-transform:lowercase; letter-spacing:0.05em; color:var(--text-secondary); font-weight:600; }
.entry-head .course{ font-family:var(--font-kanit); font-weight:600; font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:-0.7px; margin-top:10px; }
.entry-head .subtitle{
  /* Held to the same 660px measure as the body copy below, so the head
     block sits inside the reading column instead of running past it. */
  display:block; max-width:660px; margin-top:8px;
  font-family:var(--font-sans); font-style:italic;
  font-weight:400; font-size:var(--fs-body); color:var(--text-secondary); letter-spacing:-0.1px;
}
.entry-head .when{ text-align:right; flex:none; }
.entry-head .when .day{ font-family:var(--font-kanit); font-weight:600; font-size:var(--fs-h4); color:var(--text-primary); letter-spacing:-0.4px; display:block; }
.entry-head .when .wk{ display:block; font-size:var(--fs-micro); color:var(--text-muted); margin-top:4px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.entry-head .head-art{ color:var(--brand-primary); opacity:.75; }
.entry-head .head-art svg{ display:block; }

/* Intro paragraph that opens every folder page */
/* Folder intro: a pastel picnic-blanket banner with the copy floating in a
   cream card at its centre. Same gingham recipe as the home-page banner,
   dialled lighter so body text stays comfortable to read on top of it. */
.entry-intro{
  max-width:660px; margin:0 0 56px;
  padding:36px 32px;
  background:
    repeating-linear-gradient(0deg,  rgba(244,211,94,.32) 0 30px, transparent 30px 68px),
    repeating-linear-gradient(90deg, rgba(244,211,94,.32) 0 30px, transparent 30px 68px),
    #fff;
  border-radius:var(--r-card);
  text-align:center;
}
.entry-intro > span, .entry-intro-card{
  display:block; max-width:520px; margin:0 auto;
  background:var(--bg-cream); border-radius:var(--r-lg);
  padding:24px 28px;
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary);
  box-shadow:0 6px 20px rgba(30,30,30,.08);
}
.entry-intro em{ font-style:italic; }

/* reflection blocks = the content section pattern */
.reflection{ margin-bottom:56px; }
.reflection:last-of-type{ margin-bottom:0; }
.reflection .rhead{
  display:flex; align-items:center; gap:0; margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:2px solid #F4D35E;
  max-width:660px;
}
.reflection .rhead h4{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h3);
  letter-spacing:-0.2px; color:var(--text-primary); text-align:left;
}
.reflection .rbody{
  color:var(--text-secondary); font-size:var(--fs-body); line-height:var(--lh-body);
  max-width:660px; padding-left:0; text-align:left;
}
.reflection .rbody + .rbody{ margin-top:var(--space-para); }
.reflection .rbody strong{ color:var(--text-primary); font-weight:600; }
.reflection .rsub{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body);
  color:var(--text-primary); padding-left:0; margin:32px 0 12px;
}
.reflection .rlist{
  color:var(--text-secondary); font-size:var(--fs-body); line-height:var(--lh-body);
  max-width:640px; padding-left:20px; margin:16px 0 0; list-style:disc;
}
.reflection .rlist li{ margin:10px 0; }
.reflection .rlist li strong{ color:var(--text-primary); font-weight:600; }
.reflection .rlist + .rbody{ margin-top:var(--space-para); }
.reflection .rlist.is-numbered{ list-style:decimal; }

/* highlighted key-idea callout: one box per item, stacked. */
.rlist-callout{
  list-style:none; padding-left:0; margin:16px 0 0; max-width:620px;
  counter-reset:callout;
}
.reflection .rlist.rlist-callout{ list-style:none; padding-left:0; }
.reflection .rlist.is-numbered.rlist-callout{ list-style:none; }
.rlist-callout li{
  margin:0 0 12px; padding:18px 22px;
  background:rgba(16,15,17,0.035);
  border:1px solid var(--border-default);
  border-radius:var(--r-lg);
}
.rlist-callout li:last-child{ margin-bottom:0; }
.is-numbered.rlist-callout li{
  counter-increment:callout;
  position:relative; padding-left:62px;
}
.is-numbered.rlist-callout li::before{
  content:counter(callout);
  position:absolute; left:20px; top:20px;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-primary); color:var(--text-inverse);
  border-radius:50%;
  font-family:var(--font-kanit); font-weight:600; font-size:var(--fs-micro);
}

/* Download CTA: one look everywhere a file is offered. White fill, ink
   hairline, ink label, and a down-arrow that nudges on hover. */
.btn-download{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small); letter-spacing:-0.12px;
  color:var(--brand-primary); background:var(--bg-default);
  border:1px solid var(--brand-primary); padding:10px 20px; border-radius:var(--r-pill);
  white-space:nowrap; flex:none; text-decoration:none; cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.btn-download .arrow{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn-download:hover{ background:var(--cta-hover); border-color:var(--cta-hover-dark); }
.btn-download:hover .arrow{ transform:translateY(2px); }
.btn-download:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:3px; }

.checklist-download{ margin-top:20px; }

/* Origin story: text left, a photo from the hero marquee on the right. */
.origin-split{
  display:flex; align-items:flex-start; gap:40px;
}
.origin-split > div{ flex:1 1 auto; min-width:0; }
.origin-photo{
  flex:0 0 260px; width:260px; height:auto;
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
@media (max-width:800px){
  .origin-split{ flex-direction:column; }
  .origin-photo{ width:100%; flex-basis:auto; }
}

/* blockquote used for sample copy (invites, follow-up messages) */
.sample-block{
  max-width:640px; margin:16px 0 0;
  background:var(--bg-default); border:1px solid var(--border-default);
  border-radius:var(--r-card); padding:22px 26px; box-shadow:var(--shadow-card);
}
.sample-block p{ color:var(--text-secondary); font-size:var(--fs-body); line-height:var(--lh-body); }
.sample-block p + p{ margin-top:12px; }
.sample-block p strong{ color:var(--text-primary); font-weight:600; }
.sample-block .sample-sig{ font-family:var(--font-inter); font-size:var(--fs-small); color:var(--text-muted); }

/* Sample blocks are templates, so they're editable in place and come with
   copy / save actions. The toolbar is injected by site.js. */
.sample-body{ outline:none; border-radius:var(--r-sm); }
.sample-body:focus{ box-shadow:0 0 0 3px rgba(244,211,94,.45); }
.sample-actions{
  display:flex; align-items:center; gap:10px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--border-faint);
}
.sample-hint{ flex:1 1 auto; font-size:var(--fs-micro); color:var(--text-muted); }
.sample-btn{
  flex:none; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-micro);
  letter-spacing:-0.1px; color:var(--brand-primary); background:var(--bg-default);
  border:1px solid var(--brand-primary); border-radius:var(--r-pill);
  padding:7px 14px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.sample-btn:hover{ background:var(--cta-hover); border-color:var(--cta-hover-dark); }
.sample-btn.is-done{ background:var(--cta-hover); border-color:var(--cta-hover-dark); }

/* checklist: tickable, and printable */
.checklist{ list-style:none; padding-left:0; margin:18px 0 0; max-width:640px; }
.checklist li{ margin:0; }
.checklist label{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--border-faint);
  color:var(--text-secondary); font-size:var(--fs-body); line-height:var(--lh-body); cursor:pointer;
  transition:color .2s ease;
}
.checklist li:last-child label{ border-bottom:none; }
.checklist label:hover{ color:var(--text-primary); }
.checklist input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex:none; margin-top:3px;
  border:1.5px solid var(--border-light); border-radius:var(--r-sm);
  background:var(--bg-default); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.checklist input[type="checkbox"]:hover{ border-color:var(--brand-primary); }
.checklist input[type="checkbox"]:checked{
  background:var(--brand-primary); border-color:var(--brand-primary);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.checklist input[type="checkbox"]:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }
.checklist input:checked + span{ color:var(--text-muted); text-decoration:line-through; text-decoration-thickness:1px; }

/* the arc / timeline pattern (Folder 3) */
.arc-list{ list-style:none; padding-left:0; margin:14px 0 0; max-width:660px; }
.arc-item{ display:grid; grid-template-columns:104px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--border-faint); }
.arc-item:last-child{ border-bottom:none; }
.arc-time{ font-family:var(--font-inter); font-size:var(--fs-small); font-weight:600; color:var(--brand-primary); letter-spacing:0; padding-top:2px; }
.arc-what strong{ display:block; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body); color:var(--text-primary); margin-bottom:4px; }
.arc-what span{ color:var(--text-secondary); font-size:var(--fs-body); line-height:var(--lh-body); }

/* downloads block at the bottom of every folder page */
.downloads-block{
  margin-top:80px; padding-top:40px; border-top:1px solid var(--border-light);
}
.downloads-block h4{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h3);
  letter-spacing:-0.2px; color:var(--text-primary); margin-bottom:6px;
}
.downloads-block .dl-note{ font-size:var(--fs-small); color:var(--text-muted); margin-bottom:20px; }
.dl-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--border-faint);
  max-width:660px; flex-wrap:wrap;
}
.dl-row:last-child{ border-bottom:none; }
.dl-info{ display:flex; align-items:center; gap:14px; min-width:0; }
.dl-icon{ color:var(--brand-primary); flex:none; opacity:.8; }
.dl-icon svg{ display:block; }
.dl-name{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-body); color:var(--text-primary); letter-spacing:-0.15px; }
.dl-kind{ display:block; font-family:var(--font-inter); font-size:var(--fs-micro); color:var(--text-muted); margin-top:2px; letter-spacing:0; }

/* back-to-kit link */
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:64px; text-decoration:none;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small); letter-spacing:-0.14px;
  color:var(--text-secondary);
  transition:color .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.back-link:hover{ color:var(--brand-primary); transform:translateX(-3px); }
.back-link svg{ flex:none; }

/* ── polaroid photo tiles (About page) ────────────────────────────── */
/* "Why we started this": the whole section becomes a centred gingham banner,
   with the copy in a cream card so the reading line stays calm on top of it. */
.why-banner{
  background:
    repeating-linear-gradient(0deg,  rgba(244,211,94,.32) 0 34px, transparent 34px 76px),
    repeating-linear-gradient(90deg, rgba(244,211,94,.32) 0 34px, transparent 34px 76px),
    #fff;
  border-radius:var(--r-card);
  /* The padding shorthand replaces .home-section's padding-top, so the section
     rhythm has to come back as margin or the banner collides with the block
     above it. */
  margin-top:var(--space-section);
  padding:56px 40px;
  text-align:center;
}
.why-banner .home-section-head{ justify-content:center; margin-bottom:20px; }
/* The heading lives inside the card, so the whole block reads as one object
   sitting on the blanket rather than a title floating above it. */
.why-banner .prose{
  max-width:860px; margin:0 auto;
  background:var(--bg-cream); border-radius:var(--r-lg);
  padding:40px 52px 44px;
  text-align:left;
  box-shadow:0 6px 20px rgba(30,30,30,.08);
}
.why-banner .home-section-head h3{
  text-align:center;
  font-size:var(--fs-h4); letter-spacing:-0.2px;
}

/* "Write to us": centred column, at a smaller scale than the reading body
   so the form reads as a compact card rather than a full-width page block. */
#write-to-us{
  text-align:center;
  /* Set apart from the page: a very light yellow panel, pushed further down
     so it reads as its own closing block rather than one more section. */
  background:#FEFAE8;
  border-radius:var(--r-card);
  margin-top:calc(var(--space-section) + 40px);
  padding:64px 40px 72px;
}
#write-to-us .home-section-head{ justify-content:center; }
#write-to-us .prose{ max-width:520px; margin:0 auto; }
#write-to-us .prose p{ font-size:var(--fs-small); }
#write-to-us .contact-form{
  max-width:520px; margin:28px auto 0;
  text-align:left;
}
#write-to-us .contact-form label{ font-size:var(--fs-micro); }
#write-to-us .contact-form input,
#write-to-us .contact-form textarea{ font-size:var(--fs-small); }
#write-to-us .form-note,
#write-to-us .form-aside{ font-size:var(--fs-micro); text-align:center; }
#write-to-us .btn-primary{ margin:0 auto; }

/* "What we learned": three gingham cards running left to right, each led by
   a spot illustration instead of a step number. */
.learn-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px;
}
/* Pastel yellow-to-orange gradient with the same glassy read as the folder
   art: a soft inner highlight along the top edge and a low ambient shadow,
   rather than a flat fill. */
.learn-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  margin:0; padding:32px 28px 34px;
  background:linear-gradient(155deg, #FEF6D4 0%, #FBE9AE 45%, #F7CE96 100%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -18px 32px rgba(240,178,110,.18),
    0 10px 26px rgba(199,146,70,.16);
}
/* Sheen: a soft diagonal highlight across the upper corner. */
.learn-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 34%, transparent 62%);
  pointer-events:none;
}
.learn-card > *{ position:relative; }
.learn-art{ display:block; font-size:32px; line-height:1; margin-bottom:20px; }
.learn-card strong{
  display:block; margin-bottom:14px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h4);
  line-height:var(--lh-tight); letter-spacing:-0.2px; color:var(--text-primary);
}
.learn-card > span:last-child{
  display:block; color:var(--text-secondary);
  font-size:var(--fs-small); line-height:var(--lh-body);
}
.learn-card em{ font-style:italic; }
@media (max-width:900px){
  .learn-grid{ grid-template-columns:1fr; }
  .why-banner{ padding:40px 24px; }
}

/* About: prose on the left, photography parked on the right. */
/* align-items:center so the photo sits at the vertical midpoint of the whole
   left column (heading plus copy), not pinned to the first line of text. */
.about-split{
  display:flex; align-items:center; justify-content:space-between; gap:56px;
  margin-bottom:24px;
}
.about-split .split-col{ flex:1 1 560px; min-width:0; }
.about-split .prose{ flex:1 1 560px; }
.about-split .photo-row,
.about-split .photo-stack,
.about-split .you-are-art{ flex:0 0 420px; margin-top:0; }
.you-are-art{ display:block; }
/* Square cut-out on a transparent ground, so it sits straight on the page
   with no panel behind it. */
.you-are-art .you-are-img{ display:block; width:100%; height:auto; }
/* The single-photo variant fills its whole column instead of sitting at the
   192px default, and gets the hero print's mount so both match. */
.about-split .photo-row{ display:block; }
.about-split .photo-row .photo-tile{
  width:100%; height:auto;
  background:#FFFEFB; border:none; border-radius:22px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  padding:6px 6px 0;
}
.about-split .photo-row .photo-tile .pic{
  width:100%; height:auto; aspect-ratio:1 / 1;
  border-radius:16px;
  background-size:cover; background-position:center;
}
.about-split .photo-row .photo-tile .cap{
  position:static; margin:0; padding:12px 6px 14px; text-align:center;
}

/* Photo stack: the tiles occupy one slot and cross-fade one at a time.
   --n is the slide count, --i each slide's index. Each slide is opaque for
   one 1/n window of the cycle and fades across the seam, so the timing
   holds however many slides the markup carries. */
.photo-stack{
  position:relative;
  aspect-ratio:1 / 1;
}
/* Same print treatment as the hero marquee: cream mount, soft shadow, and a
   square photo inside. Overrides .photo-tile's own frame so the two rows of
   photography on the site read as the same object. */
.photo-stack .photo-tile{
  /* .photo-tile ships a fixed 192px width/height; both have to be reset or
     they win over inset:0 and the square collapses to a letterbox. */
  position:absolute; inset:0;
  margin:0; width:100%; height:100%;
  background:#FFFEFB; border:none; border-radius:22px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  padding:6px;
  opacity:0;
  animation:photo-cycle calc(var(--n) * 4s) linear infinite;
  animation-delay:calc(var(--i) * 4s);
}
.photo-stack .photo-tile:hover{ transform:none; }
.photo-stack .photo-tile .pic{
  width:100%; height:100%;
  border-radius:16px;
  background-size:cover; background-position:center;
}
@keyframes photo-cycle{
  0%              { opacity:0; }
  4%, 30%         { opacity:1; }
  34%, 100%       { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .photo-stack .photo-tile{ animation:none; }
  .photo-stack .photo-tile:not(:first-child){ display:none; }
  .photo-stack .photo-tile:first-child{ opacity:1; }
}
@media (max-width:900px){
  .about-split{ flex-direction:column; gap:28px; }
  .about-split .photo-row,
  .about-split .photo-stack{ flex-basis:auto; width:100%; max-width:340px; }
}

.photo-row{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.photo-tile{
  width:192px; height:192px; background:var(--bg-default);
  border:1px solid var(--border-faint); border-radius:var(--r-sm);
  box-shadow:0 1px 6px rgba(16,15,17,0.08);
  padding:12px 12px 36px; position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.photo-tile:hover{ transform:rotate(-1.5deg) translateY(-2px); }
.photo-tile .pic{
  width:100%; height:100%; border-radius:2px;
  background:linear-gradient(135deg, #EDECEA 0%, #DEDCD8 100%);
  display:flex; align-items:center; justify-content:center;
}
.photo-tile .pic span{ font-family:var(--font-inter); font-size:var(--fs-micro); letter-spacing:0.14em; text-transform:uppercase; color:#A6A49E; }
.photo-tile:nth-child(2) .pic{ background:linear-gradient(135deg,#EFEEEC 0%,#E0DEDA 100%); }
.photo-tile:nth-child(3) .pic{ background:linear-gradient(135deg,#E9E8E6 0%,#D8D6D2 100%); }
.photo-tile .cap{
  position:absolute; left:0; right:0; bottom:10px; text-align:center;
  font-family:var(--font-sans); font-size:var(--fs-micro); color:var(--text-muted);
}
.photo-tile.has-photo .pic{ background-size:cover; background-position:center center; background-repeat:no-repeat; cursor:zoom-in; }
.photo-tile.has-photo .pic span{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   COMMUNITY: contact form (presentational)
   ════════════════════════════════════════════════════════════════════ */
.contact-form{ max-width:560px; margin-top:var(--space-block); }
.field{ margin-bottom:26px; }
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-small);
  letter-spacing:0.02em; color:var(--text-dark);
}
.field input, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.6;
  color:var(--text-primary); background:var(--bg-default);
  border:1px solid var(--border-light); border-radius:var(--r-md);
  padding:13px 16px; letter-spacing:-0.15px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(16,15,17,0.09);
}
.form-note{
  margin-top:18px; font-size:var(--fs-small); font-style:italic;
  color:var(--text-muted); line-height:1.6; max-width:520px;
}
.form-aside{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--border-faint);
  font-size:var(--fs-small); color:var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════════════
   DOWNLOADS PAGE
   ════════════════════════════════════════════════════════════════════ */
.dl-group{ margin-bottom:56px; max-width:700px; }
.dl-group h4{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h3);
  letter-spacing:-0.2px; color:var(--text-primary);
  padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--border-light);
}
.dl-group .dl-row{ max-width:none; }

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════════════ */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;padding:48px;opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1);cursor:zoom-out;}
.lightbox[hidden]{display:none;}
.lightbox.is-open{opacity:1;}
.lightbox-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.4);transform:scale(.95);transition:transform .45s cubic-bezier(.16,1,.3,1);}
.lightbox.is-open .lightbox-img{transform:scale(1);}
.lightbox-close{position:fixed;top:24px;right:32px;background:transparent;border:none;color:#fff;font-size:36px;line-height:1;cursor:pointer;padding:8px;opacity:.85;transition:opacity .2s;}
.lightbox-close:hover{opacity:1;}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:920px){
  .section-split{ flex-direction:column; gap:var(--space-block); }
  .section-split .pullquote{ flex:1 1 auto; width:100%; }
  .home-body, .site-footer{ padding-left:24px; padding-right:24px; }
  .entry-pane{ padding:40px 32px 64px; }
}
@media (max-width:680px){
  /* One place to shrink the whole scale, rather than per-element overrides.
     --fs-display is already a clamp, so it scales on its own. */
  :root{
    --fs-h1:30px; --fs-h2:26px; --fs-h3:20px; --fs-h4:18px;
    --space-section:64px; --space-block:32px;
  }
  .topnav{ padding-top:16px; }
  .topnav-group{ flex-direction:column; gap:10px; width:100%; max-width:420px; padding:0 18px; }
  .nav-pill{ width:100%; justify-content:space-between; flex-wrap:wrap; padding:8px 12px 8px 16px; gap:8px; min-height:0; }
  /* the wordmark/links divider only reads correctly on one line */
  .nav-brand{ border-right:none; padding-right:0; }
  .nav-cta{ width:100%; justify-content:center; padding:12px 20px; }
  .hero{ padding:32px 18px 12px; }
  .hero-ctas{ flex-direction:column; gap:10px; }
  .hero-cta{ width:100%; max-width:300px; justify-content:center; }
  /* hero side padding is 18px at this width, so the full-bleed pull-out
     matches it; smaller prints keep about two in view on a phone */
  .hero-marquee{ margin:48px -18px 0; }
  .hm-print{ width:330px; margin-right:12px; }
  .section-split{ flex-direction:column; gap:var(--space-block); }
  .section-split .pullquote{ flex:1 1 auto; width:100%; }
  .folder{ margin:0 auto; }
  .home-section{ padding-top:48px; }

  /* detail pages: rail becomes a horizontal strip above the content */
  .entry-shell{ grid-template-columns:1fr; }
  .mini-rail{
    position:relative; top:auto; height:auto;
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
    border-bottom:1px solid var(--border-default);
    padding:14px 12px; gap:8px; justify-content:flex-start;
  }
  .rail-divider{ width:1px; height:36px; margin:0 4px; }
  .rail-item{ flex:none; width:auto; min-width:64px; }
  .entry-pane{ padding:32px 22px 56px; }
  .entry-head{ flex-direction:column; gap:14px; }
  .entry-head .when{ text-align:left; }
  .reflection .rbody, .reflection .rsub, .checklist, .arc-list{ padding-left:0; }
  .reflection .rlist{ padding-left:22px; }
  .sample-block{ margin-left:0; }
  .arc-item{ grid-template-columns:1fr; gap:4px; }
  .site-footer{ flex-direction:column; gap:24px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRINT: the checklists are meant to be printable
   ════════════════════════════════════════════════════════════════════ */
@media print{
  body::before, .topnav, .mini-rail, .back-link, .site-footer{ display:none; }
  .entry-shell{ grid-template-columns:1fr; }
  .entry-pane{ padding:0; max-width:none; }
  .reveal{ opacity:1; transform:none; }
}