/*! AuntGo Adventures — shared design system.
 * Ported verbatim from Claude Design's .dc.html <style> blocks (union, deduped).
 * Palette: ink #1C3B37 · cream #FAF4E6 · terracotta #D9542B · teal #3C8C88 · Cat-Azul #1E8FD5 (rare).
 * Fonts loaded via Google Fonts in header. Do not re-derive tokens per page.
 */

html, body { margin:0; padding:0; }

body {
    background:#FAF4E6;
    color:#1C3B37;
    font-family:'Hanken Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

body::before {
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.5; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  }

::selection { background:#1E8FD5; color:#FAF4E6; }

@keyframes driftCar { 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-1.4%) rotate(-.5deg);} }

@keyframes driftCat { 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-2.2%) rotate(.6deg);} }

@keyframes pinpulse { 0%{ transform:scale(.7); opacity:.7;} 70%{ transform:scale(1.5); opacity:0;} 100%{ transform:scale(1.5); opacity:0;} }

/* ---- interactive buttons ---- */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease, background .3s ease, color .3s ease; }

.btn-primary{ background:#D9542B; color:#FAF4E6; border-color:#D9542B; box-shadow:0 12px 22px -12px rgba(217,84,43,.9); }

.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 30px -12px rgba(217,84,43,.95); }

.btn-secondary{ background:rgba(250,244,230,.6); color:#1C3B37; border-color:#1C3B37; }

.btn-secondary:hover{ transform:translateY(-3px); background:#1C3B37; color:#FAF4E6; box-shadow:0 16px 26px -14px rgba(28,59,55,.55); }

.btn .btn-ico{ transition:transform .35s cubic-bezier(.2,.85,.25,1); flex:none; }

.btn-ico--star{ animation:twinkle 3.4s ease-in-out infinite; transform-origin:center; }

.btn-primary:hover .btn-ico:not(.btn-ico--star){ transform:translateY(-2px); }

.btn-secondary:hover .btn-ico{ transform:translateY(-2px) rotate(-8deg); }

@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0deg); opacity:1; } 50%{ transform:scale(.78) rotate(10deg); opacity:.72; } }

@media (prefers-reduced-motion: reduce){ .btn-ico--star{ animation:none; } }

/* ---- featured card: stack + cat on small screens ---- */
  @media (max-width:820px){
    .featured-card{ grid-template-columns:1fr !important; }
    .featured-card .feat-cat{ width:34% !important; left:2px !important; bottom:-6px !important; max-width:190px; }
    /* single-column: poster mat (16px) stacks on the text panel — trim its top padding (spec_featured_card_spacing) */
    .featured-card .feat-text{ padding-top:6px !important; }
  }

.hassub{ position:relative; }

.hassub .submenu{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:10px; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:8px; box-shadow:0 14px 28px -12px rgba(28,59,55,.4); padding:6px; display:none; flex-direction:column; gap:2px; min-width:150px; z-index:60; }

.hassub:hover .submenu{ display:flex; }

.hassub .submenu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }

.hassub .submenu a{ text-decoration:none; color:#1C3B37; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:9px 12px; border-radius:5px; white-space:nowrap; }

.hassub .submenu a:hover{ background:#EFE4C8; color:#D9542B; }

/* ---- adventures carousel: start-aligned journey ---- */
  #adventures [data-carousel]{ gap:28px; padding:10px 4px 20px; scroll-snap-type:x mandatory; scroll-padding-left:4px; align-items:stretch; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Cpath d='M0 45 C 26 10 54 10 80 45 C 106 80 134 80 160 45' fill='none' stroke='%233C8C88' stroke-width='2.6' stroke-dasharray='2 10' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E"); background-size:160px 90px; background-repeat:repeat-x; background-position:left center; background-attachment:local; }

/* (removed two inert `#adventures [data-carousel] .adv-card` sizing rules — after Mile Zero moved out
   of the carousel the only `.adv-card` left is nested inside `.adv-cell` (not a flex container), so
   the flex/snap/max-width never applied; video cards size via the `.adv-cell` flex item.
   spec_home_milezero_above_carousel / spec_home_mobile_section_spacing.) */

/* ---- trail row: Mile Zero (trail-head) fixed-width on the left, draggable video carousel on the
   right (spec_home_milezero_above_carousel). Mile Zero is now a sibling of [data-carousel], not its
   first slot, so the carousel's first visible item is a real video card. ---- */
  #adventures .trail-row{ display:flex; gap:28px; align-items:stretch; }
  #adventures .trail-head{ flex:0 0 clamp(300px,32%,380px); }
  #adventures .trail-row [data-carousel]{ flex:1 1 auto; min-width:0; overflow-x:auto; }

/* ---- mobile (≤880px): stack the PARENT row so Mile Zero is full-width on top, while the video
   carousel stays HORIZONTAL and draggable below — not a vertical column that kills the drag
   (spec_home_milezero_above_carousel, revises spec_home_mobile_order_and_copy §1). ---- */
  @media (max-width:880px){
    #adventures .trail-row{ flex-direction:column; }
    #adventures .trail-head{ flex:0 0 auto; width:100%; }
    /* peek: each card ~85% of the carousel so the current card shows fully with ~15% of the next
       at the right edge (!important beats the inline flex on .adv-cell). spec_home_carousel_peek_and_drag. */
    #adventures [data-carousel] .adv-cell{ flex:0 0 85% !important; }
  }

/* touch-action:pan-x so horizontal swipes scroll the carousel NATIVELY (momentum + snap) instead of
   falling through to the custom pointer-drag; vertical gestures still scroll the page. The JS drag is
   mouse-only (see common.js initCarousels). spec_home_carousel_peek_and_drag. */
[data-carousel]{ scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x; }

[data-carousel]::-webkit-scrollbar{ display:none; }

[data-carousel].dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }

[data-carousel].dragging a{ pointer-events:none; }

.soc{ color:#3C8C88; display:inline-flex; transition:color .25s ease, transform .25s ease; }

.soc:hover{ color:#D9542B; transform:translateY(-2px); }

.lang-select{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#1C3B37; background:transparent; border:1.5px solid rgba(28,59,55,.22); border-radius:99px; padding:5px 9px; cursor:pointer; }

.play-badge{ transition:transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .35s ease; }

.adv-card:hover .play-badge, .feat-poster:hover .play-badge{ transform:scale(1.18); box-shadow:0 10px 22px -5px rgba(28,59,55,.45); }

@media (prefers-reduced-motion: reduce){ .play-badge{ transition:none; } }

.acc-row .acc-panel{ flex:1 1 0; transition:flex .55s cubic-bezier(.2,.85,.25,1); }

.acc-row .acc-panel:hover{ flex:4.4 1 0; }

.acc-row .acc-panel .acc-full{ opacity:0; transition:opacity .45s ease .08s; }

.acc-row .acc-panel:hover .acc-full{ opacity:1; }

/* (.acc-spine handwritten place name removed — the flag pill carries the place now.
   spec_home_fieldnotes_routing_and_simplify.) */

/* ---- mobile: tap-accordion. All panels start as slim collapsed bars (flag pill + dimmed art);
   a small JS toggle in common.js adds `.is-open` one at a time on tap. The desktop hover accordion
   above (lines ~117–123) is untouched. (spec_fieldnotes_mobile_accordion) ---- */
  @media (max-width:760px){
    .acc-row{ flex-direction:column; height:auto !important; }
    .acc-row .acc-panel{ flex:none !important; height:72px; transition:height .5s cubic-bezier(.2,.85,.25,1); }
    .acc-row .acc-panel .acc-full{ opacity:0; }
    /* desktop's :hover .acc-full{opacity:1} (line 129) lives outside the query and reveals the
       title on a still-collapsed slim bar — and :hover sticks after a tap. Cancel it at mobile
       width so only an expanded panel shows the title, clear of the pill. spec_home_fieldnote_title_overlap */
    .acc-row .acc-panel:hover .acc-full{ opacity:0; }
    .acc-row .acc-panel.is-open{ height:252px; }
    .acc-row .acc-panel.is-open .acc-full{ opacity:1; }
    .acc-row .acc-panel.is-open .acc-read{ display:inline-flex; }
  }

@media (prefers-reduced-motion: no-preference){
    img[data-drift="car"]{ animation:driftCar 7s ease-in-out infinite; }
    img[data-drift="cat"]{ animation:driftCat 5.5s ease-in-out infinite .4s; }
  }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease, background .3s ease, color .3s ease; }

.btn-primary:hover .btn-ico{ transform:translateY(-2px); }

.navlink{ text-decoration:none; color:#1C3B37; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding-bottom:3px; border-bottom:2px solid transparent; transition:color .25s ease, border-color .25s ease; }

.navlink:hover{ color:#D9542B; }

.navlink.active{ color:#D9542B; border-color:#D9542B; }

.hassub{ position:relative; display:inline-flex; }

.hassub .submenu a{ text-decoration:none; color:#1C3B37; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:9px 12px; border-radius:5px; white-space:nowrap; border-bottom:none; }

.feat-poster:hover .play-badge{ transform:scale(1.18); box-shadow:0 10px 22px -5px rgba(28,59,55,.45); }

.adv-card{ transition:transform .4s cubic-bezier(.2,.85,.25,1), box-shadow .4s ease; }

.adv-card:hover{ transform:translateY(-8px) rotate(0deg) !important; }

.read-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:#3C8C88; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; transition:gap .25s ease, color .25s ease; }

.read-link:hover{ color:#D9542B; gap:11px; }

.filter-chip{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; color:#6b7c74; background:transparent; border:1.5px solid rgba(28,59,55,.2); border-radius:99px; padding:8px 16px; cursor:pointer; transition:all .25s ease; display:inline-flex; align-items:center; gap:7px; }

.filter-chip:hover{ border-color:#3C8C88; color:#1C3B37; }

.filter-chip.active{ background:#1C3B37; border-color:#1C3B37; color:#FAF4E6; }

@media (max-width:680px){
    .adv-hero h1{ font-size:46px !important; }
    .topnav{ display:none !important; }
  }

@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } }

.poster-link:hover .play-badge{ transform:scale(1.12); box-shadow:0 12px 24px -5px rgba(28,59,55,.45); }

.navlink{ text-decoration:none; color:#1C3B37; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; transition:color .2s ease; }

.stopnav:hover{ transform:translateY(-3px); box-shadow:0 22px 34px -18px rgba(28,59,55,.4); }

.stopnav{ transition:transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .35s ease; }

@media (max-width:860px){ .twocol{ grid-template-columns:1fr !important; } .book-fold{ display:none !important; } }

html,body{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{ background:#FAF4E6; color:#1C3B37; font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"); }

::selection{ background:#1E8FD5; color:#FAF4E6; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease; box-sizing:border-box; }

.btn-secondary:hover{ transform:translateY(-3px); background:#1C3B37; color:#FAF4E6; }

@media (max-width:880px){ .topnav{ display:none !important; } }

.btn-primary:hover .btn-ico{ transform:translateX(3px); }

.clip{ break-inside:avoid; margin:0 0 30px; display:block; text-decoration:none; cursor:pointer; transition:transform .4s cubic-bezier(.2,.85,.25,1), filter .4s ease; will-change:transform; }

.clip:hover{ transform:translateY(-7px) rotate(0deg) !important; filter:drop-shadow(0 26px 34px rgba(28,59,55,.3)); }

@media (max-width:880px){ .topnav{ display:none !important; } .lb-grid{ grid-template-columns:1fr !important; } }

@media (max-width:720px){ .gal{ column-count:2 !important; } }

@media (max-width:480px){ .gal{ column-count:1 !important; } }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease, background .3s ease, color .3s ease; box-sizing:border-box; }

.trail{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#3C8C88; font-size:13px; font-weight:700; letter-spacing:.04em; transition:gap .25s ease, color .25s ease; }

.trail:hover{ color:#D9542B; gap:12px; }

@media (max-width:880px){ .topnav{ display:none !important; } .studies{ grid-template-columns:1fr !important; } .paintbox-grid{ grid-template-columns:1fr !important; } }

.btn{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease, background .3s ease, color .3s ease; }

@media (max-width:780px){ .mixcard-grid{ grid-template-columns:1fr !important; } }

.addr-input{ font-family:'Caveat',cursive; font-weight:600; font-size:23px; color:#1C3B37; background:transparent; border:none; border-bottom:1.5px dotted rgba(28,59,55,.45); padding:4px 2px; outline:none; width:100%; transition:border-color .25s ease; }

.addr-input::placeholder{ color:#bdb39a; }

.addr-input:focus{ border-color:#D9542B; }

.copybtn{ display:inline-flex; align-items:center; gap:8px; font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#3C8C88; background:rgba(60,140,136,.08); border:1.5px solid rgba(60,140,136,.4); border-radius:99px; padding:9px 16px; cursor:pointer; transition:all .25s ease; }

.copybtn:hover{ background:#3C8C88; color:#FAF4E6; border-color:#3C8C88; }

.pv-btn{ font-family:'Hanken Grotesk',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6b7c74; background:transparent; border:none; border-radius:99px; padding:6px 11px; cursor:pointer; transition:all .2s ease; white-space:nowrap; }

.pv-btn.active{ background:#1C3B37; color:#FAF4E6; }

@media (max-width:880px){
    .desk{ flex-direction:column !important; align-items:center !important; }
    .desk .pc-back{ margin:-22px 0 0 0 !important; }
    .postwrap{ grid-template-columns:1fr !important; }
    .topnav{ display:none !important; }
  }

/* ===== Post Office signup hero — flip postcard + above-the-fold CTA ===== */
.po-hero{ max-width:1180px; margin:0 auto; padding:36px 40px 8px; box-sizing:border-box; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }
.po-hero__card{ display:flex; flex-direction:column; align-items:center; }
.po-flip{ position:relative; width:100%; max-width:520px; margin:0 auto; padding:0; border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:6px; }
.po-flip:focus-visible{ outline:2px solid #3C8C88; outline-offset:8px; }
.po-flip__inner{ position:relative; width:100%; aspect-ratio:3/2; transition:transform .85s cubic-bezier(.2,.85,.25,1); transform-style:preserve-3d; container-type:inline-size; }
.po-flip.is-flipped .po-flip__inner{ transform:rotateY(180deg); }
.po-flip__face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:2px; }
.po-flip__face--back{ transform:rotateY(180deg); }
.po-flip__hint{ display:inline-flex; align-items:center; gap:8px; margin:20px 0 0; font-family:'Caveat',cursive; font-weight:600; font-size:18px; color:#9a8f76; }
@media (prefers-reduced-motion: reduce){ .po-flip__inner{ transition:none; } }
@media (max-width:880px){
    .po-hero{ grid-template-columns:1fr; gap:20px; padding:14px 22px 8px; }
    .po-flip{ max-width:300px; }
    .po-flip__hint{ margin-top:12px; font-size:16px; }
  }

/* ===== Post Room — sendable postcard piles (accordion) + card grid ===== */
.po-piles{ display:flex; flex-direction:column; gap:16px; }
.po-pile{ background:#FFFDF6; border:1px solid rgba(28,59,55,.12); border-radius:14px; overflow:hidden; }
.po-pile__head{ width:100%; display:flex; align-items:center; gap:18px; padding:18px 22px; background:none; border:none; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
.po-pile__head:focus-visible{ outline:2px solid #3C8C88; outline-offset:-3px; }
.po-pile__deck{ position:relative; flex:none; width:46px; height:34px; }
.po-pile__deck span{ position:absolute; inset:0; background:#FBF6EA; border:1px solid rgba(28,59,55,.2); border-radius:3px; box-shadow:0 2px 4px rgba(28,59,55,.12); }
.po-pile__deck span:nth-child(1){ transform:rotate(-7deg) translate(-3px,1px); }
.po-pile__deck span:nth-child(2){ transform:rotate(4deg) translate(2px,-1px); background:#FFFDF6; }
.po-pile__deck span:nth-child(3){ transform:rotate(-1deg); background:#FFFDF6; }
.po-pile__deck--mine span{ background:#EAF3F1; }
.po-pile__deck--mine span:nth-child(2),.po-pile__deck--mine span:nth-child(3){ background:#F4FAF8; }
.po-pile__meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.po-pile__title{ font-family:'Newsreader',serif; font-weight:600; font-size:20px; color:#1C3B37; line-height:1.05; }
.po-pile__sub{ font-size:12px; color:#9a8f76; }
.po-pile__cue{ flex:none; display:inline-flex; align-items:center; gap:6px; font-family:'Hanken Grotesk',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#3C8C88; }
.po-pile__cue svg{ width:14px; height:14px; transition:transform .3s ease; }
.po-pile[data-open="1"] .po-pile__cue svg{ transform:rotate(180deg); }
.po-pile__body{ padding:4px 22px 22px; }
.po-pile__empty{ margin:0; font-style:italic; color:#9a8f76; font-size:14px; }
.po-pile__grid{ display:flex; flex-wrap:wrap; gap:18px; }
.po-card{ flex:0 0 auto; width:176px; background:none; border:none; padding:0; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; transition:transform .25s cubic-bezier(.2,.85,.25,1); }
.po-card:hover{ transform:translateY(-4px); }
.po-card:focus-visible{ outline:2px solid #3C8C88; outline-offset:4px; }
.po-card__art{ width:100%; height:118px; border-radius:4px; overflow:hidden; background:#FBF6EA; display:flex; align-items:flex-end; box-shadow:0 12px 22px -10px rgba(28,59,55,.3); }
.po-card__cap{ margin:8px 2px 0; font-family:'Caveat',cursive; font-weight:700; font-size:16px; color:#1C3B37; line-height:1.12; }
.po-card__tag{ font-family:'Hanken Grotesk',sans-serif; font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9a8f76; }
@media (max-width:880px){
    .po-pile__head{ gap:13px; padding:15px 16px; }
    .po-pile__body{ padding:4px 16px 18px; }
    .po-pile__cue span{ display:none; }
    .po-card{ width:calc(50% - 9px); }
    .po-card__art{ height:96px; }
  }

/* ---- single Adventure narrative (the_content) — matches the ported Snail Mask story ---- */
.adv-story{ font-size:16.5px; line-height:1.85; color:#3c4f49; }
.adv-story > p{ margin:0 0 18px; }
.adv-story > p:first-of-type::first-letter{ float:left; font-family:'Newsreader',serif; font-weight:600; font-size:62px; line-height:.74; color:#D9542B; padding:6px 12px 0 0; }
.adv-story h2,.adv-story h3{ font-family:'Newsreader',serif; font-weight:500; color:#1C3B37; line-height:1.05; }
.adv-story blockquote{ margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid #D9542B; font-family:'Newsreader',serif; font-style:italic; font-size:24px; line-height:1.4; color:#1C3B37; }
.adv-story img{ max-width:100%; height:auto; }
.adv-story a{ color:#D9542B; }

/* ===== Shared-header account indicator ===== */
.ago-acct{ position:relative; display:inline-flex; }
.ago-acct__btn{ border:none; background:transparent; padding:0; cursor:pointer; display:inline-flex; }
.ago-acct__avatar{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:13px; color:#fff; background:#3C8C88; border:1.5px solid rgba(28,59,55,.12); box-shadow:0 2px 6px rgba(28,59,55,.18); transition:transform .2s ease, background .2s ease; }
.ago-acct__btn:hover .ago-acct__avatar{ transform:translateY(-1px); background:#2f726f; }
.ago-acct__avatar--guest{ background:transparent; color:#3C8C88; border-color:rgba(28,59,55,.22); box-shadow:none; }
.ago-acct__btn:hover .ago-acct__avatar--guest{ color:#D9542B; border-color:rgba(217,84,43,.5); }
.ago-acct__menu{ position:absolute; top:calc(100% + 10px); right:0; background:#FFFDF6; border:1px solid rgba(28,59,55,.14); border-radius:10px; box-shadow:0 16px 30px -12px rgba(28,59,55,.4); padding:8px; min-width:172px; z-index:70; display:flex; flex-direction:column; gap:2px; }
.ago-acct__menu[hidden]{ display:none; }
.ago-acct__who{ margin:2px 6px 6px; font-size:11px; line-height:1.35; color:#9a8f76; }
.ago-acct__who strong{ color:#1C3B37; font-size:13px; }
.ago-acct__item{ text-decoration:none; color:#1C3B37; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:9px 11px; border-radius:6px; }
.ago-acct__item:hover{ background:#EFE4C8; color:#D9542B; }
.ago-acct__item--out{ color:#9a8f76; }
/* header sign-in modal */
.ago-signin[hidden]{ display:none; }
.ago-signin{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.ago-signin__backdrop{ position:absolute; inset:0; background:rgba(28,59,55,.42); }
.ago-signin__card{ position:relative; width:min(420px,94vw); background:#FBF1DC; border-radius:8px; box-shadow:0 30px 60px rgba(0,0,0,.4); padding:30px 32px; transform:rotate(-.4deg); }
.ago-signin__x{ position:absolute; top:8px; right:14px; border:none; background:none; font-size:24px; line-height:1; color:#9a8f76; cursor:pointer; }
.ago-signin__eyebrow{ margin:0; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#D9542B; }
.ago-signin__title{ margin:6px 0 0; font-family:'Newsreader',serif; font-weight:600; font-size:26px; color:#1C3B37; }
.ago-signin__lede{ margin:8px 0 0; font-size:13.5px; line-height:1.55; color:#5c6f68; }
.ago-signin__input{ width:100%; margin-top:16px; padding:11px 13px; border:1px solid rgba(28,59,55,.18); border-radius:8px; background:#FFFDF6; font-size:14px; box-sizing:border-box; }
.ago-signin__consent{ display:flex; gap:8px; align-items:flex-start; margin-top:11px; font-size:11.5px; line-height:1.45; color:#9a8f76; }
.ago-signin__submit{ margin-top:15px; width:100%; padding:12px; border:none; border-radius:8px; background:#D9542B; color:#fff; font-weight:700; font-size:13px; cursor:pointer; }
.ago-signin__submit:hover{ background:#c0431f; }
.ago-signin__submit:disabled{ opacity:.6; cursor:default; }
.ago-signin__msg{ margin:10px 0 0; font-size:12.5px; color:#3C8C88; min-height:1em; }
.ago-signin__consent-msg{ display:block; margin-top:6px; font-size:12px; color:#D9542B; }

/* ============================================================
 * RESPONSIVE LAYER (shared) — added 2026-06-26.
 * Mobile-nav hamburger + drawer, grid stacking for blocks that
 * lack their own stacking rule, and gutter scale-down. Breakpoint
 * 880px matches where .topnav already hides; no new tokens. The
 * account avatar stays in the header bar (single-bound widget).
 * ============================================================ */

/* hamburger button — hidden on desktop, shown ≤880px */
.nav-toggle{ display:none; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1.5px solid rgba(28,59,55,.2); border-radius:10px; background:rgba(250,244,230,.6); color:#1C3B37; cursor:pointer; flex:none; }
.nav-toggle:hover{ border-color:#D9542B; color:#D9542B; }
.nav-toggle__bars{ display:flex; flex-direction:column; gap:4px; width:18px; }
.nav-toggle__bars span{ display:block; height:2px; background:currentColor; border-radius:2px; }

/* drawer shell — kept hidden until opened (JS removes [hidden]) */
.ago-mobnav{ display:none; position:fixed; inset:0; z-index:300; }
.ago-mobnav[hidden]{ display:none; }
.ago-mobnav__backdrop{ position:absolute; inset:0; background:rgba(28,59,55,.42); opacity:0; transition:opacity .3s ease; }
.ago-mobnav__panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); box-sizing:border-box; padding:22px 26px 30px; background:#FBF1DC; box-shadow:-18px 0 50px -20px rgba(28,59,55,.5); display:flex; flex-direction:column; overflow-y:auto; transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.85,.25,1); }
body.ago-nav-open{ overflow:hidden; }
.ago-nav-open .ago-mobnav__backdrop{ opacity:1; }
.ago-nav-open .ago-mobnav__panel{ transform:translateX(0); }
.ago-mobnav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ago-mobnav__brand{ font-family:'Baloo 2',cursive; font-weight:700; font-size:22px; color:#1C3B37; }
.ago-mobnav__x{ border:none; background:none; font-size:30px; line-height:1; color:#1C3B37; cursor:pointer; padding:0 4px; }
.ago-mobnav__links{ list-style:none; margin:0; padding:0; }
.ago-mobnav__links > li{ border-bottom:1px solid rgba(28,59,55,.1); }
.ago-mobnav__links a{ display:block; text-decoration:none; color:#1C3B37; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:15px 2px; }
.ago-mobnav__links a:hover, .ago-mobnav__links a.active{ color:#D9542B; }
.ago-mobnav__links a.ago-mobnav__sub{ font-size:11px; font-weight:600; letter-spacing:.13em; color:#5c6f68; padding:8px 2px 8px 16px; }
.ago-mobnav__foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ago-mobnav__social{ display:flex; align-items:center; gap:16px; }
.ago-mobnav__lang{ display:flex; align-items:center; gap:6px; }
@media (prefers-reduced-motion: reduce){
  .ago-mobnav__panel, .ago-mobnav__backdrop{ transition:none; }
}

/* ≤880px: reveal the hamburger, collapse the inline header controls behind it */
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; }
  .hdr-social, .hdr-lang, .hdr-div{ display:none !important; }
  .ago-mobnav{ display:block; }
  .ago-mobnav[hidden]{ display:none; }
}

/* grids that have no stacking class of their own */
@media (max-width:880px){
  .ago-stack{ grid-template-columns:1fr !important; }
  [data-grid]{ grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)) !important; }
}
@media (max-width:680px){
  .comp-grid, .ago-cards3{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:460px){
  .ago-cards3{ grid-template-columns:1fr !important; }
}

/* scale the 40px gutters down on phones (overrides the inline section paddings) */
@media (max-width:600px){
  body.auntgo main > header,
  body.auntgo main > footer,
  body.auntgo main section{ padding-left:20px !important; padding-right:20px !important; }
}

/* ============================================================
 * LANDING LOOK-AND-FEEL PASS — added 2026-06-26.
 * Hero legibility, consistent card location-pill, field-note
 * scrim (the "Drawn Along the Way" accordion), Paintbox teaser.
 * ============================================================ */

/* 1 — hero headline legibility: a paper-glow halo guarantees AA over ANY
 *     part of the illustration; the parchment scrim softens the busy areas. */
.hero-copy h1,
.hero-copy .hero-sub{
  text-shadow:0 0 2px rgba(250,244,230,.96), 0 0 9px rgba(250,244,230,.92), 0 0 22px rgba(250,244,230,.72);
}
@media (max-width:760px){
  /* widen + lift the copy into the calmer sky so it stops over-wrapping on phones */
  .hero-copy{ width:86% !important; left:50% !important; top:8% !important; transform:translateX(-50%) !important; }
}

/* 5 + 6 — one location pill position everywhere: top-left, fixed inset.
 *     .adv-badge keeps the status flag (Latest/New) in the opposite corner. */
.adv-pill{ position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  background:rgba(250,244,230,.96); padding:4px 9px 4px 6px; border-radius:99px; box-shadow:0 3px 8px rgba(28,59,55,.28); }
.adv-pill > span{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#1C3B37; white-space:nowrap; }
.adv-badge{ position:absolute; top:10px; right:10px; z-index:2; }

/* 7 + 8 — field-note panels: one uniform bottom scrim band (replaces the
 *     per-panel inline gradients) so titles stay AA-legible without burying the
 *     art, plus a focal crop. The accordion hover-expand itself is unchanged. */
.acc-panel img{ object-position:center 42%; }
.acc-panel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(28,59,55,.92) 0%, rgba(28,59,55,.6) 26%, rgba(28,59,55,.14) 50%, rgba(28,59,55,0) 66%); }
.acc-panel .adv-pill, .acc-panel .acc-full{ z-index:2; }
.acc-full__title{ text-shadow:0 1px 6px rgba(28,59,55,.5); }
/* "Read the field note" affordance: hidden by default (incl. desktop hover) — shown only inside an
   open mobile panel via the ≤760px `.is-open` rule above. spec_fieldnotes_mobile_accordion. */
.acc-read{ display:none; margin-top:13px; color:#FAF4E6; }
/* (the old "all panels expanded as 240px cards" mobile rule was replaced by the tap-accordion;
   collapsed + `.is-open` states live in the ≤760px block above. spec_fieldnotes_mobile_accordion) */

/* ---- Paintbox mini-mixer teaser (Sketchbook, above the field notes) ---- */
.pbx-teaser{ position:relative; background:#EFE4C8; border:1px solid rgba(28,59,55,.12); border-radius:6px;
  padding:30px 34px; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; overflow:hidden; }
.pbx-teaser__lede{ min-width:0; }
.pbx-teaser__eyebrow{ margin:0 0 11px; font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:#D9542B; }
.pbx-teaser__title{ margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:clamp(26px,3vw,38px); line-height:1.04; color:#1C3B37; }
.pbx-teaser__title em{ font-style:italic; color:#3C8C88; }
.pbx-teaser__note{ margin:13px 0 0; max-width:30rem; font-size:14.5px; line-height:1.65; color:#5c6f68; }
.pbx-teaser__cta{ margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pbx-teaser__free{ font-family:'Caveat',cursive; font-weight:600; font-size:17px; color:#9a8f76; }
.pbx-mixer{ justify-self:center; width:100%; max-width:330px; background:#3A2E22; border-radius:11px; padding:16px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4), 0 14px 26px -14px rgba(28,59,55,.5); transform:rotate(1.5deg); }
.pbx-mixer__pans{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.pbx-pan{ width:42px; height:42px; border:2px solid rgba(255,255,255,.55); cursor:pointer; padding:0;
  border-radius:22% 20% 24% 18%/20% 24% 18% 22%; box-shadow:inset -2px -3px 6px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease; }
.pbx-pan:hover{ transform:translateY(-2px); }
.pbx-pan[aria-pressed="true"]{ box-shadow:inset -2px -3px 6px rgba(0,0,0,.28), 0 0 0 2px #FAF4E6, 0 0 0 4px #D9542B; }
.pbx-mixer__well{ margin-top:14px; display:flex; align-items:center; gap:13px; }
.pbx-swatch{ width:64px; height:64px; flex:none; border-radius:14px; background:#7a6f5d;
  border:3px solid rgba(255,255,255,.5); box-shadow:inset 0 2px 6px rgba(0,0,0,.3); transition:background .25s ease; }
.pbx-mixer__read{ min-width:0; }
.pbx-mixer__hint{ margin:0; font-family:'Caveat',cursive; font-weight:700; font-size:16px; color:#C9B79A; line-height:1.15; }
.pbx-mixer__names{ margin:3px 0 0; font-size:10.5px; line-height:1.4; color:#9d8f76; min-height:1.4em; }
.pbx-mixer__reset{ margin-left:auto; flex:none; border:none; background:rgba(250,244,230,.12); color:#C9B79A;
  font-family:'Hanken Grotesk',sans-serif; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  border-radius:99px; padding:6px 11px; cursor:pointer; }
.pbx-mixer__reset:hover{ background:rgba(250,244,230,.22); }
@media (max-width:760px){
  .pbx-teaser{ grid-template-columns:1fr; gap:24px; }
  .pbx-mixer{ transform:none; max-width:300px; }
}

/* ---- Sketchbook bottom "Continue exploring" continuation ---- */
.sk-continue{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:760px){ .sk-continue{ grid-template-columns:1fr; gap:18px; } }