/* Turpai Jaipur — shared stylesheet. Governed by DESIGN.md.
   Loaded by index.html, collection.html and wholesale.html.
   Edit here once; never fork per page. */

/* Zodiak — Indian Type Foundry, ITF Free Font License (commercial use
       permitted, self-hosting recommended). Two variable files carry every
       weight and a TRUE italic, which the red headline emphasis depends on. */
    @font-face{font-family:"Zodiak";src:url("fonts/Zodiak-Variable.woff2") format("woff2-variations");
      font-weight:100 900;font-style:normal;font-display:swap;}
    @font-face{font-family:"Zodiak";src:url("fonts/Zodiak-VariableItalic.woff2") format("woff2-variations");
      font-weight:100 900;font-style:italic;font-display:swap;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    :root{
      --red:#D80812;--red-dark:#B10510;
      --ink:#141414;
      --txt:#1F1D1A;--txt2:#5C5850;
      --bg:#FAF7F2;--bg2:#F3EEE5;--card:#FFFFFF;
      --brd:#E7E1D5;
      --gold:#B98A2F;--gold-text:#6F4A0D;
      --clay:#A25738;--clay-mid:#B36B45;
      --fd:'Zodiak',Georgia,serif;--fb:'Mukta',system-ui,sans-serif;--fm:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
      /* Devanagari display face. No free bilingual Latin+Devanagari family
         carries a true italic, which the red headline emphasis needs, so the
         scripts are split deliberately: Zodiak sets the Latin, Rozha One (also
         Indian Type Foundry) sets तुरपाई. Never set Devanagari in a Latin-only
         face — it falls back silently to whatever the device happens to have. */
      --fdev:'Rozha One','Noto Serif Devanagari',Georgia,serif;
      --ghost:#D8CFBC;
      --mw:1160px;
      /* the stitch — dashed seams, gold decorative / red where the brand speaks */
      --stitch-gold:repeating-linear-gradient(90deg,var(--gold) 0 9px,transparent 9px 16px);
      --stitch-red:repeating-linear-gradient(90deg,var(--red) 0 9px,transparent 9px 16px);
      --stitch-red-v:repeating-linear-gradient(180deg,var(--red) 0 9px,transparent 9px 16px);
    }
    html{scroll-behavior:smooth;}
    h1,h2,h3,h4,.dev,.f-wm,.hero-facts b,.pull p,.path-card h3,.c-card h3,.cap b{font-feature-settings:'ss01';}
    body{font-family:var(--fb);color:var(--txt);background:var(--bg);line-height:1.6;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased;}
    :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px;}
    /* grain atmosphere */
    body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.035;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
    img{max-width:100%;display:block;}
    main img{filter:saturate(1.03);}
    a{color:inherit;text-decoration:none;}
    .wrap{max-width:var(--mw);margin:0 auto;padding:0 24px;}
    .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:100;font-size:14px;}
    .skip:focus{left:0;}

    /* ---------- type & section primitives ---------- */
    .mono{font-family:var(--fm);letter-spacing:.14em;text-transform:uppercase;}
    .eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);position:relative;}
    /* Section marks — outlined numerals as architecture, the way the original
       page carried them. The eyebrow tucks up into the numeral's baseline so
       the two read as one interlocked mark rather than a stacked label. */
    .secnum{display:block;font-family:var(--fd);font-size:clamp(54px,6.9vw,96px);line-height:.82;
      font-weight:600;color:transparent;-webkit-text-stroke:1px var(--ghost);
      letter-spacing:-.02em;margin:0 0 -6px -4px;user-select:none;pointer-events:none;}
    @supports not ((-webkit-text-stroke:1px #000)){.secnum{color:var(--ghost);opacity:.55;}}
    .stitch{border:0;height:2px;width:64px;margin:12px 0 14px;background:var(--stitch-gold);
      transform:scaleX(0);transform-origin:left center;}
    .sec-head.in .stitch,.no-js-reveal .stitch{transform:scaleX(1);
      transition:transform .85s cubic-bezier(.16,1,.3,1) .1s;}
    html:not(.js-reveal) .stitch{transform:scaleX(1);}
    @media (prefers-reduced-motion:reduce){.stitch{transform:scaleX(1)!important;transition:none!important;}}
    .sec-head{max-width:640px;margin-bottom:44px;}
    .sec-head h2{text-wrap:balance;font-family:var(--fd);font-weight:600;font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-0.024em;margin:0 0 12px;color:var(--ink);}
    .sec-head h2 em{font-style:italic;color:var(--red);}
    .sec-head p{color:var(--txt2);font-size:15.5px;text-wrap:pretty;}
    .sec{padding:88px 0 96px;}
    .sec-alt{background:var(--bg2);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);}
    .btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;padding:14px 26px;border-radius:2px;transition:all .25s;cursor:pointer;border:1px solid transparent;touch-action:manipulation;min-height:48px;}
    .btn:active{transform:scale(.98);}
    .btn-red{background:var(--red);color:#fff;}
    .btn-red:hover{background:var(--red-dark);}
    .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
    .btn-ghost:hover{background:var(--ink);color:#fff;}

    /* ---------- scroll choreography ---------- */
    /* Hidden only when JS is running and IO is supported, so content can never be stranded. */
    html.js-reveal .reveal{opacity:0;transform:translateY(22px);}
    html.js-reveal .reveal.in{opacity:1;transform:none;
      transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
      transition-delay:var(--d,0ms);}
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto;}
      html.js-reveal .reveal,html.js-reveal .reveal.in{opacity:1;transform:none;transition:none;}
      *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
    }

    /* ---------- topbar + header ---------- */
    .topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:12.5px;}
    .topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;}
    .topbar a{color:#fff;font-weight:500;}
    .topbar .r{display:flex;gap:22px;white-space:nowrap;}
    .topbar .l-short{display:none;}
    .hdr{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--brd);}
    .hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
    .hdr-logo img{height:44px;width:auto;}
    .nav{display:flex;align-items:center;gap:32px;}
    .nav a{font-size:14px;font-weight:500;color:var(--txt);position:relative;padding:10px 0;}
    .nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1);}
    .nav a:not(.btn):hover::after{transform:scaleX(1);}
    .nav a[aria-current="true"]{color:var(--ink);}
    .nav a[aria-current="true"]::after{transform:scaleX(1);}
    .nav .btn{padding:11px 20px;}
    .burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
    .burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;}

    /* ---------- hero ---------- */
    .hero{overflow:hidden;position:relative;background:
      radial-gradient(1200px 500px at 85% -10%, #F0E4D2 0%, transparent 60%),var(--bg);}
    .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:60px;padding-bottom:56px;position:relative;z-index:1;}
    /* तुरपाई as claimed architecture — the ghost word the page is named after,
       set in a real Devanagari display face and allowed to bleed off the edge. */
    .wm{position:absolute;z-index:0;font-family:var(--fdev);font-weight:400;
      font-size:clamp(120px,20vw,300px);line-height:1;color:transparent;
      -webkit-text-stroke:1.2px rgba(20,20,20,.09);white-space:nowrap;
      user-select:none;pointer-events:none;top:-10px;left:-3vw;}
    @supports not ((-webkit-text-stroke:1px #000)){.wm{color:rgba(20,20,20,.07);}}
    @keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
    .hero-copy>*{animation:riseIn .6s cubic-bezier(.16,1,.3,1) both;}
    .hero-copy>*:nth-child(1){animation-delay:.05s}.hero-copy>*:nth-child(2){animation-delay:.13s}
    .hero-copy>*:nth-child(3){animation-delay:.21s}.hero-copy>*:nth-child(4){animation-delay:.29s}
    .hero-copy>*:nth-child(5){animation-delay:.37s}
    .hero-art{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .15s both;}
    .hero .eyebrow{display:block;}
    .hero h1{font-family:var(--fd);font-weight:600;font-size:clamp(37px,5.05vw,66px);line-height:1.04;letter-spacing:-0.028em;color:var(--ink);margin:16px 0 20px;text-wrap:balance;}
    .hero h1 em{font-style:italic;color:var(--red);}
    .hero-sub{font-size:16.5px;color:var(--txt2);max-width:500px;margin-bottom:32px;text-wrap:pretty;}
    .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
    .hero-facts{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--brd);padding-top:24px;}
    .hero-facts b{display:block;font-family:var(--fd);font-size:22px;color:var(--ink);font-weight:600;}
    .hero-facts span{font-size:12.5px;color:var(--txt2);letter-spacing:.04em;text-transform:uppercase;}
    /* Two frames, overlapped — the layering is what gave the old hero its depth. */
    .hero-art{position:relative;}
    .hero-art .ph1{display:block;margin-left:auto;width:78%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;box-shadow:0 30px 60px rgba(20,20,20,.18);height:auto;}
    .hero-art .ph2{position:absolute;left:0;bottom:-12px;width:46%;aspect-ratio:3/4;object-fit:cover;object-position:top;border:6px solid var(--bg);box-shadow:0 24px 48px rgba(20,20,20,.22);height:auto;}
    .hero-art::before{content:"";position:absolute;right:-28px;top:36px;width:78%;height:88%;border:1px solid var(--gold);opacity:.55;}
    .hero-badge{position:absolute;right:6%;bottom:6%;background:var(--ink);color:#fff;padding:14px 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;z-index:2;}
    .hero-badge b{display:block;font-family:var(--fd);font-size:17px;letter-spacing:.02em;text-transform:none;color:#fff;}

    /* ---------- workshop strip (replaces the marquee) ---------- */
    .makes{background:var(--bg2);border-bottom:1px solid var(--brd);}
    .makes .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:0;row-gap:6px;padding-top:18px;padding-bottom:18px;}
    .makes-label{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-right:22px;}
    .makes span{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);display:inline-flex;align-items:center;}
    .makes span:not(:last-child)::after{content:"";display:inline-block;width:18px;height:2px;margin:0 14px;background:var(--stitch-gold);}

    /* ---------- the sewn-in label ----------
       Not four cards in a row: one object, the woven care label that is already
       stitched into every garment. Narrow, dense and utilitarian, the way real
       labels are — the form carries the information without decorating it. */
    .care{border-bottom:1px solid var(--brd);background:var(--bg2);}
    .care .wrap{padding-top:44px;padding-bottom:48px;}
    .label{max-width:760px;margin:0 auto;background:var(--card);
      border:1px solid var(--ink);padding:20px 26px 16px;position:relative;
      box-shadow:0 1px 0 rgba(20,20,20,.06);}
    /* the edge-stitch that holds the label to the seam */
    .label::before,.label::after{content:"";position:absolute;left:10px;right:10px;height:2px;
      background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);opacity:.28;}
    .label::before{top:6px;} .label::after{bottom:6px;}
    .label-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
      font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.18em;
      text-transform:uppercase;color:var(--ink);padding-bottom:12px;
      border-bottom:1px solid var(--brd);}
    .label-head span:last-child{color:var(--gold-text);}
    .label-rows{list-style:none;display:grid;grid-template-columns:1fr 1fr;
      gap:2px 34px;margin:0;padding:14px 0 12px;}
    .label-rows li{display:grid;grid-template-columns:20px 1fr;gap:0 12px;
      align-items:start;padding:9px 0;}
    .label-rows svg{width:18px;height:18px;color:var(--clay);grid-row:span 2;margin-top:2px;}
    .label-rows b{font-family:var(--fm);font-size:14.5px;font-weight:600;letter-spacing:.1em;
      text-transform:uppercase;color:var(--ink);line-height:1.25;}
    .label-rows span{font-size:13.5px;color:var(--txt2);line-height:1.45;}
    .label-rows a{color:var(--red);font-weight:600;}
    .label-rows a:hover{text-decoration:underline;}
    .label-foot{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--txt2);border-top:1px solid var(--brd);padding-top:11px;}
    @media(max-width:700px){
      .label{padding:18px 18px 14px;}
      .label-rows{grid-template-columns:1fr;gap:0;}
      .label-head{font-size:11px;letter-spacing:.14em;}
    }

    /* ---------- the collection: mosaic ----------
       A dense, varied-tile wall with the caption set into the photograph.
       This density is what made the page feel like a magazine rather than
       a catalogue of cards. */
    .cats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:214px;gap:18px;}
    .cat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--brd);grid-row:span 2;display:block;}
    .cat-xl{grid-column:span 2;}
    .cat picture{display:block;height:100%;}
    .cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s ease;}
    .cat-xl img{object-position:50% 30%;}
    .cat:hover img,.cat:focus-visible img{transform:scale(1.06);}
    .cat-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(15,13,10,.86));color:#fff;padding:54px 16px 15px;display:flex;justify-content:space-between;align-items:end;gap:10px;}
    .cat-cap h3{font-family:var(--fd);font-size:17.5px;font-weight:600;line-height:1.22;letter-spacing:-.012em;}
    .cat-cap .spec{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px;}
    .cat-cap .arw{font-size:18px;transition:transform .3s;flex:none;}
    .cat:hover .arw{transform:translateX(5px);}
    /* the dark tile — one focal anchor that breaks the rhythm of the wall */
    .cat-cta{grid-column:span 2;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:34px;border:0;}
    .cat-cta .eyebrow{color:var(--gold);}
    .cat-cta .big{font-family:var(--fd);font-size:clamp(22px,2.4vw,31px);line-height:1.18;font-weight:600;letter-spacing:-.018em;}
    .cat-cta .go{color:var(--red);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;transition:letter-spacing .25s;}
    .cat-cta:hover .go{letter-spacing:.14em;}

    /* ---------- story ---------- */
    .story{background:linear-gradient(rgba(162,87,56,.05),rgba(162,87,56,.05)),var(--bg);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);}
    .story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
    .story-img{position:relative;}
    .story-img .main{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;position:relative;z-index:1;}
    .story-img .sm{position:absolute;right:-16px;bottom:-26px;width:46%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border:7px solid var(--bg);box-shadow:0 24px 48px rgba(20,20,20,.22);height:auto;z-index:2;}
    /* the offset frame sits between the section ground and the photograph */
    .story-img::after{content:"";position:absolute;left:-20px;top:-20px;width:60%;height:60%;border:1px solid var(--clay-mid);opacity:.75;z-index:0;}
    /* Minimal pull quote — the stitch rule carries it; the box was heavy-handed. */
    .pull{margin:30px 0 8px;padding:18px 0 0;position:relative;background:none;border:0;}
    .pull::before{content:"";display:block;height:2px;width:64px;margin-bottom:16px;background:var(--stitch-red);}
    .pull p{font-family:var(--fd);font-style:italic;font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--ink);margin:0 0 6px;}
    .pull cite{font-style:normal;font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);}
    .story h2{font-family:var(--fd);font-weight:600;font-size:clamp(26px,3.3vw,38px);line-height:1.12;letter-spacing:-0.022em;color:var(--ink);margin:0 0 18px;}
    .story h2 em{font-style:italic;color:var(--red);}
    .story p{color:var(--txt2);font-size:15.5px;margin-bottom:14px;}
    .story-points{margin:26px 0 30px;display:grid;gap:14px;}
    .story-points li{list-style:none;display:flex;gap:14px;font-size:15px;color:var(--txt);}
    .story-points li::before{content:"";flex:none;width:14px;height:2px;margin-top:11px;background:repeating-linear-gradient(90deg,var(--clay) 0 4px,transparent 4px 7px);}

    /* ---------- two ways to buy ---------- */
    .paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
    .path-card{background:var(--card);border:1px solid var(--brd);display:flex;flex-direction:column;}
    .path-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1;}
    .plate-tag{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);font-weight:700;}
    .path-card .plate-tag{margin-bottom:-4px;}
    /* without photographs these cards earn their weight from the stitch rule */
    .path-card::before{content:"";display:block;height:2px;width:100%;background:var(--stitch-gold);opacity:.9;}
    .path-card:first-child::before{background:var(--stitch-red);}
    .path-card h3{font-family:var(--fd);font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-0.018em;}
    .path-card ul{display:grid;gap:9px;flex:1;}
    .path-card li{list-style:none;display:flex;gap:12px;font-size:14.5px;color:var(--txt2);}
    .path-card li::before{content:"";flex:none;width:14px;height:2px;margin-top:10px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px);}
    .path-card .btn{align-self:flex-start;margin-top:6px;}

    /* ---------- faq ---------- */
    .faq-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;}
    .faq-aside{position:sticky;top:104px;}
    .faq-ask{margin-top:28px;border-top:1px solid var(--brd);padding-top:22px;}
    .faq-ask b{display:block;font-family:var(--fd);font-size:19px;color:var(--ink);margin-bottom:6px;}
    .faq-ask p{font-size:14.5px;color:var(--txt2);margin-bottom:14px;}
    .faq-ask a{font-size:14px;font-weight:600;color:var(--red);display:inline-flex;gap:8px;align-items:center;transition:gap .25s;min-height:44px;}
    .faq-ask a:hover{gap:13px;}
    .faq details{border-bottom:1px solid var(--brd);padding:22px 0;}
    .faq details:first-child{border-top:1px solid var(--brd);}
    .faq details[open] summary{color:var(--red);}
    .faq summary{font-family:var(--fd);font-size:19px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;transition:color .2s;min-height:44px;align-items:center;padding:0 4px;}
    .faq summary::-webkit-details-marker{display:none;}
    .faq summary::after{content:"+";font-family:var(--fb);color:var(--red);font-size:22px;font-weight:400;line-height:1;transition:transform .25s;}
    .faq details[open] summary::after{transform:rotate(45deg);}
    .faq details p{color:var(--txt2);font-size:15px;padding-top:12px;max-width:640px;}
    .faq a{color:var(--red);}

    /* ---------- visit & enquire (light) ---------- */
    .visit .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
    .c-rows{display:grid;gap:20px;margin-bottom:0;}
    .c-row{display:flex;gap:16px;align-items:flex-start;}
    .c-ico{width:42px;height:42px;flex:none;border:1px solid var(--brd);background:var(--card);display:grid;place-items:center;color:var(--clay);transition:border-color .25s;}
    .c-row:hover .c-ico{border-color:var(--clay);}
    .c-row b{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt2);margin-bottom:4px;font-weight:700;}
    .c-row a,.c-row span{color:var(--ink);font-size:15.5px;font-weight:500;}
    .c-row a:hover{color:var(--red);}
    .map{border:1px solid var(--brd);}
    .map iframe{display:block;width:100%;height:280px;border:0;filter:saturate(.9);}
    .c-side{display:grid;gap:22px;}
    .c-card{background:var(--card);border:1px solid var(--brd);padding:32px;}
    .c-card h3{font-family:var(--fd);font-size:22px;color:var(--ink);margin-bottom:8px;}
    .c-card>p{font-size:14px;color:var(--txt2);margin-bottom:22px;}
    .c-card .btn{width:100%;justify-content:center;margin-bottom:12px;}
    .c-note{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt2);text-align:center;margin:0!important;}

    /* ---------- footer — the one dark block; the thread ties off ---------- */
    .footer{background:#0E0D0B;color:rgba(255,255,255,.55);font-size:13.5px;position:relative;overflow:hidden;}
    .footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--stitch-red);opacity:.9;}
    .footer .wrap{padding-top:0;padding-bottom:34px;position:relative;z-index:1;}
    .f-wm{position:absolute;right:-2vw;bottom:-6vw;z-index:0;font-family:var(--fd);font-weight:600;font-size:clamp(160px,26vw,380px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);pointer-events:none;user-select:none;white-space:nowrap;}
    .f-cta{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:54px 0 48px;border-bottom:1px solid rgba(255,255,255,.12);}
    .f-cta .eyebrow{display:block;margin-bottom:10px;color:var(--gold);}
    .f-cta h3{font-family:var(--fd);font-size:clamp(24px,2.9vw,36px);color:#fff;font-weight:600;line-height:1.08;letter-spacing:-0.024em;max-width:560px;}
    .f-cta h3 em{font-style:italic;color:#FF6B6B;}
    .f-cta-btns{display:flex;gap:12px;flex-wrap:wrap;}
    .f-cta .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;}
    .f-cta .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
    .f-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.7fr;gap:44px;padding:48px 0 42px;border-bottom:1px solid rgba(255,255,255,.1);}
    .f-grid img{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:18px;}
    .f-brand p{max-width:290px;line-height:1.6;}
    .f-brand .f-line{margin-top:18px;height:2px;width:56px;background:var(--stitch-red);}
    .f-grid h4{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;}
    .f-grid a{display:block;margin-bottom:11px;color:rgba(255,255,255,.55);width:fit-content;transition:color .2s;}
    .f-grid a:hover{color:#fff;}
    .f-visit{display:grid;gap:14px;}
    .f-visit .row{display:flex;gap:12px;align-items:flex-start;}
    .f-visit svg{flex:none;width:17px;height:17px;color:var(--gold);margin-top:2px;}
    .f-visit b{display:block;color:#fff;font-weight:500;font-size:13.5px;margin-bottom:2px;}
    .f-visit a{margin:0;}
    .f-visit .val{color:rgba(255,255,255,.55);line-height:1.5;}
    .f-open{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-size:12px;color:rgba(255,255,255,.6);}
    .f-open i{width:6px;height:6px;border-radius:50%;background:#4CAF6D;flex:none;}
    .f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;}
    .f-bottom a{color:rgba(255,255,255,.55);}
    .f-bottom a:hover{color:#fff;}
    .f-bottom .sep{color:rgba(255,255,255,.25);padding:0 8px;}

    /* ---------- responsive ---------- */
    @media(max-width:960px){
      .hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:64px;}
      .hero-art{order:-1;margin-bottom:26px;}
      .hero-art .ph1{width:78%;}
      .hero-art .ph2{width:46%;}
      .wm{font-size:clamp(120px,20vw,240px);top:-10px;}
      .cats{grid-template-columns:1fr 1fr;grid-auto-rows:158px;}
      .story .wrap,.visit .wrap{grid-template-columns:1fr;gap:44px;}
      .story-img .sm{right:0;}
      .paths{grid-template-columns:1fr;}
      .faq-split{grid-template-columns:1fr;gap:32px;}
      .faq-aside{position:static;}
      .f-grid{grid-template-columns:1fr 1fr;gap:32px;}
      .f-brand{grid-column:1/-1;}
      .nav{position:fixed;inset:72px 0 auto 0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:24px;gap:20px;border-bottom:1px solid var(--brd);transform:translateY(-130%);transition:transform .35s;z-index:40;}
      .nav.open{transform:none;}
      .burger{display:block;}
      .topbar .r span.hours{display:none;}
    }
    @media(max-width:540px){
      .wrap{padding:0 16px;}
      .sec{padding:64px 0;}
      .topbar .wrap{justify-content:space-between;}
      .topbar .l{display:none;}
      .topbar .l-short{display:inline;}
      .cats{grid-auto-rows:134px;gap:12px;}
      .cat-cap{padding:44px 12px 12px;}
      .cat-cap h3{font-size:14px;}
      .cat-cap .spec{font-size:9px;letter-spacing:.06em;}
      .cat-cta{padding:22px;}
      .secnum{font-size:clamp(46px,13vw,64px);}
      .wm{font-size:clamp(100px,24vw,170px);-webkit-text-stroke-width:1px;}
      .hero-art .ph2{width:46%;bottom:-10px;border-width:5px;}
      .story-img .sm{width:44%;bottom:-18px;border-width:5px;}
      .makes-label{width:100%;margin:0 0 4px;}
      .f-grid{grid-template-columns:1fr;gap:26px;}
    }

/* ---------- the edit: a curated four, not the whole rack ----------
   The homepage shows the colourway story only. The full wall, the detail
   shots and the workshop's other garment types live on collection.html,
   so the first thing after the hero is why-we-exist, not inventory. */
.edit{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.edit .cat{grid-row:auto;grid-column:auto;aspect-ratio:3/4;}
.edit-link{display:flex;justify-content:space-between;align-items:center;gap:22px;
  flex-wrap:wrap;background:var(--ink);color:#fff;padding:26px 30px;margin-top:18px;}
.edit-link .eyebrow{display:block;color:var(--gold);margin-bottom:7px;}
.edit-link b{font-family:var(--fd);font-weight:600;letter-spacing:-.016em;
  font-size:clamp(19px,2.1vw,26px);line-height:1.2;display:block;max-width:34ch;}
.edit-link .go{color:var(--red);font-weight:600;font-size:13.5px;letter-spacing:.06em;
  text-transform:uppercase;transition:letter-spacing .25s;white-space:nowrap;}
.edit-link:hover .go{letter-spacing:.14em;}
.makes-link{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin-left:auto;white-space:nowrap;}
.makes-link:hover{text-decoration:underline;}
@media(max-width:960px){.edit{grid-template-columns:1fr 1fr;}
  .makes-link{margin:6px 0 0;width:100%;}}
@media(max-width:540px){.edit{gap:12px;}.edit-link{padding:20px;}}

/* ---------- interior pages (collection, wholesale) ---------- */
.page-head{background:var(--bg2);border-bottom:1px solid var(--brd);}
.page-head .wrap{padding-top:64px;padding-bottom:64px;}
.page-head h1{font-family:var(--fd);font-weight:600;color:var(--ink);
  font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.026em;
  margin:0 0 14px;text-wrap:balance;}
.page-head h1 em{font-style:italic;color:var(--red);}
.page-head p{color:var(--txt2);font-size:16px;max-width:60ch;text-wrap:pretty;}
.page-lede{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:center;}
.page-lede img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:50% 32%;}
@media(max-width:900px){.page-lede{grid-template-columns:1fr;gap:28px;}}

/* the four, full length */
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ways .cat{grid-row:auto;grid-column:auto;aspect-ratio:2/3;}
@media(max-width:960px){.ways{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.ways{gap:12px;}}

/* detail pairs */
.details{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.details figure{margin:0;}
.details img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;}
.details figcaption{padding:13px 0 0;}
.details b{display:block;font-family:var(--fd);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.014em;}
.details span{display:block;font-size:14px;color:var(--txt2);line-height:1.5;margin-top:3px;}
@media(max-width:700px){.details{grid-template-columns:1fr;gap:18px;}}

/* the workshop's other garment types, as enquiry links */
.makes-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;
  border-top:1px solid var(--brd);}
.makes-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--brd);transition:padding-left .25s;}
.makes-list a:hover{padding-left:8px;}
.makes-list b{font-family:var(--fd);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.014em;}
.makes-list em{font-style:normal;font-family:var(--fm);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .25s;white-space:nowrap;}
.makes-list a:hover em,.makes-list a:focus-visible em{opacity:1;}
@media(max-width:700px){.makes-list{grid-template-columns:1fr;gap:0;}}

/* wholesale: plain facts, two columns */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 48px;}
.facts h3{font-family:var(--fd);font-size:21px;font-weight:600;color:var(--ink);
  letter-spacing:-.016em;margin-bottom:9px;}
.facts h3::before{content:"";display:block;height:2px;width:44px;margin-bottom:13px;
  background:var(--stitch-gold);}
.facts p{color:var(--txt2);font-size:15.5px;text-wrap:pretty;}
.facts ul{list-style:none;display:grid;gap:8px;margin-top:4px;}
.facts li{display:flex;gap:11px;font-size:15px;color:var(--txt2);}
.facts li::before{content:"";flex:none;width:14px;height:2px;margin-top:10px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px);}
@media(max-width:760px){.facts{grid-template-columns:1fr;gap:28px;}}

/* --- fixes --- */
/* .faq-ask a paints links red; a red button inside it went red-on-red. */
.faq-ask .btn-red{color:#fff;}
.faq-ask .btn-ghost{color:var(--ink);}
.faq-ask .btn-ghost:hover{color:#fff;}
.faq-ask .btn{gap:10px;}
/* touch devices never hover, so the enquire affordance must not depend on it */
@media(hover:none){.makes-list em{opacity:1;}}