/* ===================================================================
     TOKENS
     Paper   #EDEEE9   fog-grey paper, warmer than pure white
     Ink     #17181A   near-black, warm charcoal
     Stone   #9C9A90   muted stone for secondary text
     Indigo  #3B4664   dusty, considered accent — used sparingly
     Line    hairline rules at 12% ink
     =================================================================== */
  :root{
    --paper: #EDEEE9;
    --paper-2: #E4E4DD;
    --ink: #17181A;
    --stone: #9C9A90;
    --indigo: #3B4664;
    --line: rgba(23,24,26,0.14);
    --line-strong: rgba(23,24,26,0.28);
 
    --display: 'Fraunces', serif;
    --body: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
 
    --gutter: clamp(20px, 4vw, 56px);
    --max: 1400px;
 
    --ease: cubic-bezier(.22,.61,.36,1);
  }
 
  *{ margin:0; padding:0; box-sizing:border-box; }
 
  html{ scroll-behavior:smooth; }
 
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
 
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  ul{ list-style:none; }
 
  ::selection{ background:var(--ink); color:var(--paper); }
 
  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
 
  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--stone);
  }
 
  .hairline{ border:none; border-top:1px solid var(--line); }
 
  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--indigo);
    outline-offset:3px;
  }
 
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  }
 
  /* ===================================================================
     REVEAL-ON-SCROLL
     =================================================================== */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-stagger.is-visible > *{ transition-delay:calc(var(--i,0) * 90ms); }
 
  /* ===================================================================
     NAV
     =================================================================== */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(237,238,233,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{
    height:76px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav .mark{
    font-family:var(--display);
    font-style:italic;
    font-weight:500;
    font-size:22px;
    letter-spacing:.01em;
  }
  .nav-links{ display:flex; gap:36px; }
  .nav-links a{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:4px;
  }
  .nav-links a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:100%; height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .35s var(--ease);
  }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .nav-cta{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    border:1px solid var(--ink); padding:9px 16px;
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .nav-cta:hover{ background:var(--ink); color:var(--paper); }
  .nav-toggle{ display:none; }
 
  /* ===================================================================
     HERO
     Signature motif: tailor's measurement ticks — a ruler-mark language
     that runs through the whole site (hero corners, card corners).
     =================================================================== */
  .hero{
    padding-top:calc(76px + clamp(48px,9vw,110px));
    padding-bottom:clamp(48px,7vw,84px);
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(24px,5vw,64px);
    align-items:end;
  }
  .hero-head{ position:relative; }
  .hero-head .eyebrow{ margin-bottom:22px; display:block; }
  .hero-head h1{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(44px, 6.4vw, 92px);
    line-height:1.02;
    letter-spacing:-.01em;
  }
  .hero-head h1 em{
    font-style:italic;
    font-weight:400;
    color:var(--indigo);
  }
  .hero-copy{
    display:flex; flex-direction:column; gap:28px;
    padding-bottom:6px;
  }
  .hero-copy p{
    color:#3d3d3a;
    font-size:15.5px;
    line-height:1.65;
    max-width:38ch;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    padding:14px 22px;
    border:1px solid var(--ink);
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ background:var(--indigo); border-color:var(--indigo); }
  .btn-ghost:hover{ background:var(--ink); color:var(--paper); }
 
  /* measurement ticks — small reusable svg component */
  .ticks{ position:absolute; color:var(--stone); pointer-events:none; }
  .hero-head .ticks{ top:-30px; left:-2px; width:120px; }
 
  .hero-plate{
    position:relative;
    aspect-ratio:3/4;
    background:
      repeating-linear-gradient(115deg, #DCDCD3 0px, #DCDCD3 1px, transparent 1px, transparent 7px),
      linear-gradient(160deg, #E2E2DA, #C9C9BE);
    border:1px solid var(--line-strong);
  }
  .hero-plate::before{
    content:'';
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(23,24,26,.05) 0, transparent 40%),
      radial-gradient(circle at 80% 75%, rgba(23,24,26,.06) 0, transparent 45%);
  }
  .hero-plate .plate-label{
    position:absolute; left:16px; bottom:16px;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em;
    color:var(--ink); text-transform:uppercase;
  }
  .hero-plate .plate-corner{
    position:absolute; width:22px; height:22px;
  }
  .hero-plate .plate-corner.tl{ top:14px; left:14px; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
  .hero-plate .plate-corner.br{ bottom:14px; right:14px; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); }
 
  /* ===================================================================
     MANIFESTO STRIP
     =================================================================== */
  .strip{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:clamp(28px,4vw,40px) 0;
  }
  .strip .wrap{
    display:flex; align-items:center; gap:24px;
  }
  .strip p{
    font-family:var(--display);
    font-style:italic;
    font-size:clamp(18px,2.4vw,28px);
    line-height:1.35;
    max-width:22ch;
  }
  .strip .eyebrow{ white-space:nowrap; }
 
  /* ===================================================================
     COLLECTION
     =================================================================== */
  .section{ padding:clamp(64px,9vw,120px) 0; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:clamp(36px,5vw,56px);
  }
  .section-head h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(30px,4vw,46px);
    letter-spacing:-.01em;
  }
  .section-head .eyebrow{ margin-bottom:14px; display:block; }
  .section-note{
    max-width:30ch; color:var(--stone); font-size:13.5px; text-align:right;
  }
 
  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .card{
    background:var(--paper);
    padding:22px 22px 26px;
    position:relative;
  }
  .card-plate{
    aspect-ratio:4/5;
    position:relative;
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .card-plate .plate-corner{ position:absolute; width:16px; height:16px; opacity:0; transition:opacity .35s var(--ease); }
  .card-plate .plate-corner.tl{ top:10px; left:10px; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
  .card-plate .plate-corner.br{ bottom:10px; right:10px; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); }
  .card:hover .plate-corner{ opacity:1; }
  .card:hover .card-plate{ transform:scale(1.015); }
  .card-plate{ transition:transform .5s var(--ease); }
 
  .swatch{ position:absolute; inset:0; }
  .swatch--cotton{ background:linear-gradient(135deg,#EFEFE7,#DAD9CC);
    background-image:
      repeating-linear-gradient(0deg, rgba(23,24,26,.05) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(90deg, rgba(23,24,26,.035) 0 1px, transparent 1px 6px),
      linear-gradient(135deg,#EFEFE7,#DAD9CC);
  }
  .swatch--jersey{ background:linear-gradient(150deg,#D8D6CE,#B9B7AC);
    background-image:
      radial-gradient(rgba(23,24,26,.05) 1px, transparent 1.4px);
    background-size:6px 6px, auto;
  }
  .swatch--wool{ background:linear-gradient(160deg,#DAD5C9,#BEB6A3);
    background-image:
      radial-gradient(rgba(23,24,26,.08) 1.2px, transparent 1.6px),
      radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.4px);
    background-size:9px 9px, 9px 9px;
    background-position:0 0, 4px 4px;
  }
  .swatch--linen{ background:linear-gradient(155deg,#E6E2D2,#CFC9B3);
    background-image:
      repeating-linear-gradient(2deg, rgba(23,24,26,.045) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(92deg, rgba(23,24,26,.03) 0 1px, transparent 1px 9px);
  }
  .swatch--silk{ background:linear-gradient(120deg,#D9D3C6 0%,#EDEAE0 30%,#C7C0AE 55%,#EAE6D9 80%,#D2CBBB 100%);
    background-size:220% 220%;
  }
  .swatch--canvas{ background:linear-gradient(160deg,#CFC8B4,#A79E88);
    background-image:
      repeating-linear-gradient(45deg, rgba(23,24,26,.07) 0 2px, transparent 2px 8px),
      repeating-linear-gradient(-45deg, rgba(23,24,26,.05) 0 2px, transparent 2px 8px);
  }
 
  .card-meta{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  }
  .card-name{ font-family:var(--display); font-size:18px; font-weight:400; }
  .card-price{ font-family:var(--mono); font-size:13px; }
  .card-sub{
    display:flex; justify-content:space-between; margin-top:6px;
    font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--stone);
    text-transform:uppercase;
  }
 
  /* ===================================================================
     PHILOSOPHY
     =================================================================== */
  .philosophy{ background:var(--ink); color:var(--paper); }
  .philosophy .wrap{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,80px);
    padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(64px,9vw,120px);
    align-items:start;
  }
  .philosophy .eyebrow{ color:#8B8A82; }
  .philosophy blockquote{
    font-family:var(--display); font-style:italic; font-weight:400;
    font-size:clamp(26px,3.4vw,42px); line-height:1.28; letter-spacing:-.01em;
    margin-top:18px;
  }
  .philosophy-body p{
    font-size:15px; line-height:1.75; color:#C8C7BF; max-width:52ch; margin-bottom:18px;
  }
  .philosophy-body p:last-child{ margin-bottom:0; }
 
  /* ===================================================================
     CRAFT / MATERIALS
     =================================================================== */
  .materials-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter);
  }
  .material{ border-top:1px solid var(--line); padding-top:20px; }
  .material-swatch{ height:120px; margin-bottom:18px; border:1px solid var(--line); position:relative; }
  .material h3{ font-family:var(--display); font-weight:400; font-size:20px; margin-bottom:8px; }
  .material p{ font-size:13.5px; color:#4a4a46; line-height:1.65; max-width:34ch; }
  .material .eyebrow{ margin-top:10px; display:block; }
 
  /* ===================================================================
     NEWSLETTER
     =================================================================== */
  .newsletter{ border-top:1px solid var(--line); }
  .newsletter .wrap{
    padding-top:clamp(56px,8vw,90px); padding-bottom:clamp(56px,8vw,90px);
    display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
  }
  .newsletter h2{
    font-family:var(--display); font-weight:400; font-size:clamp(26px,3.2vw,38px); max-width:14ch;
  }
  .newsletter form{ display:flex; gap:0; border-bottom:1px solid var(--ink); min-width:320px; flex:1; max-width:420px; }
  .newsletter input{
    flex:1; background:none; border:none; padding:12px 4px;
    font-family:var(--mono); font-size:13px; color:var(--ink);
  }
  .newsletter input::placeholder{ color:var(--stone); }
  .newsletter button{
    background:none; border:none; font-family:var(--mono); font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; padding:12px 6px;
    border-left:1px solid var(--line-strong);
  }
  .newsletter .form-note{ font-size:11px; color:var(--stone); margin-top:10px; font-family:var(--mono); }
  .form-msg{ font-family:var(--mono); font-size:11px; color:var(--indigo); margin-top:10px; height:14px; }
 
  /* ===================================================================
     FOOTER
     =================================================================== */
  footer{ border-top:1px solid var(--line); }
  .footer-top{
    padding-top:clamp(48px,7vw,72px); padding-bottom:48px;
    display:grid; grid-template-columns:1.4fr repeat(3, .8fr); gap:32px;
  }
  .footer-mark{ font-family:var(--display); font-style:italic; font-size:24px; margin-bottom:14px; }
  .footer-top p{ color:var(--stone); font-size:13px; max-width:30ch; line-height:1.6; }
  .footer-col h4{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--stone); margin-bottom:16px;
  }
  .footer-col ul{ display:flex; flex-direction:column; gap:10px; }
  .footer-col a{ font-size:13.5px; }
  .footer-col a:hover{ color:var(--indigo); }
  .footer-bottom{
    display:flex; justify-content:space-between; padding:20px 0;
    font-family:var(--mono); font-size:11px; color:var(--stone); letter-spacing:.03em;
    flex-wrap:wrap; gap:8px;
  }
 
  /* ===================================================================
     RESPONSIVE
     =================================================================== */
  @media (max-width: 980px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-plate{ order:-1; aspect-ratio:16/9; }
    .grid{ grid-template-columns:repeat(2,1fr); }
    .philosophy .wrap{ grid-template-columns:1fr; }
    .materials-grid{ grid-template-columns:1fr; gap:36px; }
    .footer-top{ grid-template-columns:1fr 1fr; }
  }
 
  @media (max-width: 640px){
    .nav-links{ display:none; }
    .grid{ grid-template-columns:1fr; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-note{ text-align:left; }
    .footer-top{ grid-template-columns:1fr; }
    .strip .wrap{ flex-direction:column; align-items:flex-start; gap:14px; }
  }
/* Extracted from the original inline style attributes */
.after-hero{ margin-top:-1px; }
.grid > .card:nth-child(1){ --i:0; }
.grid > .card:nth-child(2){ --i:1; }
.grid > .card:nth-child(3){ --i:2; }
.grid > .card:nth-child(4){ --i:3; }
.grid > .card:nth-child(5){ --i:4; }
.grid > .card:nth-child(6){ --i:5; }
.materials-grid > .material:nth-child(1){ --i:0; }
.materials-grid > .material:nth-child(2){ --i:1; }
.materials-grid > .material:nth-child(3){ --i:2; }

/* Vibe Vault storefront */
:root{
  --paper:#f5f2ea;
  --paper-2:#ece7dc;
  --ink:#242a25;
  --stone:#747b70;
  --indigo:#3e5c46;
  --line:rgba(36,42,37,.14);
  --line-strong:rgba(36,42,37,.28);
  --display:'Playfair Display',serif;
  --body:'DM Sans',sans-serif;
  --mono:'Space Mono',monospace;
  --accent:#e68f67;
}

[hidden]{display:none !important}
body{background:var(--paper); color:var(--ink)}
body.has-overlay{overflow:hidden}
.announcement{height:30px; display:flex; align-items:center; justify-content:center; padding:0 14px; background:var(--ink); color:var(--paper); font:10px var(--mono); letter-spacing:.035em; text-align:center}
.nav{top:30px; background:rgba(245,242,234,.94); backdrop-filter:blur(12px)}
.nav .wrap{height:72px}
.nav .mark,.footer .mark{font-family:var(--body); font-style:normal; font-weight:700; font-size:21px; letter-spacing:-.07em}
.mark span{color:var(--indigo)}
.mark i{font:9px var(--mono); vertical-align:top; margin-left:2px; letter-spacing:0}
.nav-links{gap:30px}
.nav-links a{font-family:var(--body); font-size:12px; letter-spacing:.01em; text-transform:none}
.nav-links a::after{background:var(--indigo)}
.nav-actions{display:flex; align-items:center; gap:24px}
.nav-account{font-size:12px; color:var(--stone)}
.bag-button{border:0; background:var(--ink); color:var(--paper); padding:10px 16px; font-size:12px; border-radius:2px}
.bag-button span{display:inline-grid; place-items:center; min-width:19px; height:19px; margin-left:6px; padding:0 4px; border-radius:50%; background:var(--paper); color:var(--ink); font:10px var(--mono)}
.hero{min-height:730px; padding:142px 0 30px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:var(--paper)}
.hero-copy.wrap{display:flex; align-items:flex-start; width:100%; position:relative; z-index:2; margin:auto; padding-top:25px; padding-bottom:105px}
.hero-copy .eyebrow{margin-bottom:24px; color:var(--indigo)}
.hero h1{max-width:8ch; font-size:clamp(58px,7.6vw,112px); line-height:.98; letter-spacing:-.065em; font-weight:500}
.hero h1 em{color:var(--indigo); font-weight:500}
.hero-copy p{max-width:37ch; margin:26px 0 22px; color:#555c53; font-size:15px; line-height:1.7}
.btn{display:inline-flex; justify-content:center; align-items:center; gap:26px; border-radius:2px; font-family:var(--body); font-size:12px; letter-spacing:0; text-transform:none; padding:14px 19px}
.btn-dark{background:var(--ink); border:1px solid var(--ink); color:var(--paper); transition:background .2s ease, transform .2s ease}
.btn-dark:hover{background:var(--indigo); border-color:var(--indigo); color:white; transform:translateY(-1px)}
.hero-note{margin-top:22px; color:var(--stone); font-size:11px}
.hero-art{position:absolute; width:min(45vw,590px); height:530px; right:max(5vw,calc((100vw - 1400px)/2 + 56px)); top:133px; overflow:hidden; background:linear-gradient(145deg,#d7c9b6,#b9ac96 46%,#72836e);}
.hero-art::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 44%),repeating-linear-gradient(105deg,rgba(31,42,33,.045) 0 1px,transparent 1px 9px)}
.hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,37,30,.33),transparent 37%)}
.hero-sun{position:absolute;width:230px;height:230px;top:60px;right:72px;border-radius:50%;background:#e68f67;opacity:.94;box-shadow:0 0 0 24px rgba(245,242,234,.12)}
.hero-orbit{position:absolute;border:1px solid rgba(245,242,234,.55);border-radius:50%;transform:rotate(-29deg)}
.orbit-one{width:480px;height:220px;top:102px;left:25px}.orbit-two{width:600px;height:335px;top:45px;left:-45px}
.hero-figure{position:absolute;z-index:1;width:230px;height:395px;left:43%;bottom:-34px;transform:translateX(-50%);border-radius:48% 48% 14% 14%;background:linear-gradient(100deg,#26352e,#526453 45%,#304237);box-shadow:inset 17px 0 28px rgba(255,255,255,.13),18px 20px 50px rgba(28,37,30,.2)}
.hero-figure::before{content:'';position:absolute;width:115px;height:128px;left:57px;top:-83px;border-radius:47% 48% 48% 45%;background:linear-gradient(100deg,#9c6e56,#c69375 60%,#825d49)}
.hero-figure::after{content:'';position:absolute;width:154px;height:188px;left:38px;top:-15px;border-radius:48% 48% 13% 13%;background:linear-gradient(100deg,#d3c7b0,#ede2d0 48%,#baab92);clip-path:polygon(17% 0,82% 0,100% 100%,0 100%)}
.hero-figure span{position:absolute;z-index:2;top:113px;left:50%;height:159px;width:1px;background:rgba(57,63,52,.48)}
.hero-art-label,.hero-art-side{position:absolute;z-index:3;color:#fffaf0;font:10px/1.7 var(--mono);letter-spacing:.09em}
.hero-art-label{left:22px;bottom:21px}.hero-art-side{right:18px;top:20px;writing-mode:vertical-rl}
.hero-bottom{display:flex;justify-content:space-between;color:var(--stone);font:10px var(--mono);letter-spacing:.04em}
.section{padding:100px 0}
.section-head{align-items:flex-end;margin-bottom:35px}
.section-head h2,.story h2,.newsletter h2{font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-.045em}
.section-head .eyebrow{color:var(--indigo);margin-bottom:12px}
.section-head p{max-width:34ch;text-align:left;color:var(--stone);font-size:13px;line-height:1.7}
.shop-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 25px;border-bottom:1px solid var(--line);padding-bottom:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-button{border:1px solid transparent;border-radius:100px;background:transparent;padding:8px 12px;color:#6d746a;font-size:11px}
.filter-button:hover,.filter-button.is-active{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.search-box{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-strong);padding:4px 0;color:var(--stone)}
.search-box input{width:150px;border:0;background:none;padding:5px 0;color:var(--ink);font:12px var(--body);outline:none}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 18px;min-height:120px}
.shop-loading,.shop-empty,.shop-error{grid-column:1/-1;padding:42px 12px;color:var(--stone);text-align:center;font-size:14px}
.shop-error p{margin:8px 0 14px}
.product-card{min-width:0;animation:cardIn .4s both;animation-delay:calc(var(--card-index,0)*35ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.product-visual,.cart-thumb{position:relative;overflow:hidden;background-color:#c9c0ae;border:0}
.product-visual{aspect-ratio:4/4.7;margin-bottom:14px;isolation:isolate}
.product-visual::before{content:'';position:absolute;inset:-10%;background:repeating-linear-gradient(120deg,rgba(255,255,255,.11) 0 1px,transparent 1px 8px),radial-gradient(ellipse at 68% 35%,rgba(255,255,255,.35),transparent 39%);transform:rotate(-8deg);transition:transform .7s ease}
.product-visual::after{content:'';position:absolute;width:52%;height:61%;left:24%;top:18%;border-radius:42% 42% 12% 12%;background:linear-gradient(110deg,rgba(32,41,34,.72),rgba(72,93,70,.96) 42%,rgba(41,54,44,.9));clip-path:polygon(24% 5%,39% 0,46% 8%,54% 8%,61% 0,76% 5%,100% 22%,86% 41%,76% 33%,81% 100%,19% 100%,24% 33%,14% 41%,0 22%);box-shadow:0 20px 32px rgba(31,38,31,.19);transition:transform .6s ease}
.product-visual.has-photo::before,.product-visual.has-photo::after{display:none}
.product-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-visual.has-photo .visual-code,.product-visual.has-photo .visual-product{color:white;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.product-photo-thumbs{display:flex;gap:7px;margin:-5px 0 13px;overflow-x:auto}
.product-photo-thumb{width:42px;height:50px;flex:0 0 auto;border:1px solid var(--line);background:var(--paper);padding:0;opacity:.65;cursor:pointer}
.product-photo-thumb.is-active{border:2px solid var(--indigo);opacity:1}
.product-photo-thumb img{width:100%;height:100%;object-fit:cover}
.product-card:nth-child(2n) .product-visual::after{width:44%;height:55%;left:28%;top:23%;background:linear-gradient(110deg,#c6b28f,#e3d2b0 45%,#aa9875)}
.product-card:nth-child(3n) .product-visual::after{width:57%;height:52%;left:22%;top:24%;background:linear-gradient(110deg,#bd987a,#dfb99a 45%,#a87b5f)}
.product-card:hover .product-visual::before{transform:rotate(0) scale(1.04)}
.product-card:hover .product-visual::after{transform:translateY(-5px)}
.product-visual.swatch--cotton{background:linear-gradient(135deg,#d4d6c7,#aeb7a2)}
.product-visual.swatch--jersey{background:linear-gradient(145deg,#b9b8ab,#92988b)}
.product-visual.swatch--wool{background:linear-gradient(145deg,#c1b5a4,#827d6e)}
.product-visual.swatch--linen{background:linear-gradient(145deg,#d2c5a6,#9d997e)}
.product-visual.swatch--silk{background:linear-gradient(135deg,#d7c6ae,#b49183 48%,#e8d8c5)}
.product-visual.swatch--canvas{background:linear-gradient(145deg,#979b7c,#636c58)}
.visual-code{position:absolute;z-index:2;top:14px;left:14px;color:rgba(36,42,37,.72);font:9px var(--mono);letter-spacing:.08em}
.visual-spark{position:absolute;z-index:2;right:15px;top:10px;color:rgba(245,242,234,.9);font-size:20px}
.visual-product{position:absolute;z-index:2;left:15px;bottom:15px;color:#fffaf0;font:italic 18px var(--display);text-shadow:0 1px 10px rgba(0,0,0,.25)}
.sold-out{position:absolute;z-index:3;right:10px;bottom:12px;background:var(--paper);padding:5px 8px;font:9px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.product-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.product-title-row h3{font:500 19px var(--display);letter-spacing:-.02em}
.product-price{font:11px var(--mono);white-space:nowrap}
.product-description{margin:5px 0;color:#636a60;font-size:11px;line-height:1.55;min-height:17px;max-width:44ch}
.product-details{margin:5px 0 12px;color:var(--stone);font:9px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.product-details span{margin:0 3px;color:var(--accent)}
.product-options{display:flex;gap:10px;margin-bottom:11px}
.product-options label{display:flex;align-items:center;gap:8px;min-width:0;color:var(--stone);font-size:10px}
.product-options label span{font:9px var(--mono);text-transform:uppercase}
.product-options select{max-width:125px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;padding:4px 18px 4px 2px;color:var(--ink);font:11px var(--body)}
.add-button{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--ink);background:transparent;padding:11px 12px;color:var(--ink);font-size:11px;transition:background .2s ease,color .2s ease}
.add-button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.add-button:disabled{border-color:var(--line);color:var(--stone);cursor:not-allowed}
.shop-footnote{margin-top:33px;border-top:1px solid var(--line);padding-top:15px;color:var(--stone);font:10px var(--mono);text-align:center}
.story{background:#e9e5da}
.story-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:10%;align-items:start}
.story-mark{min-height:275px;position:relative;display:flex;align-items:flex-end;padding:18px;background:linear-gradient(145deg,#c2c8b7,#e0d6c3);overflow:hidden}
.story-mark::before,.story-mark::after{content:'';position:absolute;border:1px solid rgba(36,42,37,.3);border-radius:50%;width:330px;height:180px;transform:rotate(-32deg);left:-20px;top:27px}
.story-mark::after{width:390px;height:250px;left:-44px;top:8px}
.story-mark>span:first-child{position:absolute;top:18px;left:19px;font:italic 96px var(--display);color:rgba(36,42,37,.76);letter-spacing:-.1em}
.story-mark .eyebrow{position:relative;z-index:1;color:var(--ink)}
.story h2{max-width:11ch;margin:14px 0 23px}
.story h2 em{color:var(--indigo)}
.story p{max-width:55ch;color:#62675e;font-size:14px;line-height:1.8}
.text-link{display:inline-flex;align-items:center;gap:16px;border:0;background:none;color:var(--indigo);font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.story .text-link{margin-top:22px}
.materials{background:var(--paper)}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px}
.material-grid article{min-height:190px;border-top:1px solid var(--line-strong);padding:16px 14px 0 0}
.material-index{font:9px var(--mono);letter-spacing:.1em;color:var(--indigo)}
.material-grid h3{margin:31px 0 10px;font:500 25px var(--display)}
.material-grid p{max-width:34ch;color:var(--stone);font-size:13px;line-height:1.7}
.newsletter{background:#dfe4d8}
.newsletter-inner{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.newsletter .eyebrow{color:var(--indigo)}
.newsletter h2{max-width:12ch;margin:13px 0}
.newsletter-inner>div>p{color:var(--stone);font-size:13px}
.newsletter form{display:grid;grid-template-columns:1fr auto;max-width:500px;border-bottom:1px solid var(--ink)}
.newsletter input{min-width:0;border:0;background:transparent;padding:15px 5px;color:var(--ink);font:13px var(--body)}
.newsletter button{border:0;background:none;padding:12px 4px 12px 16px;color:var(--ink);font-size:11px}
.newsletter .form-msg{grid-column:1/-1;height:auto;min-height:16px;margin:5px 0;color:var(--indigo)}
.footer{background:var(--ink);color:var(--paper)}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1.5fr;align-items:start;gap:30px;padding-top:42px;padding-bottom:35px}
.footer .mark span{color:#b9c7ae}
.footer-top>p{color:#b8bdb3;font-size:12px;line-height:1.7}
.footer-links{display:flex;justify-content:flex-end;gap:22px;flex-wrap:wrap;font-size:11px;color:#d2d5ce}
.footer-links a:hover,.footer-bottom a:hover{color:#b9c7ae}
.footer-bottom{border-top:1px solid rgba(255,255,255,.17);padding:16px 0;color:#aeb4a9;font:9px var(--mono)}
.toast{position:fixed;z-index:120;bottom:22px;left:50%;max-width:min(90vw,430px);transform:translate(-50%,15px);padding:12px 17px;background:var(--ink);color:white;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.drawer-backdrop,.modal-backdrop{position:fixed;z-index:80;inset:0;background:rgba(24,29,25,.44);backdrop-filter:blur(2px)}
.cart-drawer{position:fixed;z-index:81;right:0;top:0;bottom:0;width:min(470px,100vw);display:flex;flex-direction:column;background:var(--paper);padding:28px clamp(20px,4vw,34px);transform:translateX(102%);transition:transform .3s ease;box-shadow:-15px 0 50px rgba(22,27,23,.1)}
.cart-drawer[aria-hidden="false"]{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.drawer-head .eyebrow{color:var(--indigo);font-size:9px}
.drawer-head h2{margin-top:5px;font:500 32px var(--display);letter-spacing:-.04em}
.drawer-head h2 span{font:11px var(--mono);letter-spacing:0;color:var(--stone)}
.icon-button{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--ink);font-size:22px;line-height:1}
.cart-lines{flex:1;overflow:auto}
.cart-line{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:72px;height:88px}
.cart-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cart-thumb:has(img)::after{display:none}
.cart-thumb::after{content:'';position:absolute;width:56%;height:66%;left:22%;top:20%;background:linear-gradient(110deg,#465b48,#9caa8f,#405241);clip-path:polygon(24% 5%,39% 0,46% 8%,54% 8%,61% 0,76% 5%,100% 22%,86% 41%,76% 33%,81% 100%,19% 100%,24% 33%,14% 41%,0 22%)}
.cart-thumb.swatch--linen::after{background:linear-gradient(110deg,#998c6c,#d7c7a7,#8f866a)}
.cart-thumb.swatch--silk::after{background:linear-gradient(110deg,#bb927c,#e5c9ad,#a87d6e)}
.cart-line-heading{display:flex;justify-content:space-between;gap:10px}
.cart-line-heading h3{font:500 17px var(--display)}
.remove-line{border:0;background:none;color:var(--stone);font-size:18px}
.cart-line-info>p{margin:4px 0 15px;color:var(--stone);font-size:10px}
.cart-line-bottom{display:flex;justify-content:space-between;align-items:center;font:11px var(--mono)}
.quantity-stepper{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:3px 7px}
.quantity-stepper button{border:0;background:none;color:var(--ink);font-size:14px}
.quantity-stepper span{min-width:12px;text-align:center;font-size:10px}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.empty-spark{font-size:44px;color:var(--accent)}
.cart-empty h3{margin:13px 0 5px;font:500 25px var(--display)}
.cart-empty p{margin-bottom:18px;color:var(--stone);font-size:12px}
.drawer-bottom{border-top:1px solid var(--line);padding-top:16px}
.summary-line{display:flex;justify-content:space-between;margin:7px 0;color:var(--stone);font-size:12px}
.summary-line strong{color:var(--ink);font:11px var(--mono)}
.total-line{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}
.shipping-note{height:17px;margin:10px 0;color:var(--indigo);font-size:10px}
.checkout-button{width:100%;justify-content:space-between}
.secure-note{margin-top:11px;color:var(--stone);font-size:9px;text-align:center}
.modal-backdrop{z-index:90;display:grid;place-items:center;padding:18px}
.checkout-modal{width:min(660px,100%);max-height:min(92vh,900px);overflow:auto;background:var(--paper);padding:26px clamp(18px,5vw,40px);box-shadow:0 20px 80px rgba(22,27,23,.2)}
.checkout-form{padding-top:19px}
.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px}
.checkout-fields label{display:flex;flex-direction:column;gap:5px;color:var(--stone);font:9px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.checkout-fields .field-wide{grid-column:1/-1}
.checkout-fields input{width:100%;border:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.35);padding:11px 10px;color:var(--ink);font:13px var(--body);text-transform:none}
.payment-options{margin:19px 0 13px;border:0}
.payment-options legend{margin-bottom:9px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.payment-option{display:flex;align-items:center;gap:11px;margin-top:7px;border:1px solid var(--line);padding:11px 12px;cursor:pointer}
.payment-option:has(input:checked){border-color:var(--indigo);background:rgba(62,92,70,.05)}
.payment-option input{accent-color:var(--indigo)}
.payment-option span{display:flex;flex:1;flex-direction:column;gap:2px}
.payment-option strong{font-size:12px}
.payment-option small{color:var(--stone);font-size:10px}
.payment-option>b{font:12px var(--mono);color:var(--indigo)}
.checkout-error{min-height:17px;margin:7px 0;color:#a44935;font-size:11px}
.checkout-submit{width:100%;justify-content:space-between}
.checkout-submit:disabled{opacity:.65;cursor:wait}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .hero-art{right:2vw;width:42vw;height:460px;top:166px;opacity:.95}
  .hero-copy.wrap{padding-bottom:90px}
  .hero h1{font-size:clamp(58px,9vw,92px)}
  .story-grid{gap:7%}
  .footer-top{grid-template-columns:1fr 1fr}.footer-links{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:760px){
  .hero{min-height:760px;padding-top:115px}
  .hero-copy.wrap{padding-top:15px;padding-bottom:0}
  .hero-art{position:relative;top:auto;right:auto;width:calc(100% - 50px);height:370px;margin:-48px 25px 55px auto;order:2}
  .hero-bottom{order:3}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .announcement{font-size:8px;height:27px}.nav{top:27px}.nav .wrap{height:62px}
  .nav-links{display:none}.nav-actions{gap:14px}.nav-account{font-size:11px}
  .hero{min-height:710px;padding-top:90px}
  .hero-copy.wrap{padding-top:20px;padding-bottom:0}
  .hero-art{position:relative;top:auto;right:auto;width:calc(100% - 40px);height:310px;margin:-62px 20px 58px auto;order:2}
  .hero-bottom{order:3}
  .hero-sun{width:150px;height:150px;right:35px;top:38px}
  .hero-figure{height:270px;width:175px;left:45%;bottom:-32px}
  .hero-figure::before{width:90px;height:100px;left:42px;top:-65px}.hero-figure::after{width:120px;height:140px;left:28px;top:-7px}
  .hero-figure span{top:90px;height:104px}
  .hero-bottom{font-size:8px;padding-bottom:5px}
  .section{padding:70px 0}.section-head{align-items:flex-start;flex-direction:column;gap:10px}.section-head p{max-width:43ch}
  .shop-tools{align-items:flex-start;flex-direction:column}.filters{gap:4px}.filter-button{padding:7px 9px;font-size:10px}.search-box{width:100%}.search-box input{width:100%}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 11px}
  .product-title-row{align-items:flex-start;flex-direction:column;gap:3px}.product-title-row h3{font-size:17px}.product-price{font-size:10px}
  .product-options{gap:6px;flex-wrap:wrap}.product-options label{gap:5px}.product-options select{max-width:105px;font-size:10px}
  .add-button{padding:10px 8px;font-size:10px}
  .story-grid{grid-template-columns:1fr;gap:28px}.story-mark{min-height:200px;max-width:340px}
  .story-mark>span:first-child{font-size:76px}
  .material-grid{grid-template-columns:1fr;gap:12px;margin-top:35px}.material-grid article{min-height:145px}.material-grid h3{margin:19px 0 8px}
  .newsletter-inner{grid-template-columns:1fr;gap:28px}
  .footer-top{grid-template-columns:1fr 1fr;gap:22px}.footer-top>p{grid-column:1/-1;grid-row:2}.footer-links{grid-column:1/-1;gap:14px 20px}
  .footer-bottom{font-size:8px}
  .checkout-fields{grid-template-columns:1fr}.checkout-fields .field-wide{grid-column:auto}
  .checkout-modal{padding:20px 17px}.drawer-head h2{font-size:28px}
}
@media(max-width:390px){.product-grid{grid-template-columns:1fr}.product-title-row{flex-direction:row;align-items:baseline}.product-options{flex-wrap:nowrap}.hero h1{font-size:54px}.hero-bottom span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.product-card{animation:none}.cart-drawer,.toast,.product-visual::before,.product-visual::after{transition:none}}