/* Tuckshop clickable prototype, 2 Nov 2026. Base styles carried from mockup/index.html; three directions: data-v="white" (D1), "colour" (D2), "notes" (D3). */
@font-face{font-family:"Intro Rust";src:url(/assets/fonts/IntroRust.otf) format("opentype");font-display:swap}
@font-face{font-family:"Quicksand";src:url(/assets/fonts/Quicksand-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
/* Personal Use Only edition supplied; commercial licence needed before launch */
/* Public build: Regular Brush (Personal Use Only file) swapped for Caveat Brush, SIL OFL 1.1, until Tuckshop holds the commercial licence */
@font-face{font-family:"Regular Brush";src:url(/assets/fonts/CaveatBrush-Regular.ttf) format("truetype");font-display:swap}

:root{
  --teal:#1A9A9A; --teal-ink:#147A7A; --purple:#61549F; --green:#6EBE96;
  --pink:#FF66C4; --orange:#FF8130; --violet:#7500E8; --ink:#333333; --white:#FFFFFF;
  --tint-teal:#E6F4F4; --tint-green:#E9F6EF; --tint-pink:#FFEAF6; --tint-orange:#FFF0E5; --tint-purple:#EFEDF6;
  --r-lg:36px; --r-md:24px; --r-sm:16px;
  --head:"Intro Rust",Impact,sans-serif; --body:"Quicksand",system-ui,sans-serif; --brush:"Regular Brush",cursive;
}
/* white-led defaults */
html[data-v="white"]{
  --page:var(--white); --text:var(--ink); --heading:var(--purple); --accent:var(--teal);
  --hero-bg:var(--white); --hero-text:var(--ink); --hero-head:var(--purple); --hero-brush:var(--teal);
  --header-bg:rgba(255,255,255,.92); --header-text:var(--ink); --logo:url(/assets/logo/logo-purple.png);
  --band-a:var(--tint-teal); --band-a-text:var(--ink); --band-a-head:var(--purple);
  --band-b:var(--tint-purple); --band-b-text:var(--ink); --band-b-head:var(--purple);
  --cta-bg:var(--teal); --cta-text:var(--white); --cta2-bg:var(--white); --cta2-text:var(--purple); --cta2-line:var(--purple);
  --card:var(--white); --card-line:#ECECEC; --link:var(--teal-ink);
  --foot-bg:var(--purple); --foot-text:var(--white);
}
html[data-v="colour"]{
  --page:var(--white); --text:var(--ink); --heading:var(--purple); --accent:var(--teal);
  --hero-bg:var(--teal) url(/assets/textures/teal.jpg) center/700px; --hero-text:var(--white); --hero-head:var(--white); --hero-brush:var(--white);
  --header-bg:var(--teal) url(/assets/textures/teal.jpg) center/700px; --header-text:var(--white); --logo:url(/assets/logo/logo-white.png);
  --band-a:var(--purple) url(/assets/textures/purple.jpg) center/700px; --band-a-text:var(--white); --band-a-head:var(--white);
  --band-b:var(--green); --band-b-text:var(--ink); --band-b-head:var(--ink);
  --cta-bg:var(--purple); --cta-text:var(--white); --cta2-bg:var(--white); --cta2-text:var(--purple); --cta2-line:var(--white);
  --card:var(--white); --card-line:transparent; --link:var(--teal-ink);
  --foot-bg:var(--purple) url(/assets/textures/purple.jpg) center/700px; --foot-text:var(--white);
}

*{box-sizing:border-box;margin:0}
body{background:var(--page);color:var(--text);font:700 19px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95;color:var(--heading)}
.brush{font-family:var(--brush);font-weight:400;text-transform:none;letter-spacing:0;line-height:1}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.5em;border-radius:999px;padding:.72em 1.35em;font:700 19px/1.1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-cta{background:var(--cta-bg);color:var(--cta-text)}
.btn-ghost{background:var(--cta2-bg);color:var(--cta2-text);border-color:var(--cta2-line)}

/* mockup switcher (not part of the design) */
.switch{position:fixed;z-index:60;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;background:#222;color:#fff;border-radius:999px;padding:6px;font:600 13px/1 system-ui;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.switch button{all:unset;cursor:pointer;padding:8px 12px;border-radius:999px}
.switch button[aria-pressed="true"]{background:#fff;color:#222}
.clean .switch{display:none}

/* header */
header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(8px);color:var(--header-text)}
.nav{display:flex;align-items:center;gap:28px;height:84px}
.logo{width:150px;height:62px;background:var(--logo) left center/contain no-repeat;flex:none}
.nav ul{display:flex;gap:20px;list-style:none;padding:0;margin-left:auto;font-size:19px}
.nav ul a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
.nav .gift{display:inline-flex;align-items:center;gap:6px;padding:.45em .9em;border-radius:999px;background:var(--pink);color:var(--ink)}
.menu-btn{display:none;margin-left:auto;font:700 17px var(--body);background:none;border:2px solid currentColor;color:inherit;border-radius:999px;padding:.4em .9em}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-text);position:relative;overflow:hidden;padding:40px 0 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;position:relative;z-index:1}
.hero .brush{font-size:44px;color:var(--hero-brush);display:block;margin-bottom:6px;transform:rotate(-3deg);transform-origin:left}
.hero h1{font-size:clamp(60px,7vw,104px);color:var(--hero-head)}
.open{display:inline-flex;align-items:center;gap:10px;margin:22px 0 10px;padding:.5em 1em;border-radius:999px;background:var(--orange);color:var(--ink);font-size:19px}
.open i{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.hero p.lede{max-width:30ch;font-size:21px}

.search{margin-top:26px;max-width:520px;position:relative}
.search form{display:flex;gap:8px;background:var(--white);border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(51,51,51,.12);border:2px solid var(--teal)}
html[data-v="colour"] .search form{border-color:var(--white)}
.search input{flex:1;min-width:0;border:0;background:none;font:700 18px var(--body);color:var(--ink);padding:0 16px}
.search input::placeholder{color:#6b6b6b}
.results{margin-top:10px;background:var(--white);color:var(--ink);border-radius:var(--r-md);padding:8px;box-shadow:0 14px 40px rgba(51,51,51,.16);list-style:none}
.results li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-sm)}
.results li:hover{background:var(--tint-teal)}
.results .pin{flex:none;width:34px;height:34px;border-radius:50%;background:var(--tint-teal);display:grid;place-items:center;color:var(--teal-ink)}
.results b{display:block;font-size:17px;line-height:1.2}
.results small{display:block;font-size:15px;color:#555;line-height:1.3}
.results .mi{margin-left:auto;font-size:15px;color:var(--teal-ink);white-space:nowrap}
.results .cap{font-size:14px;color:#555;padding:6px 12px 2px}

.hero-art{position:relative;aspect-ratio:1/1;max-width:580px;justify-self:center;align-self:start;margin-top:12px;width:100%}
.hero-art .disc{position:absolute;inset:6%;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:var(--tint-teal);animation:morph 14s ease-in-out infinite}
html[data-v="colour"] .hero-art .disc{background:var(--pink)}
@keyframes morph{50%{border-radius:56% 44% 42% 58%/44% 58% 42% 56%;transform:rotate(6deg)}}
.hero-cut{position:absolute;left:17%;top:9%;width:66%;filter:drop-shadow(0 34px 28px rgba(51,51,51,.28));animation:float 8s ease-in-out infinite}
.tag{position:absolute;right:4%;bottom:10%;background:var(--white);color:var(--ink);border-radius:20px;padding:.5em 1.1em .6em;font-size:18px;line-height:1.1;box-shadow:0 12px 28px rgba(51,51,51,.16)}
.tag-b{display:block;font-family:var(--brush);font-size:26px;color:var(--teal-ink)}
@keyframes float{50%{transform:translateY(-14px) rotate(-2deg)}}

/* drifting background shapes (white-led) */
.blobs{position:absolute;inset:0;pointer-events:none}
.blobs span{position:absolute;border-radius:50%;opacity:.55;animation:drift 22s ease-in-out infinite}
.blobs span:nth-child(1){width:340px;height:340px;background:var(--tint-green);left:-120px;top:-80px}
.blobs span:nth-child(2){width:220px;height:220px;background:var(--tint-pink);left:38%;bottom:-90px;animation-delay:-7s}
.blobs span:nth-child(3){width:180px;height:180px;background:var(--tint-orange);right:-50px;top:30%;animation-delay:-13s}
html[data-v="colour"] .blobs span{opacity:.18;background:var(--white)}
@keyframes drift{50%{transform:translate(40px,30px) scale(1.08)}}

/* sections */
section{padding:88px 0}
.eyebrow{font-family:var(--brush);font-size:34px;color:var(--teal-ink);display:block;margin-bottom:4px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(44px,5.4vw,76px)}
.sec-head a{color:var(--link)}

.journey .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jcard{border-radius:var(--r-lg);padding:30px;min-height:300px;display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none}
.jcard h3{font-size:40px;color:inherit;margin:18px 0 10px}
.jcard p{font-size:19px;max-width:28ch}
.jcard .go{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:8px}
.jcard .ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.j1{background:var(--tint-teal);color:var(--ink)} .j2{background:var(--tint-orange);color:var(--ink)} .j3{background:var(--tint-pink);color:var(--ink)}
html[data-v="colour"] .j1{background:var(--teal) url(/assets/textures/teal.jpg) center/600px;color:var(--white)}
html[data-v="colour"] .j2{background:var(--orange);color:var(--ink)}
html[data-v="colour"] .j3{background:var(--purple) url(/assets/textures/purple.jpg) center/600px;color:var(--white)}
.jcard:hover .go{text-decoration:underline;text-underline-offset:5px}

.menu{background:var(--band-a);color:var(--band-a-text);border-radius:var(--r-lg) var(--r-lg) 0 0}
.menu h2,.menu .eyebrow{color:var(--band-a-head)}
html[data-v="white"] .menu .eyebrow{color:var(--teal-ink)}
.rail{display:flex;gap:20px;overflow-x:auto;padding:8px 16px 26px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(16px,(100% - 1240px)/2)}
.rail::-webkit-scrollbar{display:none}
.tile{flex:none;width:250px;scroll-snap-align:start;background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:18px 18px 20px;text-align:center;border:2px solid var(--card-line);transition:transform .25s ease}
.tile:hover{transform:translateY(-6px) rotate(-1deg)}
.tile .im{aspect-ratio:1/1;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:12px}
.tile .im{background:var(--tint-teal)}
html[data-v="colour"] .tile .im{background:var(--tint-pink)}
.tile img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(51,51,51,.2))}
.tile b{font-size:18px}

.makers{background:var(--band-b);color:var(--band-b-text)}
.makers h2{color:var(--band-b-head)}
html[data-v="colour"] .makers .eyebrow{color:var(--ink)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.mcard{background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:16px;text-align:center;border:2px solid var(--card-line)}
.mcard .lg{height:120px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:#fafafa;margin-bottom:10px;padding:10px}
.mcard .lg img{max-width:100%;max-height:100%;width:auto;height:auto}
.mcard b{font-size:17px;line-height:1.25;display:block}

.photos .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.photos figure{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:4/5}
.photos img{width:100%;height:100%;object-fit:cover}
.photos figcaption{position:absolute;left:14px;bottom:14px;background:var(--white);color:var(--ink);border-radius:999px;padding:.35em .9em;font-size:16px}

.find{background:var(--tint-teal)}
html[data-v="colour"] .find{background:var(--teal) url(/assets/textures/teal.jpg) center/700px;color:var(--white)}
html[data-v="colour"] .find h2,html[data-v="colour"] .find .eyebrow{color:var(--white)}
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.county{background:var(--white);color:var(--ink);border-radius:var(--r-md);padding:22px 22px 18px}
.county h3{font-size:28px;color:var(--purple);margin-bottom:10px;list-style:none;cursor:pointer}
.county summary::-webkit-details-marker{display:none}
.county summary{list-style:none}
.county summary h3::after{content:"";}
.county ul{list-style:none;padding:0}
.county li{padding:8px 0;border-top:2px solid #f0f0f0;font-size:17px;line-height:1.25}
.county li small{display:block;font-size:15px;color:#555}
.county .n{font:700 15px var(--body);vertical-align:middle;background:var(--tint-teal);color:var(--teal-ink);border-radius:999px;padding:.2em .6em;margin-left:6px}

.host{position:relative;overflow:hidden}
.host .box{border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;background:var(--tint-orange)}
html[data-v="colour"] .host .box{background:var(--orange)}
html[data-v="colour"] .host h2,html[data-v="colour"] .host .eyebrow{color:var(--ink)}
html[data-v="colour"] .host .btn-cta{background:var(--ink)}
html[data-v="colour"] .makers .sec-head a{color:var(--ink)}
.host h2{font-size:clamp(40px,4.6vw,66px)}
.host p{margin:14px 0 24px;max-width:46ch}
.host img{border-radius:var(--r-lg);aspect-ratio:4/5;object-fit:cover;width:100%}

.app .box{border-radius:var(--r-lg);padding:48px 56px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap;background:var(--purple) url(/assets/textures/purple.jpg) center/700px;color:var(--white)}
.app h2{color:var(--white);font-size:clamp(38px,4vw,58px)}
.app .brush{font-size:36px;color:var(--white)}
.stores{display:flex;gap:12px;flex-wrap:wrap}
.store{background:var(--white);color:var(--purple)}

footer{background:var(--foot-bg);color:var(--foot-text);padding:64px 0 90px;margin-top:88px;border-radius:var(--r-lg) var(--r-lg) 0 0}
footer .wrap{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px}
footer .logo{display:block;--logo:url(/assets/logo/logo-strap-white.png);width:220px;height:90px}
footer h4{font:400 22px var(--head);text-transform:uppercase;margin-bottom:10px}
footer ul{list-style:none;padding:0;font-size:17px;line-height:1.9}
footer a{text-decoration:none}
footer .small{font-size:15px;margin-top:16px;opacity:.9}

/* app pop-up after 3-5 s idle */
.pop{position:fixed;z-index:50;right:20px;bottom:76px;width:min(360px,100% - 32px);background:var(--white);color:var(--ink);border-radius:var(--r-md);padding:22px 22px 20px;box-shadow:0 20px 50px rgba(51,51,51,.28);border:3px solid var(--teal);transform:translateY(20px);opacity:0;pointer-events:none;transition:.35s ease}
.pop.show{transform:none;opacity:1;pointer-events:auto}
.pop h3{font-size:30px;margin-bottom:6px}
.pop p{font-size:17px;margin-bottom:14px}
.pop .btn{padding:.6em 1em}
.pop .x{position:absolute;right:10px;top:8px;background:none;border:0;font:700 26px var(--body);color:var(--ink);cursor:pointer;width:40px;height:40px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in,.clean .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media (max-width:980px){
  .nav ul{display:none}.menu-btn{display:inline-block}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:420px}
  .journey .grid,.photos .grid{grid-template-columns:minmax(0,1fr)}
  .counties{grid-template-columns:1fr 1fr}
  .host .box{grid-template-columns:1fr;padding:34px}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:18px}
  .nav{height:70px;gap:12px}.logo{width:118px;height:50px}
  .hero{padding:26px 0 48px}
  .hero .brush{font-size:30px}
  .hero-art{max-width:320px;margin-top:8px}
  .tag{font-size:16px}.tag-b{font-size:22px}
  .hero h1{font-size:64px}
  .open{margin:16px 0 6px;font-size:17px}
  .hero p.lede{font-size:18px}
  .search{margin-top:18px}
  .search .btn{padding:.7em 1em;font-size:18px}
  .search input{font-size:17px;padding:0 10px}
  section{padding:60px 0}
  .counties{grid-template-columns:1fr}
  .mgrid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:0 16px 8px}
  .mcard{flex:none;width:150px;scroll-snap-align:start}
  .mcard .lg{height:90px}
  .jcard{min-height:0;padding:22px;display:grid;grid-template-columns:52px 1fr;column-gap:16px}
  .jcard .ico{grid-row:span 3;width:52px;height:52px}
  .jcard h3{font-size:30px;margin:2px 0 6px}
  .jcard .go{padding-top:10px}
  .journey .grid{gap:14px}
  .photos .grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%;padding:0 16px}
  .photos figure{flex:none;width:78%;aspect-ratio:4/5;scroll-snap-align:start}
  .host img{display:none}
  .host .box{padding:30px 24px}
  section{padding:48px 0}
  .photos figure,.photos figure:first-child{aspect-ratio:4/3}
  .app .box{padding:34px 26px}
  footer .wrap{grid-template-columns:1fr}
}