/* Evertide Studio: concept C (Shop front), built against ../../DESIGN.md.
   Departures that came with concept C: Karla headlines (Fraunces kept for product names), 6px corners.
   Light only: the brand has no dark palette yet. */
@font-face{font-family:"Karla";src:url(fonts/karla-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-9pt.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --page:#FBFAF7; --wall:#F4F4F1; --linen:#F5F1E8; --ink:#1A1A1A; --mute:#6B6862; --hairline:#D6D3CB;
  --tide:#3F5B5C; --tide-deep:#344C4D;
  --r:6px; --wrap:1240px; --gut:20px;
  --ease:cubic-bezier(.16,1,.3,1);   /* exponential ease-out */
  --t-fast:200ms; --t:320ms; --t-slow:400ms;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--page);color:var(--ink);font:400 16px/1.55 "Karla",system-ui,sans-serif;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* casual-save guard: a clear layer over every image and video, so right-click and long-press hit it, not the file */
.no-save{position:relative;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.shield{position:absolute;inset:0;z-index:1;background:transparent}
.hero-media{border-radius:var(--r);overflow:hidden}
a{color:inherit}
ul{list-style:none}
::selection{background:var(--tide);color:var(--page)}
:focus-visible{outline:2px solid var(--tide);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--tide);color:var(--page);padding:10px 14px;border-radius:var(--r);z-index:30;font-weight:600;text-decoration:none;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:12px}
h1,h2{font-family:"Karla",sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}

.btn{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:var(--r);background:var(--tide);color:var(--page);
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{background:var(--tide-deep)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:9px 16px;font-size:14px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--page);border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease)}
.site-header.scrolled{border-bottom-color:var(--hairline)}
.bar{display:flex;align-items:center;gap:24px;height:64px}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--mute);padding:8px 10px;border-radius:var(--r);transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.nav a:hover{color:var(--ink);background:var(--wall)}
@media (max-width:420px){.nav{display:none}.bar .btn{margin-left:auto}}

/* hero */
.hero{padding:28px 0 48px}
.hero-grid{display:grid;gap:26px}
.hero h1{font-size:clamp(36px,5.4vw,60px);max-width:14ch}
.hero p{margin-top:16px;font-size:18px;color:var(--mute);max-width:38ch}
.hero .btn{margin-top:24px}
.hero-fig picture,.hero-img{border-radius:var(--r);overflow:hidden}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-fig figcaption{font-size:13px;color:var(--mute);margin-top:8px}
@media (min-width:768px){.hero{padding:56px 0 72px}.hero-grid{grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}}

/* product lines */
.lines{padding:0 0 56px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:block;text-decoration:none;background:var(--wall);border-radius:var(--r);overflow:hidden;
  transition:transform var(--t) var(--ease),background-color var(--t) var(--ease)}
.tile-media{overflow:hidden}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.tile-txt{padding:14px 16px 16px}
.tile h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.tile p{color:var(--mute);font-size:14px;margin-top:2px}
@media (hover:hover){.tile:hover{transform:translateY(-3px)}.tile:hover img{transform:scale(1.035)}}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,1fr);gap:18px}.lines{padding-bottom:72px}}

/* shop */
.shop{padding:56px 0 64px;border-top:1px solid var(--hairline)}
.shop-head h2{font-size:clamp(28px,3.6vw,40px)}
.shop-head p{color:var(--mute);margin-top:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.tab{flex:none;font:600 15px/1 "Karla",sans-serif;color:var(--ink);background:var(--page);border:1px solid var(--hairline);border-radius:999px;
  padding:10px 14px;cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--tide);border-color:var(--tide);color:var(--page)}
.tab-n{font-weight:400;opacity:.7;margin-left:2px}
.tab[aria-selected="true"] .tab-n{opacity:.92}  /* AA contrast on Tide (Lighthouse, 8 Nov 2026) */
html:not(.js) .tabs{display:none}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr);gap:36px 20px}.shop{padding:80px 0 88px}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
.card a{display:block;text-decoration:none;border-radius:var(--r)}
.card-media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--wall);aspect-ratio:1;
  transition:transform var(--t) var(--ease)}
.card-img,.card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-img{transition:transform var(--t-slow) var(--ease)}
.card-video{opacity:0;transition:opacity var(--t-slow) var(--ease);background:transparent}
.card.is-playing .card-video{opacity:1}
.card-name{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:18px;line-height:1.25;margin-top:12px;letter-spacing:0}
.card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--mute);margin-top:3px}
.card-meta b{color:var(--ink);font-weight:700;white-space:nowrap}
@media (max-width:767px){.card-meta{display:block}.card-meta span{display:block}.card-meta b{display:block;margin-top:4px}}
@media (hover:hover){
  .card a:hover .card-media{transform:translateY(-3px)}
  .card a:hover .card-img{transform:scale(1.035)}
  .card a:hover .card-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
}
.card a:focus-visible{outline-offset:6px}
.card[hidden]{display:none}
.note{font-size:13px;color:var(--mute);margin-top:28px}
/* category landing pages (/needlepoint/, /ornaments/, /planners/) */
.cat-page{border-top:0;padding-top:28px}
.crumbs{font-size:14px;color:var(--mute);margin-bottom:22px}
.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.cat-page h1{font-size:clamp(30px,4.4vw,46px);max-width:20ch}
.cat-intro{font-size:17px;max-width:62ch;margin:12px 0 30px!important}
.back{margin-top:14px}
.back a{color:var(--tide);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
@media (min-width:768px){.cat-page{padding-top:40px}}

/* about */
.about{padding:56px 0;background:var(--wall)}
.about-grid{display:grid;gap:22px}
.about-mark{width:44px}
.about h2{font-size:26px}
.about p{color:var(--mute);margin-top:10px;max-width:60ch}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;font-size:15px}
.facts b{display:block;font-size:16px}
.facts span{color:var(--mute)}
@media (min-width:768px){.about{padding:80px 0}.about-grid{grid-template-columns:auto 1.2fr 1fr;gap:40px;align-items:start}}

.closing{padding:56px 0}
.closing-row{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.closing h2{font-size:clamp(28px,4vw,44px);max-width:20ch}
@media (min-width:768px){.closing{padding:88px 0}.closing-row{flex-direction:row;justify-content:space-between;align-items:center}}

.site-footer{border-top:1px solid var(--hairline);padding:32px 0 40px;font-size:14px;color:var(--mute)}
.foot{display:flex;flex-direction:column;gap:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none;transition:color var(--t-fast) var(--ease)}.foot a:hover{color:var(--ink)}
@media (min-width:768px){.foot{flex-direction:row;justify-content:space-between}}

/* motion: one quiet reveal as sections and cards enter, and a quick settle when the filter changes */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  .grid.is-filtering .card{opacity:0;transform:translateY(6px);transition:opacity var(--t-fast) ease-out,transform var(--t-fast) ease-out}
  .card.enter{animation:settle var(--t) var(--ease) both;animation-delay:calc(var(--i,0) * 22ms)}
  @keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .card-media,.card-img,.tile,.tile img{transition:none}
  .card a:hover .card-media,.tile:hover{transform:none}
  .card a:hover .card-img,.tile:hover img{transform:none}
}