/* Curated Nostalgia: parchment/teal/tomato/mustard/plum collage */
:root{
  --parchment:#f3ead8; --teal:#6d9b94; --tomato:#d4553a; --mustard:#d9a421;
  --plum:#4b2e4a; --ink:#33261f; --label:#fbf6ea;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Newsreader,Georgia,serif;background:var(--parchment);color:var(--ink);line-height:1.65;font-size:18px;
  background-image:radial-gradient(rgba(107,155,148,.09) 1px, transparent 1px);background-size:22px 22px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.frag-title{font-family:Bebas Neue,sans-serif;letter-spacing:.03em;font-weight:400}
h2,h3{text-transform:uppercase}
p,li,cite,figcaption{font-family:Newsreader,Georgia,serif}
.skip{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--tomato);outline-offset:2px}
.hdr{background:var(--label);border-bottom:3px double var(--plum)}
.hdr-in{max-width:1060px;margin:0 auto;padding:.85rem 1.15rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--plum)}
.brand-mark{display:inline-grid;place-items:center;width:42px;height:42px;background:var(--tomato);color:#fff;font-family:Bebas Neue,sans-serif;font-size:1.15rem;border:2px solid var(--plum);transform:rotate(-2deg)}
.brand-name{font-family:Bebas Neue,sans-serif;font-size:1.5rem}
.menu-toggle{position:absolute;opacity:0}
.menu-btn{display:none}
.links{display:flex;gap:.3rem;flex-wrap:wrap}
.links a{color:var(--plum);text-decoration:none;font-weight:600;padding:.6rem .75rem;min-height:48px;display:inline-flex;align-items:center;border-bottom:2px dotted transparent}
.links a:hover,.links a[aria-current]{border-bottom-color:var(--tomato)}
main{max-width:1060px;margin:0 auto;padding:0 1.15rem}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.72rem 1.6rem;text-decoration:none;font-weight:600;font-family:Newsreader,serif;margin:.35rem .55rem .35rem 0;border:2px solid var(--plum)}
.cta-primary{background:var(--tomato);color:#fff;border-color:var(--tomato);box-shadow:4px 4px 0 var(--plum)}
.cta-primary:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--plum)}
.cta-secondary{background:var(--label);color:var(--plum);box-shadow:4px 4px 0 var(--teal)}
.cta-ghost{background:transparent;color:var(--plum)}
.collage-hero{padding:2.6rem 0 1rem;position:relative}
.c1,.c2{background:var(--label);padding:.7rem .7rem 2.2rem;border:1px solid #d8cbb2;box-shadow:0 12px 26px rgba(51,38,31,.18)}
.c1{width:min(520px,86%);transform:rotate(-2deg)}
.c2{position:absolute;right:2%;top:52%;width:190px;transform:rotate(3deg)}
.rot-neg{transform:rotate(-2deg)}.rot-pos{transform:rotate(3deg)}
.oversized{clear:both;padding:3.4rem 0 1rem;font-size:clamp(1.7rem,4.6vw,2.7rem);line-height:1.25;max-width:56rem;font-family:Newsreader,serif;font-style:italic}
.oversized cite,.oversized span{font-style:normal}
cite{display:block;margin-top:.8rem;font-size:.95rem;color:var(--tomato);font-weight:600}
.fragments{padding:1.6rem 0}
.frag-title{font-size:clamp(2.6rem,7vw,4.4rem);color:var(--plum);margin-bottom:1rem;line-height:.95}
.fragments{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.frag-title{grid-column:1/-1}
.frag{background:var(--label);border:1px solid #d8cbb2;padding:1.3rem;box-shadow:3px 3px 0 rgba(107,155,148,.5)}
.frag:nth-child(odd){transform:rotate(-1deg)}
.frag:nth-child(even){transform:rotate(.8deg)}
.frag h2{color:var(--tomato);margin-bottom:.45rem;font-size:1.35rem}
.treats-index{padding:2.2rem 0;background:var(--teal);margin:1rem -1.15rem;padding-left:1.15rem;padding-right:1.15rem}
.treats-index h2{color:var(--label);margin-bottom:1rem}
.idx{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;max-width:640px}
.idx a{display:inline-flex;align-items:center;min-height:52px;background:var(--label);color:var(--plum);text-decoration:none;font-weight:600;padding:.7rem 1.1rem;border:2px solid var(--plum);width:100%;justify-content:space-between}
.roots-spread{display:grid;grid-template-columns:6fr 5fr;gap:2rem;align-items:center;padding:2.6rem 0}
.roots-spread img{border:6px solid var(--label);box-shadow:0 10px 22px rgba(51,38,31,.2);transform:rotate(-1deg)}
.roots-spread p{margin:.8rem 0 1rem}
.practical-card{background:var(--label);border:2px solid var(--plum);box-shadow:6px 6px 0 var(--mustard);max-width:30rem;padding:1.8rem;transform:rotate(-.5deg)}
.practical-card h2{color:var(--plum);margin-bottom:.6rem}
.social-footer-note{text-align:center;padding:2rem 0 1rem}
.textlink{color:var(--tomato);font-weight:600;text-decoration:none;border-bottom:2px solid var(--mustard)}
.page-head{padding:2.6rem 0 .4rem}
.page-head h1{font-size:clamp(2.4rem,5.5vw,3.4rem);color:var(--plum)}
.page-head p{margin-top:.4rem;font-style:italic}
.story-figure{margin:1.8rem 0;max-width:52rem}
.story-figure img{border:6px solid var(--label);box-shadow:0 10px 22px rgba(51,38,31,.2);width:100%}
figcaption{font-size:.85rem;color:#6f5b4d;margin-top:.6rem}
.big-quote{font-size:clamp(1.5rem,3.4vw,2.1rem);font-style:italic;max-width:44rem;margin:2.2rem auto;text-align:center;line-height:1.4}
.prose{max-width:44rem;margin:0 auto}
.prose h2{margin:1.9rem 0 .6rem;color:var(--tomato);font-size:1.7rem}
.prose p{margin-bottom:1rem}
.note{font-size:.92rem;font-style:italic;color:#6f5b4d}
.modules{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.module{background:var(--label);border:1px solid #d8cbb2;padding:1.5rem;box-shadow:3px 3px 0 rgba(217,164,33,.6)}
.module h2{font-size:1.5rem;margin-bottom:.45rem;color:var(--plum)}
.local-band{background:var(--label);border-left:6px solid var(--tomato);padding:1.8rem;margin:1.6rem auto;max-width:52rem}
.local-band blockquote{margin-top:.9rem;font-style:italic;font-size:1.2rem}
.close-cta{text-align:center;padding:2rem 0 3rem}
.follow-panel{background:var(--label);border:2px solid var(--plum);box-shadow:6px 6px 0 var(--teal);max-width:36rem;padding:2rem}
.visit-card{background:var(--label);border:2px solid var(--plum);box-shadow:6px 6px 0 var(--mustard);max-width:32rem;padding:2rem}
.map-embed iframe{width:100%;height:370px;border:2px solid var(--plum)}
.visit-strip{background:var(--plum);color:var(--parchment);text-align:center;padding:2.2rem;border-radius:2px;margin:2rem -1.15rem}
.visit-strip h2{color:var(--mustard)}
.visit-strip a{color:var(--parchment)}
.visit-strip .cta-primary{border-color:var(--mustard);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.footer{background:var(--plum);color:var(--parchment);margin-top:3rem;border-top:6px double var(--mustard)}
.foot-inner{max-width:1060px;margin:0 auto;padding:2.4rem 1.15rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot-name{font-family:Bebas Neue,sans-serif;font-size:1.3rem;display:flex;align-items:center;gap:.55rem}
.foot-mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--mustard)}
.footer a{color:var(--mustard);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer nav a{display:block;padding:.4rem 0}
@media(max-width:860px){
  /* flatten collage into semantic vertical order */
  .collage-hero{display:flex;flex-direction:column;gap:1.2rem}
  .c1{order:2;width:100%;transform:rotate(-1deg)}
  .c2{order:3;position:static;width:70%;transform:rotate(1.5deg);margin:0 auto}
  .oversized{order:1;padding:0 0 .4rem}
  .fragments{grid-template-columns:1fr}
  .idx{grid-template-columns:1fr}
  .roots-spread{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .frag{transform:none !important}
  .menu-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--plum);border:0;min-height:48px;padding:.4rem 1rem;color:#fff;font-weight:600;cursor:pointer;font-family:Newsreader,serif}
  .menu-toggle~.links{display:none;width:100%;flex-direction:column}
  .menu-toggle:checked~.links{display:flex}
  .practical-card{transform:none;max-width:100%}
}
.collage-cta{padding:0 0 .8rem}

/* Internal preview comparison pill. Client-facing controls retain their touch sizes. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
.preview-dock, .preview-dock * { font:inherit; letter-spacing:normal; text-transform:none; }
.preview-dock { position:fixed; inset:auto auto calc(16px + env(safe-area-inset-bottom)) 50%; z-index:100; width:max-content; max-width:calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right))); height:34px; margin:0; padding:0 8px; box-sizing:border-box; transform:translateX(-50%); border-radius:999px; background:#252525; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.24); font:500 11px/1.2 system-ui, sans-serif; }
.preview-dock-scroll { display:flex; align-items:center; gap:8px; height:100%; padding:2px 4px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.preview-dock-scroll::-webkit-scrollbar { display:none; }
.preview-designs { display:flex; align-items:center; gap:2px; }
.preview-group-label { display:inline-flex; align-items:center; margin-right:4px; color:#bdbdbd; }
.preview-design { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:28px; height:28px; padding:0 10px; box-sizing:border-box; border-radius:999px; color:#fff; text-decoration:none; white-space:nowrap; }
.preview-design:hover { background:rgba(255,255,255,.12); color:#fff; }
.preview-design.is-active { background:#BC2026; color:#fff; }
.preview-dock a:focus-visible { outline:2px solid #BC2026; outline-offset:-3px; }
@media (prefers-reduced-motion: reduce) { .preview-dock-scroll { scroll-behavior:auto !important; } }
