/* ============================================================
   NEW NEST ESSENTIALS — sitewide design system  ·  v2 "handcrafted"
   One shared stylesheet for every page.
   Brand-matched to the pin design kit:
   cream/greige · terracotta · sage · charcoal
   Fraunces display serif · clean warm sans everything else.
   Motifs: nest weave · arches · leaf sprigs · stitch lines.
   ============================================================ */

/* ---------- 1 · Design tokens ---------- */
:root{
  /* palette (locked — same hex as the pins) */
  --cream:#F4EDE1;
  --cream-bright:#FBF6EC;
  --card:#F8F2E6;
  --terracotta:#C4663F;
  --terra-deep:#A9522F;
  --terra-soft:#D98E68;          /* terracotta lifted for dark backgrounds */
  --sage:#7F9068;
  --sage-deep:#5F7147;
  --charcoal:#34322D;
  --ink:#413E36;
  --muted:#635D50;
  --faint:#6B6456;
  --hair:rgba(52,50,45,.16);
  --paper:#FFF7EE;               /* warm white for text on terracotta */
  --cream-on-dark:rgba(251,246,236,.92);
  --cream-dim:rgba(251,246,236,.62);

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --serif:var(--display);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* shape + shadow */
  --radius:14px;
  --radius-sm:8px;
  --arch:340px;                          /* arch-top curve, echoes the pins */
  --shadow-soft:0 10px 22px rgba(52,50,45,.10);
  --shadow-lift:0 16px 32px rgba(52,50,45,.15);

  /* texture — paper grain, tiny inline SVG (no image request) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");

  /* hand-drawn squiggle underlines */
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='7' viewBox='0 0 72 7'%3E%3Cpath d='M1 4.6 Q 10 1.6 20 3.8 T 38 3.2 T 56 4 T 71 3' fill='none' stroke='%23C4663F' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='7' viewBox='0 0 72 7'%3E%3Cpath d='M1 4.6 Q 10 1.6 20 3.8 T 38 3.2 T 56 4 T 71 3' fill='none' stroke='%23FFF7EE' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");

  /* layout */
  --maxw:1080px;
  --maxw-wide:1180px;
  --prose:44rem;
}

/* ---------- 2 · Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  background-color:var(--cream);
  background-image:var(--grain);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--terra-deep);}
a:hover{color:var(--terra-deep);}
::selection{background:var(--terracotta);color:var(--paper);}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px;}

h1,h2,h3,h4{color:var(--charcoal);}
h1,h2{text-wrap:balance;}

.container{width:min(100% - 2.5rem, var(--maxw));margin-inline:auto;}
.container-wide{width:min(100% - 2.5rem, var(--maxw-wide));margin-inline:auto;}
.section{padding-block:3rem;}
.center{text-align:center;}
.serif{font-family:var(--serif);font-weight:400;}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:1rem;top:-3.5rem;z-index:100;
  background:var(--charcoal);color:var(--cream-bright);
  padding:.6rem 1rem;border-radius:0 0 8px 8px;
  font-size:.85rem;text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:0;color:var(--cream-bright);}

/* ---------- 3 · Typography helpers + hand-touched marks ---------- */
.kicker{
  display:inline-block;
  font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-indent:.05em;text-transform:uppercase;
  color:var(--terra-deep);
}
.kicker-leaf{display:inline-flex;align-items:center;gap:.55rem;text-indent:0;}
.kicker-leaf svg{width:15px;height:15px;flex:none;}

.headline-em{font-style:italic;color:var(--sage-deep);}
em.brand-em{font-style:italic;color:var(--sage-deep);}

/* squiggly hand-underline on a key word */
.hand-underline{
  font-style:normal;
  background:var(--squiggle) no-repeat left bottom / 100% 6px;
  padding-bottom:5px;
}

/* legacy centered section head (guide + utility pages) */
.section-head{text-align:center;max-width:44rem;margin-inline:auto;}
.section-head h2{
  font-family:var(--serif);font-weight:450;
  font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.2;
  margin-top:.6rem;
}
.section-head .lede{margin-top:.9rem;color:var(--muted);}

/* serif h2 flanked by terracotta rosettes (legacy, still used on guide pages) */
.rosette-row{display:flex;align-items:center;justify-content:center;gap:14px;}
.rosette-row .rule{height:1px;width:70px;background:rgba(52,50,45,.28);}
.rosette-row svg{width:18px;height:18px;flex:none;}

/* stitched divider — the brand's running-thread motif */
hr.stitch{
  border:none;width:130px;margin:3rem auto;
  border-top:1.6px dashed rgba(196,102,63,.5);
}

/* organic hand-drawn wave divider (left-set, deliberately off-centre) */
.wave-divider{margin:0;line-height:0;}
.wave-divider svg{width:min(300px,60%);height:26px;display:block;}

/* ---------- 4 · Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-indent:.04em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  padding:1rem 1.8rem;border-radius:999px;
  transition:transform .15s ease, background-color .15s ease,
             border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary{
  background:var(--terra-deep);color:#fff;
  box-shadow:0 10px 22px rgba(196,102,63,.30), 0 2px 6px rgba(169,82,47,.22);
}
.btn-primary:hover{background:#8F4526;color:#fff;transform:translateY(-2px);}
.btn-ghost{
  color:var(--charcoal);background:transparent;
  border:1.5px solid rgba(52,50,45,.35);
}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--terra-deep);transform:translateY(-2px);}
.btn-light{
  color:var(--cream-bright);background:transparent;
  border:1.5px solid rgba(251,246,236,.65);
}
.btn-light:hover{background:var(--cream-bright);color:var(--charcoal);transform:translateY(-2px);}
.btn .arrow{letter-spacing:0;margin-left:.5rem;}

/* ---------- 5 · Header + nav ---------- */
.site-header{
  background-color:var(--cream-bright);
  background-image:var(--grain);
  border-bottom:1px solid var(--hair);
  position:relative;z-index:50;
}
.header-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding-block:.85rem;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;}
.brand-seal{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--cream);box-shadow:0 0 0 1px var(--hair);
}
.brand-seal img{width:100%;height:100%;object-fit:cover;}
.brand-name{
  display:block;
  font-family:var(--display);font-weight:600;
  font-size:1.06rem;letter-spacing:.005em;
  color:var(--charcoal);line-height:1.15;
}
.brand-tag{
  display:block;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.8rem;letter-spacing:.02em;
  color:var(--terra-deep);margin-top:.1rem;
}

/* CSS-only mobile menu (checkbox toggle, no JS) */
.nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.nav-toggle-label{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:pointer;border-radius:10px;
}
.nav-toggle-label:hover{background:rgba(52,50,45,.06);}
.nav-toggle:focus-visible ~ .nav-toggle-label{outline:2px solid var(--terracotta);outline-offset:2px;}
.nav-toggle-bars{
  position:relative;display:block;width:22px;height:2px;
  background:var(--charcoal);border-radius:2px;
  transition:background-color .15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;
  background:var(--charcoal);border-radius:2px;
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle-bars::before{top:-7px;}
.nav-toggle-bars::after{top:7px;}
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bars{background:transparent;}
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bars::before{top:0;transform:rotate(45deg);}
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-bars::after{top:0;transform:rotate(-45deg);}

.site-nav{
  flex-basis:100%;
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
}
.nav-toggle:checked ~ .site-nav{max-height:40rem;}
.site-nav ul{list-style:none;}
.site-nav > ul{padding-block:.5rem 1rem;}
.site-nav a{
  display:block;padding:.72rem .25rem;
  font-size:.98rem;font-weight:600;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(52,50,45,.08);
}
.site-nav a:hover{color:var(--terra-deep);}
.site-nav a[aria-current="page"]{color:var(--terra-deep);}

/* Guides dropdown — native <details>, accessible with zero/minimal JS */
.nav-drop summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.45rem;
  padding:.72rem .25rem;
  font-size:.98rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid rgba(52,50,45,.08);
}
.nav-drop summary::-webkit-details-marker{display:none;}
.nav-drop summary:hover{color:var(--terra-deep);}
.nav-drop .chev{width:12px;height:12px;flex:none;transition:transform .2s ease;}
.nav-drop[open] > summary .chev{transform:rotate(180deg);}

.drop-panel{margin:.25rem 0 .6rem .4rem;padding-left:1rem;
  border-left:1.6px dashed rgba(196,102,63,.5);}
.drop-panel a{
  display:flex;align-items:baseline;gap:.65rem;
  padding:.66rem .2rem;border-bottom:none;
  font-size:.95rem;
}
.drop-num{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:.8rem;color:var(--terra-deep);min-width:1.3rem;
}
.drop-tag{
  margin-left:auto;padding-left:.6rem;
  font-family:var(--display);font-style:italic;
  font-size:.8rem;color:var(--terra-deep);
  white-space:nowrap;
}

/* ---------- 6 · Image slots (with labeled placeholder fallback) ---------- */
.img-slot{
  position:relative;overflow:hidden;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--hair);
}
.img-slot::before{                 /* dashed inner frame — visible only when the photo is missing */
  content:"";position:absolute;inset:10px;
  border:1.5px dashed rgba(196,102,63,.5);
  border-radius:calc(var(--radius) - 6px);
}
.img-slot::after{                  /* placeholder label */
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem;text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:1rem;color:var(--muted);
}
.img-slot img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
}
.img-slot img.is-missing{display:none;}
.img-slot--flush{border-radius:0;box-shadow:none;}

.ratio-3x2{aspect-ratio:3/2;}
.ratio-4x3{aspect-ratio:4/3;}
.ratio-16x9{aspect-ratio:16/9;}
.ratio-21x9{aspect-ratio:21/9;}

/* ---------- 7 · Hero (homepage) ---------- */
.hero{padding-block:2.6rem 2.8rem;position:relative;}
.hero-grid{display:grid;gap:3rem;align-items:center;}
.hero-title{
  font-family:var(--display);font-weight:440;
  font-size:clamp(2.3rem, 4vw + .75rem, 3.8rem);
  line-height:1.04;letter-spacing:-.01em;
  margin-top:1rem;
}
.hero-title .line{display:block;}
.hero-title .circled{
  position:relative;display:inline-block;
  font-style:italic;color:var(--terra-deep);
  padding:0 .08em;
}
.hero-title .circled .scribble{
  position:absolute;left:-11%;top:-30%;
  width:128%;height:170%;
  overflow:visible;pointer-events:none;
}
.hero-title .circled .scribble path{
  stroke:var(--terracotta);stroke-width:3.4;fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw-scribble 1s ease-out .5s forwards;
}
@keyframes draw-scribble{to{stroke-dashoffset:0;}}

.hero-lede{
  margin-top:1.3rem;max-width:33rem;
  font-size:1.05rem;line-height:1.72;
}
.hero-actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;}

/* hero art — arch photo + nest weave + rotating seal */
.hero-art{position:relative;max-width:400px;margin:1.5rem auto 0;}
.arch-frame{
  position:relative;z-index:2;
  border-radius:var(--arch) var(--arch) 20px 20px;
  overflow:hidden;
  aspect-ratio:5/5.9;
  box-shadow:var(--shadow-lift);
}
.arch-frame img{width:100%;height:100%;object-fit:cover;}
.hero-art::before{                      /* offset hand-drawn arch echo */
  content:"";position:absolute;z-index:1;
  inset:14px -14px -14px 14px;
  border:1.6px solid rgba(196,102,63,.55);
  border-radius:var(--arch) var(--arch) 22px 22px;
}
.nest-lines{
  position:absolute;z-index:0;
  left:-9%;bottom:-4.5%;width:64%;height:auto;
  pointer-events:none;
}
.hero-stamp{
  position:absolute;z-index:3;
  left:-26px;bottom:34px;
  width:104px;height:104px;
  filter:drop-shadow(0 6px 12px rgba(52,50,45,.18));
}
.hero-stamp .stamp-ring{display:block;width:100%;height:100%;}
.hero-stamp .spin{                      /* only the text ring rotates */
  transform-box:view-box;transform-origin:50% 50%;
  animation:stamp-spin 30s linear infinite;
  will-change:transform;
}
@keyframes stamp-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.stamp-logo{                            /* static brand seal, centered */
  position:absolute;left:50%;top:50%;
  width:62px;height:62px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background:#FBF6EC;
}
.stamp-logo img{                        /* sharp seal logo (logo-seal.png, 240px) at
                                           ~60% fill; nudge + counter-rotate so the mark
                                           sits optically centered and upright */
  position:absolute;left:50%;top:50%;
  width:115%;height:115%;
  transform:translate(-50%,-48.8%) rotate(-3deg);
}
.hero-sprig{
  position:absolute;z-index:3;
  right:-12px;top:-20px;width:58px;height:auto;
  pointer-events:none;
}

/* ---------- 8 · Manifesto (homepage value props, asymmetric) ---------- */
.manifesto{padding-block:2.6rem 3rem;}
.manifesto-grid{display:grid;gap:2.6rem;}
.manifesto-head h2{
  font-family:var(--display);font-weight:460;
  font-size:clamp(1.7rem,2.6vw + .5rem,2.4rem);line-height:1.16;
  margin-top:.7rem;
}
.manifesto-head h2 em{font-style:italic;color:var(--sage-deep);}
.manifesto-head p{margin-top:1.1rem;color:var(--muted);max-width:26rem;}
.manifesto-head .head-sprig{margin-top:1.6rem;width:74px;height:auto;display:block;}

.manifesto-list{list-style:none;}
.manifesto-list li{
  display:flex;gap:1.35rem;align-items:flex-start;
  padding-block:1.5rem;
}
.manifesto-list li + li{border-top:1.6px dashed rgba(196,102,63,.45);}
.manifesto-list li:first-child{padding-top:.4rem;}
.mark{
  width:66px;height:66px;flex:none;
  display:grid;place-items:center;
  background:var(--cream-bright);
  border:1.5px solid rgba(65,62,54,.3);
  box-shadow:0 4px 10px rgba(52,50,45,.06);
  border-radius:58% 42% 55% 45% / 52% 58% 42% 48%;   /* organic pebble */
}
.manifesto-list li:nth-child(2) .mark{border-radius:45% 55% 48% 52% / 55% 45% 55% 45%;}
.manifesto-list li:nth-child(3) .mark{border-radius:52% 48% 60% 40% / 45% 52% 48% 55%;}
.mark svg{width:32px;height:32px;}
.mno{
  display:block;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:.92rem;color:var(--terra-deep);
}
.manifesto-list h3{
  font-family:var(--display);font-weight:520;
  font-size:1.32rem;line-height:1.25;margin-top:.15rem;
}
.manifesto-list p{margin-top:.4rem;font-size:.96rem;line-height:1.6;color:var(--muted);max-width:30rem;}

/* legacy ring-icon callouts (kept for other pages) */
.callouts{display:grid;gap:2rem;margin-top:2.4rem;}
.co{text-align:center;max-width:16rem;margin-inline:auto;}
.ring{
  width:78px;height:78px;margin:0 auto;border-radius:50%;
  background:var(--cream-bright);
  border:1.5px solid rgba(65,62,54,.32);
  box-shadow:0 0 0 6px rgba(196,102,63,.06), 0 4px 10px rgba(52,50,45,.05);
  display:flex;align-items:center;justify-content:center;
}
.co h3{
  margin-top:.85rem;
  font-size:.8rem;font-weight:800;
  letter-spacing:.14em;text-indent:.04em;text-transform:uppercase;
}
.co p{margin-top:.35rem;font-size:.92rem;line-height:1.55;color:var(--muted);}

/* ---------- 9 · Guides (homepage: feature card + room index) ---------- */
.guides{padding-block:2.6rem 3.2rem;}
.guides-head{max-width:38rem;}
.guides-head .kicker{display:inline-flex;align-items:center;gap:.8rem;text-indent:0;}
.guides-head .kicker::before{
  content:"";display:inline-block;width:44px;
  border-top:1.6px dashed rgba(196,102,63,.55);
}
.guides-head h2{
  font-family:var(--display);font-weight:460;
  font-size:clamp(1.7rem,2.6vw + .5rem,2.4rem);line-height:1.16;
  margin-top:.7rem;
}
.guides-head h2 em{font-style:italic;color:var(--sage-deep);}

/* featured pillar — First Apartment Checklist */
.feature-card{
  display:grid;overflow:hidden;
  margin-top:2.2rem;
  background-color:var(--terra-deep);
  background-image:var(--grain);
  border-radius:26px;
  box-shadow:var(--shadow-lift);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(52,50,45,.22);}
.feature-media{
  margin:1.15rem 1.15rem 0;
  border-radius:var(--arch) var(--arch) 14px 14px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 10px 24px rgba(60,25,10,.28);
}
.feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.feature-card:hover .feature-media img{transform:scale(1.04);}
.feature-body{padding:1.7rem 1.5rem 1.9rem;}
.sticker{
  display:inline-block;transform:rotate(-3deg);
  background:var(--paper);color:var(--terra-deep);
  font-size:.64rem;font-weight:800;
  letter-spacing:.22em;text-indent:.05em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:3px;
  box-shadow:0 3px 8px rgba(40,16,6,.25);
}
.feature-body h3{
  font-family:var(--display);font-weight:470;
  font-size:clamp(1.6rem,2.4vw + .5rem,2.15rem);line-height:1.12;
  color:var(--paper);margin-top:1.05rem;
}
.feature-body h3 em{font-style:italic;}
.feature-body p{margin-top:.8rem;color:var(--paper);font-size:.99rem;line-height:1.65;max-width:26rem;}
.feature-link{
  display:inline-block;margin-top:1.35rem;
  color:var(--paper);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--squiggle-paper) no-repeat left bottom / 100% 6px;
  padding-bottom:7px;
}

/* room index — editorial list, replaces the uniform card grid */
.room-index{list-style:none;margin-top:1.4rem;}
.room-index li{border-bottom:1.6px dashed rgba(196,102,63,.4);}
.room-index a{
  display:grid;grid-template-columns:1fr auto;
  column-gap:1.1rem;row-gap:.15rem;align-items:center;
  padding-block:1.3rem;
  text-decoration:none;color:inherit;
}
.room-index .idx{
  grid-column:1;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:.88rem;color:var(--terra-deep);
}
.room-index h3{
  grid-column:1;
  font-family:var(--display);font-weight:480;
  font-size:clamp(1.3rem,1.4vw + .8rem,1.65rem);line-height:1.2;
  transition:color .18s ease;
}
.room-index p{
  grid-column:1;
  margin-top:.3rem;font-size:.93rem;line-height:1.55;
  color:var(--muted);max-width:32rem;
}
.room-thumb{
  grid-column:2;grid-row:1 / span 3;
  width:84px;height:102px;flex:none;overflow:hidden;
  border-radius:52px 52px 12px 12px;
  box-shadow:0 0 0 1px var(--hair), var(--shadow-soft);
  transition:transform .22s ease;
}
.room-thumb img{width:100%;height:100%;object-fit:cover;}
.room-index .go{
  grid-column:2;grid-row:auto;display:none;
}
.room-index a:hover h3{color:var(--terra-deep);}
.room-index a:hover .room-thumb{transform:rotate(-2.5deg) scale(1.04);}

/* legacy uniform guide cards (kept for other pages) */
.card-grid{display:grid;gap:1.5rem;margin-top:2.4rem;}
.guide-card{
  display:flex;flex-direction:column;
  background:var(--cream-bright);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 0 1px var(--hair), var(--shadow-soft);
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.guide-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--hair), var(--shadow-lift);}
.guide-card:hover .card-link{color:var(--terra-deep);}
.guide-card:hover h3{color:var(--terra-deep);}
.guide-card .img-slot{border-radius:0;box-shadow:none;}
.guide-card-body{
  flex:1;display:flex;flex-direction:column;
  padding:1.35rem 1.4rem 1.45rem;
}
.guide-card .card-kicker{
  font-size:.65rem;font-weight:700;
  letter-spacing:.26em;text-indent:.06em;text-transform:uppercase;
  color:var(--faint);
}
.guide-card h3{
  font-family:var(--serif);font-weight:450;
  font-size:1.35rem;line-height:1.2;margin-top:.45rem;
  transition:color .18s ease;
}
.guide-card p{margin-top:.55rem;font-size:.94rem;line-height:1.6;color:var(--muted);}
.card-link{
  margin-top:auto;padding-top:.9rem;
  font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-indent:.04em;text-transform:uppercase;
  color:var(--terra-deep);transition:color .18s ease;
}

/* ---------- 10 · Mission (homepage: inset organic panel) ---------- */
.mission{padding-block:.6rem 3.4rem;}
.mission-panel{
  position:relative;overflow:hidden;
  background-color:var(--sage-deep);
  background-image:var(--grain);
  border-radius:2.4rem 4.5rem 2.4rem 4.5rem;
  padding:clamp(2.1rem,5vw,3.4rem);
  color:var(--cream-on-dark);
}
.mission-grid{display:grid;gap:2.2rem;position:relative;z-index:1;}
.mission-panel .kicker{color:var(--cream-bright);}
.mission-quote{
  font-family:var(--display);font-style:italic;font-weight:430;
  font-size:clamp(1.5rem,2.4vw + .55rem,2.2rem);line-height:1.3;
  color:var(--cream-bright);
  margin-top:1rem;text-wrap:balance;
}
.mission-quote::before{
  content:"\201C";
  display:block;height:.25em;
  font-size:2.6em;line-height:.9;font-style:normal;
  color:rgba(251,246,236,.35);
}
.mission-side p{color:var(--cream-on-dark);font-size:.98rem;line-height:1.7;}
.mission-side .btn-light{margin-top:1.5rem;}
.mission-leaves{
  position:absolute;z-index:0;right:-16px;bottom:-22px;
  width:190px;height:auto;pointer-events:none;
}

/* legacy full-width sage band (kept for other pages) */
.band-sage{background:var(--sage-deep);color:var(--cream-on-dark);}
.band-sage .kicker{color:var(--cream-bright);}
.band-sage h2,.band-sage .mission-line{color:var(--cream-bright);}
.mission-line{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:1.35;
  max-width:44rem;margin:.9rem auto 0;
}
.mission-copy{max-width:40rem;margin:1.1rem auto 0;color:var(--cream-bright);}
.band-sage .btn-light{margin-top:1.8rem;}

/* ---------- 11 · Page head (guide + utility pages) ---------- */
.page-head{padding-top:2.6rem;text-align:center;}
.crumbs{font-size:.78rem;color:var(--faint);letter-spacing:.04em;}
.crumbs a{color:var(--faint);text-decoration:none;}
.crumbs a:hover{color:var(--terra-deep);}
.crumbs .sep{padding-inline:.45rem;}
.page-head .kicker{margin-top:1.4rem;}
.page-head h1{
  font-family:var(--serif);font-weight:440;
  font-size:clamp(1.95rem,5vw,2.9rem);line-height:1.13;
  max-width:46rem;margin:.7rem auto 0;
}
.dek{max-width:40rem;margin:1rem auto 0;font-size:1.04rem;line-height:1.7;}
.byline{
  margin-top:1rem;
  font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-indent:.06em;text-transform:uppercase;
  color:var(--faint);
}
.page-hero-img{margin-top:2.2rem;}

/* ---------- 12 · Article prose ---------- */
.prose{max-width:var(--prose);margin-inline:auto;font-size:1.02rem;line-height:1.75;}
.prose > * + *{margin-top:1.15rem;}
.prose h2{
  font-family:var(--serif);font-weight:450;
  font-size:1.7rem;line-height:1.25;
  margin-top:2.9rem;
}
.prose h3{
  font-size:.88rem;font-weight:800;
  letter-spacing:.16em;text-indent:.04em;text-transform:uppercase;
  margin-top:2.3rem;
}
.prose h3::before{
  content:"";display:inline-block;
  width:22px;height:2px;background:var(--terracotta);
  vertical-align:.28em;margin-right:.65rem;
}
.prose strong{color:var(--charcoal);}
.prose ul:not(.checklist){padding-left:1.3rem;}
.prose ul:not(.checklist) li{margin-top:.55rem;}
.prose ul:not(.checklist) li::marker{color:var(--terracotta);}

/* checklist — terracotta checkmarks */
ul.checklist{list-style:none;}
.checklist li{position:relative;padding-left:2rem;margin-top:.85rem;}
.checklist li::before{
  content:"\2713";
  position:absolute;left:.15rem;top:0;
  color:var(--terracotta);font-weight:700;
}
.checklist strong{color:var(--charcoal);}

/* "in this guide" box */
.toc{
  background:var(--card);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--hair);
  padding:1.4rem 1.6rem;margin-top:2.2rem;
}
.toc-title{
  font-size:.68rem;font-weight:700;
  letter-spacing:.26em;text-indent:.06em;text-transform:uppercase;
  color:var(--faint);
}
.toc ul{list-style:none;margin-top:.7rem;}
.toc li{margin-top:.35rem;}
.toc a{
  color:var(--ink);text-decoration:none;font-size:.96rem;
  border-bottom:1px dashed rgba(196,102,63,.45);
}
.toc a:hover{color:var(--terra-deep);}

/* "our pick" placeholder card */
.pick-card{
  position:relative;
  background:var(--cream-bright);border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--hair), var(--shadow-soft);
  padding:1.5rem 1.7rem;margin-top:2rem;
}
.pick-card::before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:1.4px dashed rgba(196,102,63,.5);
  border-radius:calc(var(--radius) - 6px);
}
.pick-kicker{
  font-size:.68rem;font-weight:800;
  letter-spacing:.24em;text-indent:.06em;text-transform:uppercase;
  color:var(--terra-deep);
}
.pick-card h4{
  font-family:var(--serif);font-weight:450;
  font-size:1.28rem;margin-top:.5rem;
}
.pick-card p{margin-top:.45rem;font-size:.95rem;line-height:1.6;color:var(--muted);}

/* tip callout */
.tip{
  background:var(--card);
  border-left:3px solid var(--sage);
  border-radius:0 10px 10px 0;
  padding:1.1rem 1.3rem;
  font-size:.98rem;
}
.tip .tip-label{
  display:block;
  font-size:.66rem;font-weight:800;
  letter-spacing:.24em;text-indent:.06em;text-transform:uppercase;
  color:var(--sage-deep);margin-bottom:.35rem;
}

/* end-of-article cross links */
.next-guides{margin-top:3rem;padding-top:2rem;border-top:1.6px dashed rgba(196,102,63,.4);}
.next-guides .toc-title{color:var(--faint);}
.next-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem;}

/* ---------- 13 · Footer ---------- */
.site-footer{background:var(--charcoal);color:var(--cream-on-dark);margin-top:0;}
.footer-grid{display:grid;gap:2.4rem;padding-block:3rem 2.4rem;}
.footer-brand-row{display:flex;align-items:center;gap:.9rem;}
.footer-seal{
  width:54px;height:54px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--cream);border:1px solid rgba(251,246,236,.4);
}
.footer-seal img{width:100%;height:100%;object-fit:cover;}
.footer-name{
  font-family:var(--display);font-weight:550;
  font-size:1.05rem;letter-spacing:.01em;
  color:var(--cream-bright);
}
.footer-tagline{
  margin-top:.15rem;
  font-family:var(--display);font-style:italic;
  font-size:.85rem;letter-spacing:.02em;
  color:var(--cream-dim);
}
.footer-blurb{margin-top:1.1rem;max-width:20rem;font-size:.9rem;line-height:1.65;color:var(--cream-dim);}
.footer-head{
  font-size:.66rem;font-weight:700;
  letter-spacing:.28em;text-indent:.06em;text-transform:uppercase;
  color:var(--cream-dim);
}
.footer-links{list-style:none;margin-top:.9rem;}
.footer-links a{
  display:inline-block;padding-block:.26rem;
  color:var(--cream-on-dark);text-decoration:none;font-size:.92rem;
}
.footer-links a:hover{color:var(--terra-soft);}
.footer-bottom{
  border-top:1px solid rgba(251,246,236,.18);
  padding-block:1.2rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--cream-dim);
}
.footer-bottom a{color:var(--cream-dim);text-decoration:none;}
.footer-bottom a:hover{color:var(--terra-soft);}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem;}

/* ---------- 14 · Breakpoints ---------- */
@media (min-width:640px){
  .section{padding-block:3.8rem;}
  .callouts{grid-template-columns:repeat(3,1fr);}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;}
  .toc ul{columns:2;column-gap:2.5rem;}

  .room-thumb{width:104px;height:126px;border-radius:64px 64px 12px 12px;}
  .room-index a{grid-template-columns:5.2rem 1fr auto auto;column-gap:1.6rem;}
  .room-index .idx{grid-column:1;grid-row:1 / span 2;align-self:center;font-size:.95rem;}
  .room-index h3{grid-column:2;grid-row:1;align-self:end;}
  .room-index p{grid-column:2;grid-row:2;margin-top:.25rem;}
  .room-index .go{
    display:block;grid-column:3;grid-row:1 / span 2;align-self:center;
    font-family:var(--display);font-size:1.5rem;color:var(--terra-deep);
    transition:transform .2s ease;
  }
  .room-index .room-thumb{grid-column:4;grid-row:1 / span 2;}
  .room-index a:hover .go{transform:translateX(7px);}
}

@media (min-width:820px){
  .feature-card{grid-template-columns:.95fr 1.05fr;align-items:center;}
  .feature-media{margin:1.3rem 0 1.3rem 1.3rem;aspect-ratio:4/3.55;}
  .feature-body{padding:2.4rem 2.8rem;}
  .mission-grid{grid-template-columns:1.15fr .85fr;gap:3.2rem;align-items:center;}
}

@media (min-width:900px){
  /* header: brand left, 4-item nav right, single row */
  .header-inner{flex-wrap:nowrap;padding-block:1.05rem;}
  .nav-toggle-label{display:none;}
  .site-nav{flex-basis:auto;max-height:none;overflow:visible;}
  .site-nav > ul{
    display:flex;align-items:center;gap:2.1rem;padding:0;
  }
  .site-nav a,
  .nav-drop summary{
    padding:.35rem 0;border-bottom:none;
    font-size:.95rem;
    background:var(--squiggle) no-repeat left calc(100% + 1px) / 0% 6px;
    transition:background-size .25s ease, color .15s ease;
  }
  .site-nav a:hover,
  .nav-drop summary:hover,
  .site-nav a[aria-current="page"]{
    background-size:100% 6px;
  }
  .has-drop{position:relative;}
  .nav-drop .drop-panel{
    position:absolute;top:calc(100% + .85rem);right:-1rem;
    margin:0;padding:.55rem;border-left:none;
    min-width:22.5rem;
    background-color:var(--cream-bright);
    background-image:var(--grain);
    border-radius:16px;
    box-shadow:0 0 0 1px var(--hair), var(--shadow-lift);
  }
  .nav-drop .drop-panel::before{         /* little stitched top notch */
    content:"";position:absolute;top:-5px;right:2.6rem;
    width:10px;height:10px;transform:rotate(45deg);
    background:var(--cream-bright);
    border-left:1px solid var(--hair);border-top:1px solid var(--hair);
  }
  .drop-panel a{
    padding:.58rem .7rem;border-radius:10px;
    background:none;transition:background-color .15s ease, color .15s ease;
  }
  .drop-panel a:hover{background:var(--cream);color:var(--terra-deep);}
}

@media (min-width:980px){
  .section{padding-block:4.4rem;}
  .card-grid{grid-template-columns:repeat(3,1fr);}

  .hero{padding-block:3.6rem 3.4rem;}
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,4.5vw,4.2rem);}
  .hero-art{max-width:430px;margin:0 0 0 auto;}
  .hero-title{margin-top:1.1rem;}

  .manifesto{padding-block:3.2rem 3.6rem;}
  .manifesto-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center;}

  .guides{padding-block:3.2rem 4rem;}
  .mission{padding-block:.6rem 4.2rem;}
}

/* ---------- 15 · Utility page head (about · contact · legal) ---------- */
.page-hd{padding-block:2.8rem 0;}
.page-hd-grid{position:relative;display:grid;gap:2.6rem;align-items:center;}

.kicker-stitch{display:inline-flex;align-items:center;gap:.8rem;text-indent:0;}
.kicker-stitch::before{
  content:"";display:inline-block;width:44px;
  border-top:1.6px dashed rgba(196,102,63,.55);
}

.page-hd .crumbs{margin-bottom:1.4rem;}
.page-hd .kicker{margin-top:0;}
.page-hd h1{
  font-family:var(--display);font-weight:440;
  font-size:clamp(2.05rem,3vw + .8rem,3.1rem);line-height:1.1;
  letter-spacing:-.005em;margin-top:.75rem;max-width:20ch;
}
.page-hd .dek{margin:1.15rem 0 0;max-width:36rem;font-size:1.05rem;line-height:1.72;}
.page-hd .byline{margin-top:1.15rem;}

/* italic sage word with the hand-drawn terracotta squiggle beneath */
.em-squiggle{
  font-style:italic;color:var(--sage-deep);
  background:var(--squiggle) no-repeat left bottom / 100% 6px;
  padding-bottom:6px;
}

/* corner leaf sprig for heads without an image */
.hd-sprig{
  position:absolute;right:0;top:.2rem;
  width:52px;height:auto;pointer-events:none;
}

/* art column (about) — arch photo reuses .hero-art/.arch-frame */
.page-hd-art{margin-top:.4rem;}
.page-hd-art .arch-frame{aspect-ratio:5/5.4;}

.page-hd-wave{margin-top:2.4rem;}

@media (min-width:900px){
  .page-hd{padding-block:3.4rem 0;}
  .page-hd-grid.has-art{grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,4vw,4rem);}
  .hd-sprig{width:64px;right:.5rem;}
}

/* ---------- 16 · Guide pages (room guides) ---------- */
/* Guide titles run longer than utility-page titles — ease the size, widen the measure */
.guide-hd h1{
  font-size:clamp(1.85rem,2.2vw + .7rem,2.6rem);
  max-width:24ch;
}
.guide-hd .dek{max-width:34rem;}

/* hand-stitched "in this guide" box */
.guide-article .toc{
  background:var(--cream-bright);
  box-shadow:none;
  border:1.6px dashed rgba(196,102,63,.5);
  border-radius:18px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .hero-title .circled .scribble path{stroke-dashoffset:0;}
}

/* ---------- 17 · Guide skimmability: quick-five summary + section figures ---------- */

/* "the 5 you actually need" — scannable summary card */
.quick-five{
  background:var(--cream-bright);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px var(--hair), var(--shadow-soft);
  border-top:3px solid var(--terracotta);
  padding:1.45rem 1.7rem 1.55rem;
  margin-top:1.6rem;
}
.quick-five-kicker{
  font-size:.68rem;font-weight:800;
  letter-spacing:.24em;text-indent:.06em;text-transform:uppercase;
  color:var(--terra-deep);
}
.quick-five ol{list-style:none;margin-top:.9rem;counter-reset:qf;}
.quick-five li{
  counter-increment:qf;
  position:relative;padding-left:2.2rem;margin-top:.6rem;
  font-size:.97rem;line-height:1.6;
}
.quick-five li::before{
  content:counter(qf,decimal-leading-zero);
  position:absolute;left:.1rem;top:.18em;
  font-family:var(--display);font-weight:600;
  font-size:.8rem;letter-spacing:.05em;
  color:var(--terra-deep);
}
.quick-five li strong{color:var(--charcoal);}
.quick-five-note{
  margin-top:1rem;
  font-family:var(--display);font-style:italic;
  font-size:.88rem;color:var(--faint);
}

/* full-column section figure — arch corners; hides itself while the image file is missing */
.guide-figure{margin-top:2rem;}
.guide-figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:46px 46px 14px 14px;
  box-shadow:0 0 0 1px var(--hair), var(--shadow-soft);
  background:var(--card);
}

/* ---------- 18 · Inline "pick coming soon" chip (replaces the old promo-style pick-cards in guides; .pick-card itself still styles the contact-page card) ---------- */
.pick-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:.85rem;
  padding:.32rem .85rem .36rem;
  border:1.4px dashed rgba(196,102,63,.55);
  border-radius:999px;
  background:var(--cream-bright);
  font-size:.66rem;font-weight:800;
  letter-spacing:.16em;text-indent:.02em;text-transform:uppercase;
  color:var(--terra-deep);
  line-height:1.4;
}
.pick-chip::before{
  content:"";flex:none;
  width:.45rem;height:.45rem;border-radius:50%;
  background:var(--terracotta);opacity:.75;
}

/* ---------- 19 · Guide FAQ — stitched native-details accordion (matches the nav-drop pattern) ---------- */
.faq-list{border-top:1.6px dashed rgba(196,102,63,.45);}
.faq-item{border-bottom:1.6px dashed rgba(196,102,63,.45);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.1rem;
  padding:1.05rem .15rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  font-family:var(--serif);font-weight:500;
  font-size:1.07rem;line-height:1.4;color:var(--charcoal);
  transition:color .15s ease;
}
.faq-item summary:hover .faq-q{color:var(--terra-deep);}
.faq-chev{
  width:13px;height:13px;flex:none;
  color:var(--terra-deep);
  transition:transform .2s ease;
}
.faq-item[open] > summary .faq-chev{transform:rotate(180deg);}
.faq-item[open] > summary .faq-q{color:var(--terra-deep);}
.faq-a{padding:0 .15rem 1.2rem;}
.faq-a p{max-width:40rem;font-size:.97rem;line-height:1.7;}
.faq-a p + p{margin-top:.6rem;}
