/* generated by tools/build.mjs (src/site/site.css + font faces) — do not edit */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/jost-latin-wght-normal.7726a5cd6f.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-cyrillic-ext-opsz-normal.c4fbd99940.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-cyrillic-opsz-normal.e553fa829f.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-opsz-normal.f2ea9c12d2.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Kelsuu homepage: mockup of the Claude Design handoff. Static, no script. */
/* Jost (variable) and Source Serif 4 @font-face rules are generated by tools/build.mjs and
   prepended ahead of this file at build time — see buildSite(). */

:root{
  --paper:#f5f3ee;--stone:#ebe7de;--line:#dedad1;--ink:#22201c;--body:#4a463f;--ash:#6b665d;--scroll:#a9a399;
  --deep:#2e4f52;--on-deep-eyebrow:#cfdedb;--on-deep-body:#e7ecE9;
  --ak:#ece6da;--kara:#3a312a;--kelsuu:#3d6566;--boz:#a9a399;--kyzyl:#a3392b;--sary:#c99a3c;--archa:#4e5a42;
  --side:clamp(20px,4vw,56px);--section:clamp(120px,14vw,200px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 Jost,system-ui,sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover,a:focus-visible{color:var(--deep)}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.serif{font-family:'Source Serif 4',Georgia,serif;font-size:17px;line-height:1.7;color:var(--body)}
.eyebrow{font-size:14px;line-height:1.35;letter-spacing:.15em;text-transform:uppercase}
.h2{font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.02em}
.wrap{padding-inline:var(--side)}
.section{padding-block:var(--section)}

/* Lockup: symbol left, wordmark right. Wordmark = .93 × symbol height, gap = .35 × symbol height. */
.lockup{--s:70px;display:inline-flex;align-items:center;gap:calc(var(--s) * .35);line-height:1}
.lockup img{height:var(--s);width:auto}
.lockup span{font-size:calc(var(--s) * .93);font-weight:350;letter-spacing:0} /* handoff: 350 at display sizes, 400 below ~32px */
.lockup.lk-hero{--s:clamp(64px,10vw,150px)}
.lockup.lk-small{--s:22px}
.lockup.lk-small span{font-size:20px;font-weight:400}
.lockup.lk-small{gap:8px}

/* 1. Header over the hero */
.site-header{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:28px var(--side)}
.header-mark{visibility:hidden} /* only shown where the scroll-linked header below is supported */
.site-header nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px);font-size:15px;line-height:1}
.pill{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:10px 18px}

/* 2. Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tagline{margin-top:clamp(24px,3vw,40px)}
.tagline span:first-child{display:inline-block;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(19px,1.75vw,24px);color:var(--ink);line-height:1.5}
.tagline span:last-child{display:inline-block;margin-top:.5em;color:var(--ash);font-size:clamp(14px,1.2vw,16px);line-height:1.5}
.hero-arrow{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(24px,3vw,36px);padding:.95em 1.9em;border:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:500;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s ease,color .2s ease} /* demo 1's button: a square ink outline, filled on hover */
.hero-arrow span{display:inline-block;transition:transform .3s ease}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--ink);color:var(--paper)}
.hero-arrow:hover span,.hero-arrow:focus-visible span{transform:translateX(4px)}
.hero-arrow:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.suu{color:var(--kelsuu)} /* "suu" is water in Kyrgyz: the wordmark's second half in the lake's colour */
/* Mountains: flat layered ridges along the bottom of the hero, "between sky and earth". */
.horizon{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(110px,16vw,240px)}

/* 3. Intro */
.intro{text-align:center}
.intro.section{padding-block:clamp(90px,10.5vw,150px)}
.intro p{max-width:980px;margin-inline:auto;font-size:clamp(20px,2.6vw,33px);font-weight:300;line-height:1.3;letter-spacing:-.015em}

/* 4. First collection */
.rule-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;margin-bottom:48px}
.rule-head .meta{color:var(--ash);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,36px)}
.card figure{margin:0}
.ph{position:relative;aspect-ratio:4/5;background:var(--stone);display:grid;place-items:center}
.ph svg{width:62%;height:auto}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-link{display:block;color:inherit}
.card-link:hover .card-name,.card-link:focus-visible .card-name{color:var(--deep)}
.ph figcaption{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:var(--ash)}
.card-body{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:20px}
.card-name{font-size:19px;line-height:1.3}
.card-detail{font-size:15px;line-height:1.45;color:var(--ash)}
.dots{display:flex;gap:6px;padding-top:4px;flex:none}
.dot{width:14px;height:14px;border-radius:50%}
.ak{background:var(--ak);box-shadow:inset 0 0 0 1px rgba(34,32,28,.08)}
.kara{background:var(--kara)}
.boz{background:var(--boz)}
.kelsuu{background:var(--kelsuu)}
.kyzyl{background:var(--kyzyl)}
.sary{background:var(--sary)}
.archa{background:var(--archa)}

/* ---- Swipeable colour gallery: shared by product cards (above) and the product-detail pages
   (shop.css). A horizontal scroll-snap row, one slide per view, native touch/trackpad swipe — no
   script. .gallery-track is the scroller (focusable, so arrow keys work too); each .gallery-slide
   is one colourway. Where supported, each slide carries its own view-timeline (named by its
   gs-<key> class) so the matching thumbnail/swatch/dot can animate in step with the swipe; the
   per-target wiring (which ancestor scopes the timeline names, which elements animate) lives
   next to those elements — here, and in shop.css for the product page. ---- */
.gallery-track{
  position:absolute;inset:0;margin:0;padding:0;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:block;scroll-margin-top:100vh} /* a swatch tap (#slide link) aligns the slide minus this margin to the viewport top; the gallery always sits in the first screen, so that clamps to the top: no jump on desktop, back up to the gallery on a phone */
.gallery-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery-track:focus-visible,.gallery-slide:focus-visible{outline:2px solid var(--deep);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.gallery-track{scroll-behavior:auto}}

/* Card dots follow the visible slide the same way the product page's swatches do (shop.css).
   The :has() rule is the plain-CSS fallback *and* the correct initial paint: whichever colour's
   slide is first in a card's gallery shows as the active dot immediately, with no scroll and no
   animation-timeline support required. */
.card:has(.gallery-slide:first-child.gs-ak) .dots .dot.ak{box-shadow:inset 0 0 0 1px rgba(34,32,28,.08),0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-boz) .dots .dot.boz{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-kara) .dots .dot.kara{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-kelsuu) .dots .dot.kelsuu{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-kyzyl) .dots .dot.kyzyl{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-sary) .dots .dot.sary{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.card:has(.gallery-slide:first-child.gs-archa) .dots .dot.archa{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}

@supports (animation-timeline: view()){
  .card{timeline-scope:--t-ak,--t-boz,--t-kara,--t-kelsuu,--t-kyzyl,--t-sary,--t-archa}
  .gallery-slide{view-timeline-axis:inline}
  .gallery-slide.gs-ak{view-timeline-name:--t-ak}
  .gallery-slide.gs-boz{view-timeline-name:--t-boz}
  .gallery-slide.gs-kara{view-timeline-name:--t-kara}
  .gallery-slide.gs-kelsuu{view-timeline-name:--t-kelsuu}
  .gallery-slide.gs-kyzyl{view-timeline-name:--t-kyzyl}
  .gallery-slide.gs-sary{view-timeline-name:--t-sary}
  .gallery-slide.gs-archa{view-timeline-name:--t-archa}
  .gallery-slide.gs-set-heavens-and-earth{view-timeline-name:--t-set-heavens-and-earth}
  .gallery-slide.gs-set-undyed{view-timeline-name:--t-set-undyed}
  .gallery-slide.gs-set-hearth{view-timeline-name:--t-set-hearth}
  .gallery-slide.gs-scene{view-timeline-name:--t-scene}

  @keyframes gallery-dot-active{
    0%,42%,58%,100%{box-shadow:0 0 0 2px transparent,0 0 0 3px transparent}
    50%{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
  }
  @keyframes gallery-dot-active-ak{
    0%,42%,58%,100%{box-shadow:inset 0 0 0 1px rgba(34,32,28,.08),0 0 0 2px transparent,0 0 0 3px transparent}
    50%{box-shadow:inset 0 0 0 1px rgba(34,32,28,.08),0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
  }
  @keyframes gallery-text-active{
    0%,42%,58%,100%{color:var(--ash)}
    50%{color:var(--ink)}
  }
  @keyframes gallery-thumb-active{
    0%,42%,58%,100%{border-color:transparent}
    50%{border-color:var(--ink)}
  }

  .dots .dot.ak{animation:gallery-dot-active-ak linear both;animation-timeline:--t-ak;animation-range:cover 0% cover 100%}
  .dots .dot.boz{animation:gallery-dot-active linear both;animation-timeline:--t-boz;animation-range:cover 0% cover 100%}
  .dots .dot.kara{animation:gallery-dot-active linear both;animation-timeline:--t-kara;animation-range:cover 0% cover 100%}
  .dots .dot.kelsuu{animation:gallery-dot-active linear both;animation-timeline:--t-kelsuu;animation-range:cover 0% cover 100%}
  .dots .dot.kyzyl{animation:gallery-dot-active linear both;animation-timeline:--t-kyzyl;animation-range:cover 0% cover 100%}
  .dots .dot.sary{animation:gallery-dot-active linear both;animation-timeline:--t-sary;animation-range:cover 0% cover 100%}
  .dots .dot.archa{animation:gallery-dot-active linear both;animation-timeline:--t-archa;animation-range:cover 0% cover 100%}
}

.collection{padding-bottom:0} /* the colours section that follows brings its own top spacing */

/* Tabletop scene: full-bleed and still, between the intro and the collection. A preview render
   until there are samples to photograph, and labelled as one. On a phone the frame is cut to 3:2
   around the front placemat and the coaster. */
.scene{margin:0 0 clamp(90px,10.5vw,150px)}
.scene img{width:100%;height:auto;aspect-ratio:2730/1536;max-height:92vh;object-fit:cover}
.scene-note{margin-top:12px;font-size:12px;color:var(--ash)}
@media (max-width:700px){.scene img{aspect-ratio:3/2;object-position:45% center}}

/* 5. Material image */
.material{margin:0}
.material img{width:100%;aspect-ratio:2/1;max-height:92vh;object-fit:cover}
/* The land from above, full-bleed and still, leading into the colours. */
.land{margin:0}
.land img{width:100%;aspect-ratio:2.14/1;max-height:92vh;object-fit:cover}

/* 6. Colors */
/* Seven colours as one even strip, read left to right: three undyed, then four dyed, each
   group under its own hairline label. The heading and line sit above as a balanced pair. */
.colors{display:grid;gap:clamp(48px,6vw,88px)}
.colors-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px clamp(48px,8vw,120px);align-items:end}
.colors-text .serif{max-width:460px}
/* One 7-column grid, so every chip is exactly the same size; the two group labels sit on the
   first row over their own columns (the group wrappers dissolve with display:contents). */
.swatches{display:grid;grid-template-columns:repeat(7,1fr);column-gap:clamp(10px,1.4vw,20px);row-gap:16px}
.swatch-group,.swatch-row{display:contents}
.swatch-group-label{grid-row:1;font-size:13px;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);padding-bottom:12px;border-bottom:1px solid var(--line)}
.swatch-group:first-child .swatch-group-label{grid-column:1 / span 3}
.swatch-group:last-child .swatch-group-label{grid-column:4 / span 4}
.swatch{grid-row:2}
/* Phones: the strip becomes a sample book, one band per colour. */
@media (max-width:700px){
  .swatches{display:block}
  .swatch-group{display:block;margin-bottom:40px}
  .swatch-group-label{margin-bottom:16px}
  .swatch-row{display:grid;grid-template-columns:1fr;gap:10px}
  .swatch{grid-row:auto;display:grid;grid-template-columns:88px 1fr;column-gap:18px;align-items:center}
  .swatch .swatch-chip{aspect-ratio:auto;height:60px;grid-row:span 2}
  .swatch .swatch-name{margin-top:0;align-self:end}
  .swatch .swatch-desc{align-self:start}
  .swatch-badge{left:6px;top:6px;padding:2px 4px;font-size:8px}
}
.swatch-chip{position:relative}
.swatch-badge{position:absolute;left:8px;top:8px;padding:3px 6px;border:1px solid rgba(245,243,238,.45);font-size:9px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
/* The full felt palette, from the brand guide (portal/colors.html), in its order. */
.felt-1{background:#ece6da}
.felt-1{box-shadow:inset 0 0 0 1px rgba(34,32,28,.08)}
.felt-2{background:#a9a399}
.felt-3{background:#3a312a}
.felt-4{background:#3d6566}
.felt-5{background:#a3392b}
.felt-6{background:#c99a3c}
.felt-7{background:#4e5a42}
.swatch-chip{aspect-ratio:3/4}
.swatch-name{margin-top:14px;font-size:18px;line-height:1.3}
.swatch-desc{font-size:14px;line-height:1.4;color:var(--ash)}

/* 7. Makers */
.makers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));background:var(--deep);color:var(--paper)}
.makers-photo{min-height:clamp(360px,50vw,760px);position:relative}
.makers-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center} /* centred on the hands and the blade */
.makers-text{align-self:center;max-width:620px;padding:clamp(56px,8vw,120px) clamp(24px,5vw,88px)}
.makers-text .eyebrow{color:var(--on-deep-eyebrow)}
.makers-text .h2{margin-top:20px;color:var(--paper)}
.makers-text .serif{margin-top:28px;color:var(--on-deep-body)}
.makers-text a{display:inline-block;margin-top:36px;padding-bottom:6px;border-bottom:1px solid var(--paper)}
.makers-text a:hover,.makers-text a:focus-visible{color:var(--on-deep-eyebrow);border-color:var(--on-deep-eyebrow)}

/* 8. Notify */
.notify{text-align:center;padding-block:clamp(120px,16vw,220px)}
.notify > img{height:56px;width:auto;margin:0 auto 40px}
.notify .h2{max-width:720px;margin-inline:auto}
.notify .lede{margin-top:24px;color:var(--body)}
/* The form from concept 1: a labelled field, a square outlined button, and a one-line promise. */
.notify-form{display:grid;gap:16px;max-width:520px;margin:44px auto 0;text-align:left}
.notify-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--ash)}
.notify input{width:100%;min-width:0;padding:15px 18px;border:1px solid var(--line);border-radius:0;background:#fbfaf7;color:var(--ink);font:400 16px/1.4 Jost,system-ui,sans-serif}
.notify input::placeholder{color:#9b9686}
.notify input:focus{outline:none;border-color:var(--deep)}
.notify button{height:52px;padding:0 28px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:400 13px/1 Jost,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.notify button:hover,.notify button:focus-visible{background:var(--ink);color:var(--paper)}
.notify-note{font-size:14px;line-height:1.6;color:var(--ash)}
@media (max-width:480px){.notify-row{grid-template-columns:1fr}.notify button{width:100%}}
.done{display:none;margin-top:40px;color:var(--deep);font-size:18px}

/* 9. Footer: the column layout from concept 1 (brand, three link columns, a quiet bottom rule), in this page's tokens. */
.site-footer{border-top:1px solid var(--line);padding-inline:var(--side);font-size:14px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-block:64px}
.footer-brand p{margin-top:16px;max-width:30ch;color:var(--ash);font-size:14px;line-height:1.7}
.footer-col .eyebrow{font-size:13px;color:var(--body);margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.footer-col a{color:var(--ash)}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--deep)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:24px 56px;color:var(--ash);font-size:13px}
.footer-bottom .tm-note{display:block;margin-top:6px;font-size:12px}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr;gap:32px}}