/* ---- tokens.css ---- */
/* Design tokens: colours sampled from the mockup, type, spacing. */

@font-face {
  font-family: 'Lora';
  src: url(/assets/fonts/lora-latin-var.woff2?v=fcfdbcb885) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url(/assets/fonts/caveat-latin-var.woff2?v=8a01467ac9) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Allison';
  src: url(/assets/fonts/allison-latin-400.woff2?v=34788affae) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url(/assets/fonts/josefin-sans-latin-var.woff2?v=0ff5ba86b1) format('woff2');
  font-weight: 100 700;
  font-display: swap;
}

:root {
  /* Paper & surfaces */
  --paper: #F6EFE2;          /* main background */
  --paper-deep: #F0E6D3;     /* card labels, tags */
  --kraft: #EDE2CC;          /* alternate band */
  --kraft-edge: #E2D3B7;
  --note-pink: #F4A7B5;
  --note-cream: #F3EBD6;
  --white: #FFFFFF;

  /* Brand */
  --teal: #1D4F5E;           /* headings, buttons */
  --teal-dark: #153C48;
  --teal-logo: #1E86A4;
  --navy: #183F51;           /* Art & Music panel (sampled; brief: #1F3D52) */
  --pink: #EB6A86;           /* hearts, doodles, accents (sampled; brief: #E9677D) */
  --pink-btn: #C84A69;       /* button backgrounds: white text passes WCAG AA (4.53:1) */
  --pink-btn-hover: #B73A5B;
  --green: #5DA845;
  --green-light: #BFE3A7;    /* "Smithville Soul." on the hero */
  --mustard: #F2B632;
  --blue: #2F7DC1;
  --footer: #1D2C23;         /* sampled; brief: #1F2A24 */

  /* Text */
  --ink: #2A2A2A;
  --ink-soft: #4A4640;
  --muted: #5B5750;

  /* Type */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-script: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --font-signature: 'Allison', 'Segoe Script', 'Brush Script MT', cursive; /* "Smithville Soul." */
  --font-label: 'Josefin Sans', 'Century Gothic', 'Futura', system-ui, sans-serif;
  /* Nav follows the mockup (serif, title case). Swap to var(--font-label) for caps. */
  --font-nav: var(--font-serif);
  --label-spacing: 0.08em;

  /* Layout */
  --container: 1440px;
  /* Height of the compact sticky header + its torn edge + breathing room.
     Sections use it as scroll-margin-top so the header never covers a heading. */
  --sticky-offset: 100px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --radius-pill: 999px;

  /* Shadows */
  --shadow-photo: 0 1px 2px rgba(40, 30, 15, 0.18), 0 6px 14px rgba(40, 30, 15, 0.16);
  --shadow-card: 0 1px 2px rgba(40, 30, 15, 0.12), 0 8px 18px rgba(40, 30, 15, 0.12);
  --shadow-lift: 0 2px 4px rgba(40, 30, 15, 0.14), 0 16px 30px rgba(40, 30, 15, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 280ms;

  /* Torn-paper edge tiles (generated by scripts/tools/generate-shapes.mjs).
     Black = keep; used as mask-image so any colour/texture shows through. */
  --torn-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0 8.3 L3.3 10.1 L8.5 8.4 L15 11.5 L20.2 12.4 L26 14.2 L29.5 11.8 L35.7 11.4 L38.1 10.3 L42.9 9.8 L49.7 5.5 L54.8 10.8 L60.9 10.5 L66.4 11.4 L73.8 7.1 L77.9 9.1 L81.8 5.6 L85.6 7 L89.4 9.3 L94.7 6.7 L102 0.7 L105.7 2.8 L110.7 3.1 L113.9 7 L116.2 5.4 L120.3 8.8 L127.8 9.3 L130.8 8.7 L134.5 8.2 L139 8.1 L144.2 10.3 L147.6 12.3 L152.4 12.2 L158.2 9.9 L163.3 8.1 L169.4 10.5 L173.8 10.6 L177.3 11.4 L181.4 11.2 L185.8 13.8 L193 8.1 L199.9 5.5 L204.4 5.2 L206.9 9.3 L210.2 7.3 L213 6 L218.6 3.1 L226.1 5.4 L233.5 6.6 L240.9 9.1 L244.6 6.2 L248.1 6.6 L250.1 9.1 L253.5 8.9 L258.4 7.5 L261.8 8.2 L265.2 5.8 L272.6 6.1 L277.5 6.1 L285 9.3 L292.5 7.3 L299.9 10.9 L307.8 13.6 L313.8 9.9 L317.2 7.9 L322.6 5.1 L329.2 7.8 L335.5 7.1 L337.7 5.1 L345.2 4.2 L351.3 7.7 L353.5 7.8 L360.7 9.9 L368.4 9.3 L372.9 5.5 L379.3 6.4 L383.7 2.3 L388.1 6.2 L393.5 5.3 L400 8.3 L400 16 Z'/%3E%3C/svg%3E");
  --torn-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0 5.3 L5.8 6.2 L11.4 12.6 L14.9 9.7 L20.7 8.8 L28.1 10.9 L34.5 9.9 L37.2 10 L40.2 9.6 L44.6 12.2 L49.2 8.2 L54.4 8.1 L56.8 8.4 L63.2 7.7 L69.5 6.3 L71.6 8.8 L79.5 8.1 L86.9 5.4 L94.2 7.5 L100.2 4.5 L106 3.7 L113 4.7 L118.1 2.4 L123.6 6.4 L126.6 4.7 L128.8 10.5 L135.4 11 L140.4 9.7 L147.5 8 L151.1 12.3 L156.7 11.7 L162.9 11.5 L167.1 10.5 L174.6 10.5 L179.9 8.1 L182.3 9.9 L185.4 7.1 L191.9 12.3 L194.2 13.8 L197.3 10.7 L203.1 8.7 L207.8 5.9 L211.2 5.8 L214.6 7.7 L220.5 6.9 L225.1 4.3 L231.8 4 L238.4 4.7 L244.4 5.9 L250.7 6.7 L257.7 7.5 L264.2 7.8 L266.2 10.5 L272.4 5.8 L277.2 5 L283.5 9.4 L289.7 8 L295.8 9.3 L300.6 7.4 L307 12.9 L313.6 10.1 L319.8 12.5 L327.3 9.8 L329.5 9.1 L335.5 5.9 L341.7 3.2 L345.5 3.6 L348.4 6 L351 5.4 L357.5 5.4 L359.9 6.6 L362.5 6.4 L368.1 8.5 L375.2 6.6 L378.8 9.3 L381.9 8.6 L385.1 8.2 L388.3 6.9 L394.4 2.4 L400 5.3 L400 16 Z'/%3E%3C/svg%3E");
  --torn-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16 L0 7.1 L4.4 10.5 L10.5 12.7 L13.7 11.3 L19 14.4 L23.5 9.4 L28 8.1 L32.7 8.4 L39.2 11.7 L44.9 8.9 L52.9 7.8 L55.6 9.8 L58.6 6.3 L65 7.5 L69.5 8 L74.2 12.3 L80.4 9.7 L85.4 5.9 L92.7 1.1 L95.7 2.9 L99.4 4.1 L104.9 5.2 L108 5.9 L113.5 8.6 L116.8 8.2 L120.5 6.9 L123.8 7.8 L128.7 7.4 L136 8.1 L143.9 9.2 L151.6 5.2 L157.1 8.8 L164.5 9.8 L172.4 13.3 L176.2 11.6 L178.4 10.5 L183.2 10.1 L191.1 8.7 L198.9 8.7 L202.4 10.1 L206.8 5.9 L209.8 6.6 L213.7 5.4 L220.6 6.7 L228.4 4.8 L232.4 8.6 L239.3 6.8 L245.8 7.8 L249.6 7.5 L252.4 5.5 L256.3 7.3 L262.3 5.9 L267.8 6 L271.5 8.1 L275.5 6.8 L278 9.2 L281.1 10.4 L285.3 12.4 L287.7 13.1 L295.2 10.4 L298.3 11.4 L300.3 12.7 L304 12.8 L310.5 12.1 L315.1 11.5 L320.4 11.3 L325.1 6.5 L329.5 6.5 L335.1 3.6 L341.4 5.9 L346.9 5.7 L352.9 8 L357.7 5.5 L365.2 7.6 L369.4 6.7 L372.3 4.3 L379 5.7 L382.7 5.8 L387.6 5.8 L392.6 5.7 L400 7.1 L400 16 Z'/%3E%3C/svg%3E");
  --torn-a-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 16)' d='M0 16 L0 8.3 L3.3 10.1 L8.5 8.4 L15 11.5 L20.2 12.4 L26 14.2 L29.5 11.8 L35.7 11.4 L38.1 10.3 L42.9 9.8 L49.7 5.5 L54.8 10.8 L60.9 10.5 L66.4 11.4 L73.8 7.1 L77.9 9.1 L81.8 5.6 L85.6 7 L89.4 9.3 L94.7 6.7 L102 0.7 L105.7 2.8 L110.7 3.1 L113.9 7 L116.2 5.4 L120.3 8.8 L127.8 9.3 L130.8 8.7 L134.5 8.2 L139 8.1 L144.2 10.3 L147.6 12.3 L152.4 12.2 L158.2 9.9 L163.3 8.1 L169.4 10.5 L173.8 10.6 L177.3 11.4 L181.4 11.2 L185.8 13.8 L193 8.1 L199.9 5.5 L204.4 5.2 L206.9 9.3 L210.2 7.3 L213 6 L218.6 3.1 L226.1 5.4 L233.5 6.6 L240.9 9.1 L244.6 6.2 L248.1 6.6 L250.1 9.1 L253.5 8.9 L258.4 7.5 L261.8 8.2 L265.2 5.8 L272.6 6.1 L277.5 6.1 L285 9.3 L292.5 7.3 L299.9 10.9 L307.8 13.6 L313.8 9.9 L317.2 7.9 L322.6 5.1 L329.2 7.8 L335.5 7.1 L337.7 5.1 L345.2 4.2 L351.3 7.7 L353.5 7.8 L360.7 9.9 L368.4 9.3 L372.9 5.5 L379.3 6.4 L383.7 2.3 L388.1 6.2 L393.5 5.3 L400 8.3 L400 16 Z'/%3E%3C/svg%3E");
  --torn-b-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 16)' d='M0 16 L0 5.3 L5.8 6.2 L11.4 12.6 L14.9 9.7 L20.7 8.8 L28.1 10.9 L34.5 9.9 L37.2 10 L40.2 9.6 L44.6 12.2 L49.2 8.2 L54.4 8.1 L56.8 8.4 L63.2 7.7 L69.5 6.3 L71.6 8.8 L79.5 8.1 L86.9 5.4 L94.2 7.5 L100.2 4.5 L106 3.7 L113 4.7 L118.1 2.4 L123.6 6.4 L126.6 4.7 L128.8 10.5 L135.4 11 L140.4 9.7 L147.5 8 L151.1 12.3 L156.7 11.7 L162.9 11.5 L167.1 10.5 L174.6 10.5 L179.9 8.1 L182.3 9.9 L185.4 7.1 L191.9 12.3 L194.2 13.8 L197.3 10.7 L203.1 8.7 L207.8 5.9 L211.2 5.8 L214.6 7.7 L220.5 6.9 L225.1 4.3 L231.8 4 L238.4 4.7 L244.4 5.9 L250.7 6.7 L257.7 7.5 L264.2 7.8 L266.2 10.5 L272.4 5.8 L277.2 5 L283.5 9.4 L289.7 8 L295.8 9.3 L300.6 7.4 L307 12.9 L313.6 10.1 L319.8 12.5 L327.3 9.8 L329.5 9.1 L335.5 5.9 L341.7 3.2 L345.5 3.6 L348.4 6 L351 5.4 L357.5 5.4 L359.9 6.6 L362.5 6.4 L368.1 8.5 L375.2 6.6 L378.8 9.3 L381.9 8.6 L385.1 8.2 L388.3 6.9 L394.4 2.4 L400 5.3 L400 16 Z'/%3E%3C/svg%3E");
  --torn-c-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 16)' d='M0 16 L0 7.1 L4.4 10.5 L10.5 12.7 L13.7 11.3 L19 14.4 L23.5 9.4 L28 8.1 L32.7 8.4 L39.2 11.7 L44.9 8.9 L52.9 7.8 L55.6 9.8 L58.6 6.3 L65 7.5 L69.5 8 L74.2 12.3 L80.4 9.7 L85.4 5.9 L92.7 1.1 L95.7 2.9 L99.4 4.1 L104.9 5.2 L108 5.9 L113.5 8.6 L116.8 8.2 L120.5 6.9 L123.8 7.8 L128.7 7.4 L136 8.1 L143.9 9.2 L151.6 5.2 L157.1 8.8 L164.5 9.8 L172.4 13.3 L176.2 11.6 L178.4 10.5 L183.2 10.1 L191.1 8.7 L198.9 8.7 L202.4 10.1 L206.8 5.9 L209.8 6.6 L213.7 5.4 L220.6 6.7 L228.4 4.8 L232.4 8.6 L239.3 6.8 L245.8 7.8 L249.6 7.5 L252.4 5.5 L256.3 7.3 L262.3 5.9 L267.8 6 L271.5 8.1 L275.5 6.8 L278 9.2 L281.1 10.4 L285.3 12.4 L287.7 13.1 L295.2 10.4 L298.3 11.4 L300.3 12.7 L304 12.8 L310.5 12.1 L315.1 11.5 L320.4 11.3 L325.1 6.5 L329.5 6.5 L335.1 3.6 L341.4 5.9 L346.9 5.7 L352.9 8 L357.7 5.5 L365.2 7.6 L369.4 6.7 L372.3 4.3 L379 5.7 L382.7 5.8 L387.6 5.8 L392.6 5.7 L400 7.1 L400 16 Z'/%3E%3C/svg%3E");
  /* vertical edge (right side of a panel) */
  --torn-side: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 400' preserveAspectRatio='none'%3E%3Cpath transform='matrix(0 1 -1 0 16 0)' d='M0 16 L0 5.3 L5.8 6.2 L11.4 12.6 L14.9 9.7 L20.7 8.8 L28.1 10.9 L34.5 9.9 L37.2 10 L40.2 9.6 L44.6 12.2 L49.2 8.2 L54.4 8.1 L56.8 8.4 L63.2 7.7 L69.5 6.3 L71.6 8.8 L79.5 8.1 L86.9 5.4 L94.2 7.5 L100.2 4.5 L106 3.7 L113 4.7 L118.1 2.4 L123.6 6.4 L126.6 4.7 L128.8 10.5 L135.4 11 L140.4 9.7 L147.5 8 L151.1 12.3 L156.7 11.7 L162.9 11.5 L167.1 10.5 L174.6 10.5 L179.9 8.1 L182.3 9.9 L185.4 7.1 L191.9 12.3 L194.2 13.8 L197.3 10.7 L203.1 8.7 L207.8 5.9 L211.2 5.8 L214.6 7.7 L220.5 6.9 L225.1 4.3 L231.8 4 L238.4 4.7 L244.4 5.9 L250.7 6.7 L257.7 7.5 L264.2 7.8 L266.2 10.5 L272.4 5.8 L277.2 5 L283.5 9.4 L289.7 8 L295.8 9.3 L300.6 7.4 L307 12.9 L313.6 10.1 L319.8 12.5 L327.3 9.8 L329.5 9.1 L335.5 5.9 L341.7 3.2 L345.5 3.6 L348.4 6 L351 5.4 L357.5 5.4 L359.9 6.6 L362.5 6.4 L368.1 8.5 L375.2 6.6 L378.8 9.3 L381.9 8.6 L385.1 8.2 L388.3 6.9 L394.4 2.4 L400 5.3 L400 16 Z'/%3E%3C/svg%3E");
  --torn-side-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 400' preserveAspectRatio='none'%3E%3Cpath transform='matrix(0 1 1 0 0 0)' d='M0 16 L0 5.3 L5.8 6.2 L11.4 12.6 L14.9 9.7 L20.7 8.8 L28.1 10.9 L34.5 9.9 L37.2 10 L40.2 9.6 L44.6 12.2 L49.2 8.2 L54.4 8.1 L56.8 8.4 L63.2 7.7 L69.5 6.3 L71.6 8.8 L79.5 8.1 L86.9 5.4 L94.2 7.5 L100.2 4.5 L106 3.7 L113 4.7 L118.1 2.4 L123.6 6.4 L126.6 4.7 L128.8 10.5 L135.4 11 L140.4 9.7 L147.5 8 L151.1 12.3 L156.7 11.7 L162.9 11.5 L167.1 10.5 L174.6 10.5 L179.9 8.1 L182.3 9.9 L185.4 7.1 L191.9 12.3 L194.2 13.8 L197.3 10.7 L203.1 8.7 L207.8 5.9 L211.2 5.8 L214.6 7.7 L220.5 6.9 L225.1 4.3 L231.8 4 L238.4 4.7 L244.4 5.9 L250.7 6.7 L257.7 7.5 L264.2 7.8 L266.2 10.5 L272.4 5.8 L277.2 5 L283.5 9.4 L289.7 8 L295.8 9.3 L300.6 7.4 L307 12.9 L313.6 10.1 L319.8 12.5 L327.3 9.8 L329.5 9.1 L335.5 5.9 L341.7 3.2 L345.5 3.6 L348.4 6 L351 5.4 L357.5 5.4 L359.9 6.6 L362.5 6.4 L368.1 8.5 L375.2 6.6 L378.8 9.3 L381.9 8.6 L385.1 8.2 L388.3 6.9 L394.4 2.4 L400 5.3 L400 16 Z'/%3E%3C/svg%3E");

  /* Paper grain: tiny SVG noise tile */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.35'/%3E%3C/svg%3E");

  /* Brush strokes (masks, coloured with background-color) */
  --brush-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5C40 8 92 5.2 150 4.4c30-.4 60 0 86 1.4-26 1.2-60 3.3-100 6.2C88 15.4 40 17 4 16.2c-2.6-.1-3.4-2.6-2-3.7z'/%3E%3C/svg%3E");
  --brush-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M3 17C50 8.5 120 5 190 5.4c40 .2 78 1.8 105 4-30 3-70 6-122 9.6C110 23 55 26 8 26c-5 0-8-6.6-5-9zM70 13.2c40-2.6 92-4 150-3.4-52 1.6-100 3-150 3.4zM40 20.6c36-1.4 74-3 120-5.6-40 3.6-80 5.2-120 5.6z'/%3E%3C/svg%3E");
}

/* ---- base.css ---- */
/* Reset, page background, typography, accessibility helpers. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Nav targets stop below the sticky header, never under it */
section[id], [id='main'] { scroll-margin-top: var(--sticky-offset); }

/* While the lightbox is open the page behind it doesn't scroll */
html.has-lightbox { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* paper grain + faint fibres, on every page */
  background-image: var(--grain), var(--fibers);
  background-size: 180px 180px, 600px 600px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  /* Doodles, tape and tilted photos may hang off the sides; never let them
     widen the page. (Vertical overhangs are intentional and stay visible.) */
  .site-header, main, .site-footer { overflow-x: clip; }
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { width: 100%; height: 100%; }

h1, h2, h3, h4, p, ul, ol, figure, address, blockquote { margin: 0; }
address { font-style: normal; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-dark); }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Visible keyboard focus everywhere */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.panel--navy :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible { outline-color: var(--mustard); }

main:focus { outline: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  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: 12px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  border-radius: 6px;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: var(--white); }

.icon { width: 1em; height: 1em; flex: none; }

/* Type helpers */
.serif-caps {
  font-family: var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}
.prose p + p { margin-top: 1em; }
.prose a { font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- components.css ---- */
/* Reusable scrapbook components. Any page can use these classes. */

/* ------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 48px;
  padding: 0.95em 1.75em 0.8em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn__arrow { width: 1.15em; height: 1.15em; margin-top: -0.15em; transition: transform var(--t-fast) var(--ease); }
.btn__icon { width: 1.35em; height: 1.35em; margin-top: -0.2em; }
button.btn { cursor: pointer; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--pink { background: var(--pink-btn); color: var(--white); box-shadow: 0 2px 6px rgba(120, 30, 50, 0.25); }
.btn--pink:hover { background: var(--pink-btn-hover); color: var(--white); }
.btn--teal { background: var(--teal); color: var(--white); box-shadow: 0 2px 6px rgba(15, 45, 55, 0.25); }
.btn--teal:hover { background: var(--teal-dark); color: var(--white); }
.btn--outline-light { border-color: var(--white); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: rgba(0, 0, 0, 0.22); color: var(--white); }
.btn--outline { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn--outline:hover { background: rgba(29, 79, 94, 0.1); color: var(--teal-dark); }
.btn--small { min-height: 40px; padding: 0.8em 1.2em 0.65em; font-size: 0.8125rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.6rem;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: rgba(29, 79, 94, 0.1); color: var(--teal); }
.icon-btn--light { color: var(--white); font-size: 1.4rem; }
.icon-btn--light:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

/* -------------------------------------------------------- Paper panels */
/* Torn-edged paper is drawn on a ::before layer so the mask never clips
   content (polaroids are allowed to hang over the edge). */
.band, .panel { position: relative; isolation: isolate; }
.band::before, .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--surface);
  background-image: var(--grain), var(--fibers);
  background-size: 180px 180px, 600px 600px;
}
.band--kraft { --surface: var(--kraft); }
.band::before {
  --edge: 16px;
  -webkit-mask:
    var(--torn-b) left top / 420px var(--edge) repeat-x,
    linear-gradient(#000 0 0) left var(--edge) / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat,
    var(--torn-c-flip) left bottom / 380px var(--edge) repeat-x;
  mask:
    var(--torn-b) left top / 420px var(--edge) repeat-x,
    linear-gradient(#000 0 0) left var(--edge) / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat,
    var(--torn-c-flip) left bottom / 380px var(--edge) repeat-x;
}
.panel--navy { --surface: var(--navy); color: var(--white); }
.panel--navy::before {
  --edge: 16px;
  background-image: var(--grain), radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%);
  -webkit-mask:
    var(--torn-a) left top / 420px var(--edge) repeat-x,
    var(--torn-b-flip) left bottom / 400px var(--edge) repeat-x,
    var(--torn-side) right top / var(--edge) 400px repeat-y,
    linear-gradient(#000 0 0) left var(--edge) / calc(100% - var(--edge) + 1px) calc(100% - 2 * var(--edge) + 1px) no-repeat;
  mask:
    var(--torn-a) left top / 420px var(--edge) repeat-x,
    var(--torn-b-flip) left bottom / 400px var(--edge) repeat-x,
    var(--torn-side) right top / var(--edge) 400px repeat-y,
    linear-gradient(#000 0 0) left var(--edge) / calc(100% - var(--edge) + 1px) calc(100% - 2 * var(--edge) + 1px) no-repeat;
}

/* Torn paper strip laid over the edge of a photo (hero, banners, header).
   ::before is the pale fibrous rim, ::after the paper itself. */
.torn-strip {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 24px;
  pointer-events: none;
  filter: drop-shadow(0 -1px 1.5px rgba(40, 30, 15, 0.22));
}
.torn-strip::before, .torn-strip::after { content: ''; position: absolute; left: 0; right: 0; }
.torn-strip::before { background: #FBF8F1; }
.torn-strip::after {
  background-color: var(--strip-color, var(--paper));
  background-image: var(--grain);
  background-size: 180px 180px;
}
.torn-strip--bottom { bottom: -1px; }
.torn-strip--bottom::before {
  bottom: 0; height: 21px;
  -webkit-mask: var(--torn-c) left bottom / 380px 21px repeat-x;
  mask: var(--torn-c) left bottom / 380px 21px repeat-x;
}
.torn-strip--bottom::after {
  bottom: 0; height: 16px;
  -webkit-mask: var(--torn-a) left bottom / 420px 16px repeat-x;
  mask: var(--torn-a) left bottom / 420px 16px repeat-x;
}

/* --------------------------------------------------------------- Polaroid */
.polaroid {
  --tilt: 2deg;
  position: relative;
  margin: 0;
  padding: 10px 10px 30px;
  background: #FFFEFB;
  box-shadow: var(--shadow-photo);
  transform: rotate(calc(var(--tilt) * var(--tilt-scale, 1)));
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.polaroid:hover { transform: rotate(calc(var(--tilt) * var(--tilt-scale, 1) * 0.3)); box-shadow: var(--shadow-lift); }
.polaroid__photo { position: relative; aspect-ratio: var(--ratio, 4 / 3); overflow: hidden; background: #E8E0D0; }
.polaroid__photo img { width: 100%; height: 100%; object-fit: cover; }
.polaroid--captioned { padding-bottom: 0; }
.polaroid__caption {
  padding: 12px 8px 14px;
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
  transform: rotate(-3deg);
}
.polaroid__heart { display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.05em; color: var(--pink); }

/* ------------------------------------------------------------ Washi tape */
.tape {
  position: absolute;
  z-index: 2;
  width: 104px;
  height: 30px;
  background: var(--tape-color, rgba(160, 214, 196, 0.72));
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 40%, rgba(255, 255, 255, 0.12));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M1 0L99 0L96.5 2.5L100 5L96.5 7.5L100 10L96.5 12.5L100 15L96.5 17.5L100 20L96.5 22.5L100 25L97 28L4 28L0 25.5L3.5 23L0 20.5L3.5 18L0 15.5L3.5 13L0 10.5L3.5 8L0 5.5L3.5 3Z'/%3E%3C/svg%3E") center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'%3E%3Cpath d='M1 0L99 0L96.5 2.5L100 5L96.5 7.5L100 10L96.5 12.5L100 15L96.5 17.5L100 20L96.5 22.5L100 25L97 28L4 28L0 25.5L3.5 23L0 20.5L3.5 18L0 15.5L3.5 13L0 10.5L3.5 8L0 5.5L3.5 3Z'/%3E%3C/svg%3E") center / 100% 100%;
  pointer-events: none;
}
.tape--mint { --tape-color: rgba(160, 214, 196, 0.74); }
.tape--pink { --tape-color: rgba(243, 172, 189, 0.74); }
.tape--yellow { --tape-color: rgba(246, 214, 128, 0.74); }
.tape--tr { top: -10px; right: -34px; transform: rotate(36deg); }
.tape--tl { top: -10px; left: -34px; transform: rotate(-36deg); }
.tape--top { top: -16px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 84px; }
.tape--br { bottom: -6px; right: -30px; transform: rotate(-34deg); }
.tape--bl { bottom: -6px; left: -30px; transform: rotate(34deg); }
@media (max-width: 699px) {
  .tape { width: 84px; height: 26px; }
  .tape--tr { right: -14px; }
  .tape--tl { left: -14px; }
}

/* ----------------------------------------------------------- Sticky note */
.note {
  --tilt: 3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 14px;
  background-color: var(--note-bg, var(--note-pink));
  background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.28), transparent 45%), var(--grain);
  background-size: auto, 180px 180px;
  box-shadow: 0 1px 2px rgba(40, 30, 15, 0.16), 0 8px 16px rgba(40, 30, 15, 0.16);
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.08;
  text-align: center;
  color: var(--ink);
  transform: rotate(calc(var(--tilt) * var(--tilt-scale, 1)));
}
.note__line { display: block; }
.note__heart { display: block; margin-top: 4px; }
.note__heart .icon { width: 20px; height: 20px; }
.note--pink { --note-bg: var(--note-pink); }
.note--cream { --note-bg: var(--note-cream); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.02em; }
.note--yellow { --note-bg: #F7E3A1; }

/* --------------------------------------------------- Torn label / tag */
.tag {
  --tilt: -2deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.1em 0.6em;
  background-color: var(--paper-deep);
  background-image: var(--grain);
  background-size: 180px 180px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.1;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(calc(var(--tilt) * var(--tilt-scale, 1)));
  -webkit-mask:
    var(--torn-a) left top / 200px 5px repeat-x,
    linear-gradient(#000 0 0) left 5px / 100% calc(100% - 10px) no-repeat,
    var(--torn-b-flip) left bottom / 220px 5px repeat-x;
  mask:
    var(--torn-a) left top / 200px 5px repeat-x,
    linear-gradient(#000 0 0) left 5px / 100% calc(100% - 10px) no-repeat,
    var(--torn-b-flip) left bottom / 220px 5px repeat-x;
}
.tag__heart { width: 1.3em; height: 1.3em; margin-top: -0.15em; color: var(--pink); }

/* ------------------------------------------------------- Script headings */
.script-title {
  font-family: var(--font-script);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.005em;
}
.script-title--teal { color: var(--teal); }
.script-title--white { color: var(--white); }

/* Brush-stroke underline (mask coloured by background) */
.brush-underline {
  display: block;
  width: var(--brush-w, 220px);
  height: var(--brush-h, 10px);
  background: var(--brush-color, var(--pink));
  -webkit-mask: var(--brush-1) center / 100% 100% no-repeat;
  mask: var(--brush-1) center / 100% 100% no-repeat;
}
.brush-underline--teal { --brush-color: var(--teal); }
.brush-underline--pink { --brush-color: var(--pink); }
.brush-underline--green { --brush-color: var(--green); }
.brush-swoosh {
  display: block;
  width: var(--brush-w, 170px);
  height: var(--brush-h, 16px);
  background: var(--brush-color, var(--green));
  -webkit-mask: var(--brush-2) center / 100% 100% no-repeat;
  mask: var(--brush-2) center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------- Doodles */
.doodle { position: absolute; pointer-events: none; overflow: visible; }

/* -------------------------------------------------------------- Lightbox */
/* Native <dialog> opened with showModal(): the rest of the page is inert
   while it's open. main.js fills in the media and handles keys and swipes. */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(16, 22, 18, 0.93); }
.lightbox[open] { animation: lightbox-in var(--t-med) var(--ease); }
@keyframes lightbox-in { from { opacity: 0; } }

.lightbox__inner { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.lightbox__bar { display: flex; align-items: center; gap: 6px 18px; padding: 12px clamp(12px, 3vw, 28px) 4px; }
.lightbox__title { font-family: var(--font-script); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; color: var(--white); }
.lightbox__count {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.lightbox__close, .lightbox__nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.lightbox__close { margin-left: auto; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--paper-deep); }
.lightbox__nav:active { transform: scale(0.94); }
.lightbox :focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

.lightbox__stage {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 6px clamp(8px, 2vw, 24px) 18px;
  touch-action: pan-y; /* horizontal swipes are ours */
}
.lightbox__figure { display: grid; justify-items: center; align-content: center; gap: 12px; min-width: 0; min-height: 0; height: 100%; }
/* the photo sits in a white polaroid-style frame */
.lightbox__media {
  max-width: 100%;
  padding: 10px 10px 12px;
  background: #FFFEFB;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.lightbox__media img, .lightbox__media video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(calc(100vw - 200px), 1600px);
  max-height: calc(100vh - 210px);
  max-height: calc(100dvh - 210px);
  object-fit: contain;
  background: #E8E0D0;
}
.lightbox__caption {
  max-width: 62ch;
  min-height: 2.4em;
  font-family: var(--font-script);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 699px) {
  .lightbox__bar { flex-wrap: wrap; }
  .lightbox__title { order: 1; }
  .lightbox__close { order: 2; }
  .lightbox__count { order: 3; flex-basis: 100%; margin-top: -4px; }
  .lightbox__stage { grid-template-columns: minmax(0, 1fr); padding-bottom: 86px; position: relative; }
  .lightbox__nav { position: absolute; bottom: 18px; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }
  .lightbox__media { padding: 6px 6px 8px; }
  .lightbox__media img, .lightbox__media video {
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 290px);
    max-height: calc(100dvh - 290px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
}

/* ---- layout.css ---- */
/* Site header (sticky), navigation, mobile menu and footer. */

/* ---------------------------------------------------------------- Header */
/* Sticky. Once the page scrolls (.is-stuck, set by main.js) it shrinks to a
   compact bar; the margin grows by the same amount so the content below
   never jumps. */
.site-header {
  --header-h: 94px;
  --header-h-stuck: 70px;
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 0;
  background-color: var(--paper);
  background-image: var(--grain), var(--fibers);
  background-size: 180px 180px, 600px 600px;
  transition: margin-bottom var(--t-med) var(--ease);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--container);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.8vw, 40px);
  transition: height var(--t-med) var(--ease);
}
.site-header.is-stuck { margin-bottom: calc(var(--header-h) - var(--header-h-stuck)); }
.site-header.is-stuck .site-header__inner { height: var(--header-h-stuck); }

.site-header__fennel { width: 46px; height: 106px; color: #A9B49A; opacity: 0.85; z-index: 1; transition: opacity var(--t-med); }
.is-stuck .site-header__fennel { opacity: 0; }
.site-header__fennel--left { left: -6px; top: 18px; }
.site-header__fennel--right { right: 0; top: -4px; transform: scaleX(-1); }

/* Logo hangs over the hero, like the mockup */
.site-logo {
  position: relative;
  z-index: 4; /* above the header's torn edge */
  order: 1;
  align-self: flex-start;
  flex: none;
  width: clamp(250px, 27vw, 392px);
  margin-top: 6px;
  margin-left: -12px;
  border-radius: 8px;
  transition: width var(--t-med) var(--ease), margin-top var(--t-med) var(--ease);
}
.is-stuck .site-logo { width: 196px; margin-top: 3px; }
.site-logo svg { position: relative; width: 100%; height: auto; }
/* Paper tab under the logo: the header's cream dips lower here, like the mockup */
.site-logo::before {
  content: '';
  position: absolute;
  left: -60px;
  right: -14px;
  top: 40px;
  bottom: -4px;
  background-color: var(--paper);
  background-image: var(--grain), var(--fibers);
  background-size: 180px 180px, 600px 600px;
  filter: drop-shadow(0 1px 1px rgba(40, 30, 15, 0.2));
  transition: opacity var(--t-fast);
  -webkit-mask:
    linear-gradient(#000 0 0) left top / calc(100% - 9px) calc(100% - 13px) no-repeat,
    var(--torn-b-flip) left bottom / 300px 14px repeat-x,
    var(--torn-side) right top / 10px 200px repeat-y;
  mask:
    linear-gradient(#000 0 0) left top / calc(100% - 9px) calc(100% - 13px) no-repeat,
    var(--torn-b-flip) left bottom / 300px 14px repeat-x,
    var(--torn-side) right top / 10px 200px repeat-y;
}
.is-stuck .site-logo::before { opacity: 0; }

/* On wide screens the menu's children sit directly in the header row */
.site-menu { display: contents; }
.site-nav { order: 2; flex: 1; display: flex; justify-content: center; }
.site-nav ul { display: flex; gap: clamp(18px, 2.5vw, 36px); margin: 0; }
.site-nav a {
  position: relative;
  display: block;
  padding: 8px 0;
  font-family: var(--font-nav);
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 1px;
  height: 5px;
  background: var(--pink);
  -webkit-mask: var(--brush-1) center / 100% 100% no-repeat;
  mask: var(--brush-1) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.site-nav a:hover { color: var(--teal); }
.site-nav a:hover::after { transform: scaleX(0.6); opacity: 0.6; }
/* the section currently in view (main.js sets aria-current="location") */
.site-nav a[aria-current]::after { transform: none; opacity: 1; }
.site-nav a[aria-current] { color: var(--ink); }

.site-menu__social { order: 4; margin-left: 6px; }

.btn-shop-local {
  order: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 60px;
  margin-left: 14px;
  padding: 10px 30px 9px 22px;
  border-radius: var(--radius-pill);
  background: var(--pink-btn);
  box-shadow: 0 2px 6px rgba(120, 30, 50, 0.25);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t-fast), min-height var(--t-med) var(--ease);
}
.is-stuck .btn-shop-local { min-height: 50px; }
.btn-shop-local:hover { background: var(--pink-btn-hover); color: var(--white); }
.btn-shop-local__heart { width: 30px; height: 30px; color: #8E1230; flex: none; }

.menu-toggle { display: none; order: 6; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__close { display: block; }

/* Torn bottom edge of the header, laid over the photo below */
.torn-strip--header { top: 100%; bottom: auto; height: 22px; filter: drop-shadow(0 1.5px 1.5px rgba(40, 30, 15, 0.25)); }
.torn-strip--header::before {
  top: 0; height: 20px;
  -webkit-mask: var(--torn-c-flip) left top / 380px 20px repeat-x;
  mask: var(--torn-c-flip) left top / 380px 20px repeat-x;
}
.torn-strip--header::after {
  top: 0; height: 15px;
  -webkit-mask: var(--torn-b-flip) left top / 400px 15px repeat-x;
  mask: var(--torn-b-flip) left top / 400px 15px repeat-x;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  position: relative;
  margin-top: 26px;
  background-color: var(--footer);
  background-image: var(--grain);
  background-size: 180px 180px;
  color: var(--white);
}
.torn-strip--footer { bottom: 100%; height: 12px; filter: none; }
.torn-strip--footer::before { display: none; }
.torn-strip--footer::after {
  bottom: -1px; height: 13px;
  background-color: var(--footer);
  -webkit-mask: var(--torn-a) left bottom / 420px 13px repeat-x;
  mask: var(--torn-a) left bottom / 420px 13px repeat-x;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__main {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  min-height: 100px;
  padding-block: 14px;
}
.site-footer__logo { flex: none; width: 124px; }
.site-footer__logo svg { width: 100%; height: auto; }
.site-footer__divider { align-self: stretch; width: 1px; margin-block: 10px; background: rgba(255, 255, 255, 0.35); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.1vw, 30px); margin: 0; }
.site-footer__nav a { font-size: 1.0625rem; }
.site-footer__social { display: flex; gap: 2px; margin-left: clamp(0px, 2vw, 30px); }
.site-footer__tagline {
  margin-left: auto;
  font-family: var(--font-script);
  font-size: 1.5rem;
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.95);
}
.site-footer__phrase { white-space: nowrap; }
.site-footer__dot { margin-inline: 0.35em; }
.site-footer__heart { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.08em; color: var(--pink); }

.site-footer__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
}
.site-footer__info p { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.site-footer__info p > span { display: inline-flex; align-items: center; gap: 7px; }
.site-footer__info .icon { width: 15px; height: 15px; color: var(--mustard); }
.site-footer__info a { color: rgba(255, 255, 255, 0.9); }
.site-footer__copy { color: rgba(255, 255, 255, 0.65); }

/* ------------------------------------------------------ Smaller screens */
@media (max-width: 1279px) {
  .site-nav a { font-size: 1.0625rem; }
  .btn-shop-local { padding-inline: 18px 22px; margin-left: 4px; }
}

@media (max-width: 1079px) {
  :root { --sticky-offset: 92px; }
  .site-header { --header-h: 78px; --header-h-stuck: 64px; }
  .site-header__inner { gap: 6px; }
  .site-logo { width: 236px; margin-top: 4px; }
  .is-stuck .site-logo { width: 176px; }
  .menu-toggle { display: inline-grid; margin-left: auto; }

  .js .site-menu {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 25;
    padding: 18px var(--gutter) 24px;
    background-color: var(--paper);
    background-image: var(--grain);
    box-shadow: 0 18px 30px rgba(40, 30, 15, 0.2);
  }
  .js .site-menu.is-open { display: grid; gap: 18px; justify-items: start; }
  html:not(.js) .site-menu { display: grid; gap: 12px; padding: 30px var(--gutter) 16px; position: static; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; }

  .site-nav { display: block; width: 100%; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 11px 2px; font-size: 1.25rem; border-bottom: 1px dashed var(--kraft-edge); }
  .site-nav a::after { bottom: 6px; right: auto; width: 4.5em; }
  .btn-shop-local { margin-left: 0; }
  .site-menu__social { margin-left: -10px; font-size: 1.5rem; }

  .site-footer__main { flex-wrap: wrap; justify-content: center; text-align: center; padding-top: 26px; }
  .site-footer__divider { display: none; }
  .site-footer__nav { flex-basis: 100%; }
  .site-footer__nav ul { justify-content: center; }
  .site-footer__social { margin-left: 0; }
  .site-footer__tagline { margin-left: 0; flex-basis: 100%; white-space: normal; }
  .site-footer__info { justify-content: center; text-align: center; }
  .site-footer__info p { justify-content: center; }
}

@media (max-width: 699px) {
  :root { --sticky-offset: 84px; }
  .site-header { --header-h: 70px; --header-h-stuck: 60px; }
  .site-logo { width: 196px; margin-left: calc(-0.4 * var(--gutter)); }
  .is-stuck .site-logo { width: 156px; }
  .site-header__fennel { display: none; }
  .site-footer__tagline { font-size: 1.45rem; }
}

/* ---- home.css ---- */
/* Homepage sections, top to bottom. Desktop values follow the mockup at
   ~1440px; tablet and mobile adjustments are at the end. */

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(470px, 37vw, 600px);
  color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: #4D6B3C; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* anchored in px so the text column is always well covered, whatever the
     screen width (white text stays above 4.5:1 even over the sunny wall) */
  background: linear-gradient(90deg,
    rgba(12, 22, 16, 0.8) 0,
    rgba(12, 22, 16, 0.68) min(540px, 50%),
    rgba(12, 22, 16, 0.3) min(780px, 72%),
    rgba(12, 22, 16, 0) min(980px, 90%));
}
.hero__inner { width: 100%; padding-block: 66px 40px; }
.hero__content { max-width: 580px; }
.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.7vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero__title-serif { display: block; }
.hero__title-script {
  display: block;
  margin-top: -0.02em;
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: 1.82em;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--green-light);
  /* a hair of extra weight so the thin brush script reads over the photo */
  -webkit-text-stroke: 0.6px currentColor;
}
.hero__lede {
  max-width: 415px;
  margin-top: 16px;
  font-size: clamp(1.125rem, 1.6vw, 1.45rem);
  line-height: 1.38;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.hero .btn { margin-top: 22px; }
.hero__sprig { left: -8px; bottom: 14px; z-index: 1; width: 64px; height: 196px; color: rgba(255, 255, 255, 0.82); }

/* ------------------------------------------------------- Category cards */
.categories { position: relative; padding-block: 30px 24px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); margin: 0; }
.cat-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 7px 7px 0;
  color: var(--ink);
  text-decoration: none;
  filter: drop-shadow(0 1px 1px rgba(40, 30, 15, 0.16)) drop-shadow(0 6px 10px rgba(40, 30, 15, 0.12));
  transition: transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper-deep);
  background-image: var(--grain);
  background-size: 180px 180px;
  -webkit-mask:
    var(--torn-a) left top / 160px 5px repeat-x,
    var(--torn-c-flip) left bottom / 170px 5px repeat-x,
    var(--torn-side-left) left top / 5px 160px repeat-y,
    var(--torn-side) right top / 5px 170px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 9px) calc(100% - 9px) no-repeat;
  mask:
    var(--torn-a) left top / 160px 5px repeat-x,
    var(--torn-c-flip) left bottom / 170px 5px repeat-x,
    var(--torn-side-left) left top / 5px 160px repeat-y,
    var(--torn-side) right top / 5px 170px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 9px) calc(100% - 9px) no-repeat;
}
/* The whole card is one button: the title's button stretches over it. */
.cat-card:hover, .cat-card:focus-within {
  color: var(--ink);
  transform: translateY(-6px);
  filter: drop-shadow(0 2px 2px rgba(40, 30, 15, 0.16)) drop-shadow(0 14px 18px rgba(40, 30, 15, 0.18));
}
/* the photo's bottom edge is torn, revealing the paper label below */
.cat-card__media {
  aspect-ratio: 290 / 160;
  overflow: hidden;
  background: #E8E0D0;
  -webkit-mask: linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat, var(--torn-b-flip) left bottom / 300px 12px repeat-x;
  mask: linear-gradient(#000 0 0) left top / 100% calc(100% - 11px) no-repeat, var(--torn-b-flip) left bottom / 300px 12px repeat-x;
}
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.04); }
.cat-card__label {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title title' 'sub arrow';
  align-items: center;
  gap: 4px 10px;
  padding: 6px 11px 16px;
}
.cat-card__title {
  grid-area: title;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.4vw, 2.2rem);
  line-height: 1;
  white-space: nowrap;
}
.cat-card__button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cat-card__button::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.cat-card__button:focus-visible { outline: none; }
.cat-card__button:focus-visible::after { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
html:not(.js) .cat-card__button { cursor: default; }
.cat-card__sub {
  grid-area: sub;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.cat-card__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 1.15rem;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cat-card:hover .cat-card__arrow, .cat-card:focus-within .cat-card__arrow { background: var(--teal); border-color: var(--teal); color: var(--white); }

.categories__cosmos {
  top: 26px;
  left: calc((100% - min(100%, var(--container))) / 2 + 6px);
  z-index: 2;
  width: 52px;
  height: 130px;
}
.categories__star { width: 30px; height: 30px; right: calc((100% - min(100%, var(--container))) / 2 + 10px); }
.categories__star--yellow { top: 22px; color: var(--mustard); transform: rotate(8deg); }
.categories__star--green { top: 62px; width: 26px; height: 26px; right: calc((100% - min(100%, var(--container))) / 2 + 22px); color: var(--green); transform: rotate(-12deg); }

/* ---------------------------------------------- More than a Vintage Shop */
.about { margin-top: 4px; padding-block: 46px 38px; }
.about__grid {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas: 'heading text media' 'heading values media';
  gap: 0 26px;
  align-items: start;
}
.about__heading { grid-area: heading; }
.about__text { grid-area: text; }
.about__media { grid-area: media; }
/* the icon row starts under the heading's brush strokes, like the mockup */
.values { grid-area: values; margin-left: -38px; }
.about__heading { position: relative; padding: 8px 0 0 2px; }
.about__title {
  font-size: clamp(2.5rem, 3.2vw, 3rem);
  line-height: 0.98;
  transform: rotate(-9deg);
  transform-origin: 10% 60%;
}
.about__title > span { display: block; }
.about__title-than { padding-left: 0.08em; }
.about__title-shop { padding-left: 0.3em; white-space: nowrap; }
.about__heart { position: absolute; top: 4px; left: 160px; width: 36px; height: 36px; color: var(--pink); transform: rotate(10deg); }
.about__brush { --brush-w: 176px; --brush-h: 9px; margin: 8px 0 0 28px; transform: rotate(-9deg); }
.about__brush--2 { --brush-w: 116px; --brush-h: 7px; margin: 6px 0 0 58px; }
.about__text { padding-top: 6px; }
.about__text p { max-width: 472px; font-size: 1rem; line-height: 1.55; }
.values { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.values__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}
.values__icon { width: 40px; height: 40px; }
.values__icon--green { color: var(--green); }
.values__icon--pink { color: var(--pink); }
.values__icon--blue { color: var(--blue); }
.values__icon--mustard { color: var(--mustard); }
.about__media { position: relative; margin: -64px -44px -70px 0; padding-right: 88px; }
.about__polaroid { --ratio: 16 / 10; width: 100%; max-width: 476px; padding: 9px 9px 14px; }
.about__note { position: absolute; right: 0; top: 18px; width: 150px; min-height: 268px; justify-content: center; font-size: 1.34rem; }

/* ------------------------------------------------------------ Look Inside */
.look { position: relative; padding-block: 24px 44px; }
.look__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-bottom: 16px; }
.look__title { font-size: clamp(1.75rem, 2.45vw, 2.2rem); line-height: 1.1; letter-spacing: 0.035em; }
.look__head .brush-swoosh { --brush-w: 178px; --brush-h: 15px; }
.look__tagline { font-family: var(--font-script); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; color: var(--ink); }
.look__tagline-blue { color: var(--blue); }
.look__grid { display: grid; grid-template-columns: 1fr 1.17fr 1.17fr 1fr; gap: 20px; margin: 0; }
.look-photo { position: relative; height: clamp(220px, 18.5vw, 280px); }
.look-photo__img { height: 100%; overflow: hidden; box-shadow: var(--shadow-photo); background: #E8E0D0; }
.look-photo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.look-photo:hover .look-photo__img img { transform: scale(1.04); }
.look-photo figcaption { position: absolute; left: -8px; bottom: -16px; z-index: 1; filter: drop-shadow(0 2px 2px rgba(40, 30, 15, 0.2)); }
.look__doodle--left { top: 70px; left: calc((100% - min(100%, var(--container))) / 2 + 4px); width: 44px; height: 116px; z-index: 2; }
.look__doodle--right { top: 30px; right: calc((100% - min(100%, var(--container))) / 2 + 2px); width: 44px; height: 196px; z-index: 2; }

.look__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: 40px; }
.look__count { font-family: var(--font-script); font-weight: 500; font-size: 1.4rem; color: var(--ink-soft); }

/* ------------------------------------------------- Ambient video band */
.tour { position: relative; padding-block: 10px 46px; }
.tour__frame { --ratio: 21 / 9; max-width: 1000px; margin-inline: auto; padding: 12px 12px 0; }
.tour__screen { background: #3A3A32; }
.tour__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour__caption { font-size: 1.65rem; padding: 10px 8px 14px; }
.tour__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 254, 251, 0.9);
  color: var(--ink);
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.tour__toggle:hover { background: var(--white); }
.tour__toggle .tour__icon-play { display: none; }
.tour__toggle[data-paused='true'] .tour__icon-play { display: block; }
.tour__toggle[data-paused='true'] .tour__icon-pause { display: none; }
.tour__doodle--left { left: calc(50% - 580px); bottom: 60px; width: 40px; height: 88px; }
.tour__doodle--right { right: calc(50% - 580px); top: 20px; width: 44px; height: 112px; }

/* ------------------------------------- Art, Music & Community + Visit Us */
.duo { container-type: inline-size; padding-top: 6px; }
.duo__grid {
  --content: calc(min(100cqw, var(--container)) - 2 * var(--gutter));
  --off: calc((100cqw - var(--content)) / 2);
  display: grid;
  grid-template-columns: calc(var(--off) + var(--content) * 0.565) minmax(0, 1fr);
  align-items: start;
}

.community {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 34px 54px 30px var(--off);
}
.community__sprig { left: -4px; bottom: 6px; width: 60px; height: 200px; color: var(--mustard); opacity: 0.9; }
.community__text { position: relative; z-index: 1; }
.community__title { font-size: clamp(2.4rem, 3.1vw, 2.9rem); line-height: 0.95; transform: rotate(-4deg); transform-origin: left; }
.community__title span { display: block; padding-left: 0.05em; }
.community__brush { --brush-w: 190px; --brush-h: 8px; margin: 4px 0 14px 34px; transform: rotate(-4deg); }
.community__text p { font-size: 1.0625rem; line-height: 1.5; }
.community__text .btn { margin-top: 18px; }
.community__media { position: relative; padding-right: 60px; }
.community__polaroid { --ratio: 335 / 262; width: 100%; max-width: 360px; padding: 9px 9px 22px; }
.community__note { position: absolute; right: 0; top: 34px; width: 96px; padding: 20px 8px 12px; font-size: 1.2rem; }

.visit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 8px;
  align-items: start;
  padding: 16px max(16px, calc(var(--off) - 30px)) 26px 26px;
}
.visit__info { position: relative; padding-top: 10px; }
.visit__title { display: flex; align-items: flex-start; gap: 8px; font-size: clamp(2.8rem, 4vw, 3.7rem); line-height: 1; }
.visit__leaf { width: 34px; height: 34px; margin-top: 8px; }
.visit__brush { --brush-w: 160px; --brush-h: 7px; margin: 2px 0 6px 24px; transform: rotate(-3deg); }
.info-list { margin: 0; }
.info-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; font-size: 0.9375rem; line-height: 1.38; }
.info-list__icon { width: 26px; height: 26px; margin-top: 1px; color: var(--ink); }
.info-list__icon--pin { color: #2F6B3A; }
.info-list__note { color: var(--muted); }
.info-list__phone { font-weight: 600; }
.visit__texas { position: absolute; top: 80px; right: 0; width: 62px; height: 59px; color: var(--ink); }
.visit__cta { position: relative; display: flex; align-items: flex-end; gap: 6px; margin-top: 20px; }
.visit__flower { position: static; width: 34px; height: 76px; margin-bottom: -26px; }
.visit__polaroid { --ratio: 1 / 1; padding: 10px 10px 0; margin-top: -4px; }
.visit__polaroid .polaroid__caption { font-size: 1.45rem; }

/* ================================================================ Tablet */
@media (max-width: 1079px) {
  .hero { min-height: 470px; }
  .hero__content { max-width: 440px; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* margin doodles would sit on top of content at this width */
  .hero__sprig, .community__sprig, .look__doodle, .categories__cosmos, .categories__star { display: none; }

  .about { padding-block: 44px 56px; }
  .about__grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); grid-template-areas: 'heading text' 'heading values' 'media media'; }
  .values { margin-left: 0; }
  .about__media { justify-self: center; width: min(100%, 600px); margin: 30px 0 -20px; }

  .look__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
  .look-photo { height: 260px; }
  .tour__doodle { display: none; }

  .duo__grid { grid-template-columns: minmax(0, 1fr); }
  .community { padding: 48px var(--gutter) 46px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel--navy::before {
    -webkit-mask:
      var(--torn-a) left top / 420px var(--edge) repeat-x,
      var(--torn-b-flip) left bottom / 400px var(--edge) repeat-x,
      linear-gradient(#000 0 0) left var(--edge) / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat;
    mask:
      var(--torn-a) left top / 420px var(--edge) repeat-x,
      var(--torn-b-flip) left bottom / 400px var(--edge) repeat-x,
      linear-gradient(#000 0 0) left var(--edge) / 100% calc(100% - 2 * var(--edge) + 1px) no-repeat;
  }
  .visit { padding: 34px var(--gutter) 20px; max-width: 760px; width: 100%; justify-self: center; }
}

/* ================================================================ Mobile */
@media (max-width: 699px) {
  :root { --tilt-scale: 0.5; } /* polaroids, notes and tags tilt half as much */

  .hero { min-height: 560px; align-items: flex-end; }
  .hero__shade {
    background: linear-gradient(180deg,
      rgba(12, 22, 16, 0.3) 0%,
      rgba(12, 22, 16, 0.55) 35%,
      rgba(12, 22, 16, 0.84) 70%,
      rgba(12, 22, 16, 0.9) 100%);
  }
  .hero__inner { padding-block: 120px 46px; }
  .hero__title { font-size: 2.6rem; }
  .hero__lede { font-size: 1.125rem; }
  .hero__sprig { display: none; }

  .categories { padding-top: 24px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .categories__cosmos, .categories__star { display: none; }
  .cat-card__title { font-size: 2.1rem; }

  .about__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'text' 'values' 'media'; }
  .about__heading { padding-bottom: 8px; }
  .about__title { transform: rotate(-5deg); }
  .about__title > span { display: inline; padding: 0; }
  .about__title-shop { display: block !important; }
  .about__heart { left: auto; right: 12%; }
  .about__brush { transform: rotate(-4deg); }
  .about__media { padding-right: 0; margin-top: 16px; }
  /* the tall sticky note becomes a short one that flows as a sentence */
  .about__note { display: block; position: relative; top: auto; right: auto; width: auto; min-height: 0; max-width: 300px; margin: -16px 10px 0 auto; padding: 14px 18px 12px; font-size: 1.3rem; line-height: 1.2; }
  .about__note br { display: none; }
  .about__note .note__line { display: inline; }
  .about__note .note__line + .note__line::before { content: ' · '; }
  .about__note .note__heart { display: inline-block; margin: 0 0 0 4px; vertical-align: -2px; }

  .look { padding-bottom: 34px; }
  .look__doodle { display: none; }
  .look__head { gap: 6px 16px; }
  .look__head .brush-swoosh { --brush-w: 110px; order: 3; }
  /* horizontal swipe row (ul. beats the base list reset) */
  ul.look__grid {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .look__grid > li { flex: 0 0 76%; scroll-snap-align: start; }
  .look-photo { height: 300px; }
  .look-photo figcaption { left: 6px; }
  .look__more { margin-top: 8px; }

  .tour { padding-bottom: 34px; }
  .tour__frame { --ratio: 4 / 3; padding: 8px 8px 0; }
  .tour__caption { font-size: 1.4rem; }

  .community { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 44px 50px; }
  .community__sprig { display: none; }
  .community__media { padding-right: 46px; max-width: 420px; }
  .community__note { right: 0; top: 24px; }

  .visit { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 34px; }
  .visit__texas { top: 80px; right: 0; width: 62px; }
  .visit__polaroid { width: min(100%, 320px); justify-self: center; }
}


/* ---- pages.css ---- */
/* 404 page, plus small helpers it shares with the homepage. */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.section-brush { --brush-w: 180px; --brush-h: 9px; margin: 6px 0 18px 10px; }

/* ------------------------------------------------------------------- 404 */
.notfound { position: relative; padding-block: clamp(60px, 9vw, 120px); }
.notfound__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.notfound__code { font-size: 1rem; letter-spacing: 0.2em; color: var(--muted); }
.notfound__title { margin-top: 8px; font-size: clamp(2.8rem, 5.5vw, 4.4rem); }
.notfound__text p { max-width: 52ch; }
.notfound__polaroid { --ratio: 4 / 5; max-width: 340px; width: 100%; justify-self: center; padding: 10px 10px 0; }
.notfound__doodle--left { left: 10px; top: 40px; width: 46px; height: 120px; }
.notfound__doodle--right { right: 10px; bottom: 40px; width: 40px; height: 180px; }

@media (max-width: 799px) {
  .notfound__inner { grid-template-columns: minmax(0, 1fr); }
  .notfound__doodle { display: none; }
}