:root{
    --washi:#EDE6D6;
    --washi-deep:#E4DBC6;
    --sumi:#232120;
    --indigo:#2C3B4E;
    --moss:#6B7259;
    --stone:#8B8477;
    --ochre:#B08B4F;
    --rule: rgba(35,33,32,0.14);
    --maxw: 1280px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--washi);
    color:var(--sumi);
    font-family:'Work Sans', sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img, .ph{ max-width:100%; display:block; }

  a{ color:inherit; text-decoration:none; }

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 clamp(24px, 5vw, 72px);
  }

  .rule{ border:none; border-top:1px solid var(--rule); }

  /* -------- Placeholder image blocks -------- */
  .ph{
    background:var(--washi-deep);
    border:1px solid var(--rule);
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:18px;
    position:relative;
    min-height:220px;
  }
  .ph::before{
    content: attr(data-label);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.04em;
    color:var(--stone);
    font-style:italic;
  }
  .ph.tall{ min-height:520px; }
  .ph.wide{ min-height:340px; }
  .ph.square{ aspect-ratio:1/1; min-height:0; }

  /* -------- Nav -------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(237,230,214,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(24px,5vw,72px);
  }
  .wordmark{
    font-family:'Fraunces', serif;
    font-size:19px;
    letter-spacing:0.02em;
    font-weight:500;
  }
  .navlinks{ display:flex; gap:clamp(20px,3vw,44px); }
  .navlinks a{
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--sumi);
    position:relative;
    padding-bottom:2px;
  }
  .navlinks a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--indigo); transition:width .4s ease;
  }
  .navlinks a:hover::after{ width:100%; }
  .navtoggle{ display:none; }

  /* -------- Hero -------- */
  .hero{
    padding:clamp(48px,9vw,110px) 0 clamp(40px,7vw,90px);
    position:relative;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 28px 1fr;
    gap:clamp(16px,3vw,40px);
    align-items:end;
  }
  .hero-rail{
    writing-mode: vertical-rl;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    color:var(--stone);
    height:100%;
    padding-bottom:6px;
    text-transform:uppercase;
  }
  .hero-copy{ max-width:780px; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--indigo);
    margin-bottom:22px;
    display:block;
  }
  h1.headline{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(34px, 6vw, 66px);
    line-height:1.12;
    letter-spacing:-0.01em;
  }
  h1.headline em{
    font-style:italic;
    font-weight:400;
    color:var(--indigo);
  }
  .hero-sub{
    margin-top:26px;
    max-width:480px;
    color:var(--stone);
    font-size:16px;
    font-weight:300;
  }
  .hero-image{ margin-top:56px; }

  /* -------- Principles strip -------- */
  .principles{
    padding:38px 0;
    text-align:center;
  }
  .principles-inner{
    font-family:'IBM Plex Mono', monospace;
    font-size:clamp(12px,1.6vw,15px);
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--sumi);
  }
  .principles-inner span{ color:var(--stone); margin:0 10px; }

  /* -------- Section shell -------- */
  section{ padding:clamp(60px,10vw,130px) 0; }
  .section-head{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;
    margin-bottom:clamp(40px,6vw,80px);
    align-items:end;
  }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(26px,4vw,42px);
    line-height:1.2;
  }
  .section-head p{
    color:var(--stone);
    font-size:15px;
    max-width:420px;
  }
  .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--moss);
    display:block;
    margin-bottom:16px;
  }

  /* -------- Wall label -------- */
  .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    line-height:1.7;
    color:var(--stone);
    letter-spacing:0.01em;
  }
  .label .title{ color:var(--sumi); }

  /* -------- Artwork rows -------- */
  .art-row{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap:clamp(24px,4vw,56px);
    align-items:center;
  }
  .art-row.reverse{ grid-template-columns: 1fr 1.5fr; }
  .art-row.reverse .art-media{ order:2; }
  .art-row.reverse .art-info{ order:1; }
  .art-info p{ margin-top:18px; color:var(--stone); font-size:14px; max-width:340px; }
  .art-row + .art-row{ margin-top:clamp(60px,8vw,110px); }

  /* -------- Gallery grid -------- */
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:clamp(28px,4vw,56px) clamp(24px,3vw,40px);
  }
  .gallery-item{ display:flex; flex-direction:column; gap:16px; }
  .gallery-item.feature{ grid-column: 1 / -1; }
  .gallery-item img{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--rule);
  }
  .gallery-item.feature img{ max-height:640px; object-fit:cover; width:100%; }
  .gallery-item:not(.feature) img{ aspect-ratio: 4/3; object-fit:cover; }

  /* -------- Wearable art grid -------- */
  .garment-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:clamp(20px,3vw,36px);
  }
  .garment{ display:flex; flex-direction:column; gap:16px; }

  /* -------- Sustainability line -------- */
  .sustain{
    text-align:center;
  }
  .sustain blockquote{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(22px,3.4vw,34px);
    line-height:1.5;
    max-width:820px;
    margin:0 auto;
  }
  .sustain .kicker{ display:flex; justify-content:center; }

  /* -------- Practice teaser -------- */
  .practice-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:clamp(28px,4vw,48px);
  }
  .practice-card{
    padding-top:24px;
    border-top:1px solid var(--rule);
  }
  .practice-card h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:22px;
    margin-bottom:12px;
  }
  .practice-card p{ color:var(--stone); font-size:14px; margin-bottom:18px; }
  .practice-card a{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--indigo);
    border-bottom:1px solid var(--indigo);
    padding-bottom:2px;
  }

  /* -------- Audio player -------- */
  .player{
    margin-top:18px;
    border-top:1px solid var(--rule);
    padding-top:18px;
  }
  .player-row{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .player-btn{
    flex:0 0 auto;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--sumi);
    background:transparent;
    color:var(--sumi);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .3s ease, color .3s ease;
  }
  .player-btn:hover{ background:var(--sumi); color:var(--washi); }
  .player-btn svg{ width:13px; height:13px; }
  .player-track{ flex:1 1 auto; }
  .player-track-name{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--stone);
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
  }
  .player-bar{
    position:relative;
    height:2px;
    background:var(--rule);
    cursor:pointer;
  }
  .player-bar-fill{
    position:absolute; left:0; top:0; height:100%;
    width:0%;
    background:var(--indigo);
  }

  /* -------- Playlist -------- */
  .playlist{
    margin-top:18px;
    border-top:1px solid var(--rule);
  }
  .playlist-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
    cursor:pointer;
    background:none;
    border-left:none; border-right:none; border-top:none;
    width:100%;
    text-align:left;
    font-family:'Work Sans', sans-serif;
  }
  .playlist-item-left{
    display:flex;
    align-items:baseline;
    gap:12px;
    min-width:0;
  }
  .playlist-index{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--stone);
    flex:0 0 auto;
  }
  .playlist-title{
    font-size:14px;
    color:var(--sumi);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .playlist-item.active .playlist-title{ color:var(--indigo); }
  .playlist-duration{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--stone);
    flex:0 0 auto;
  }

  /* -------- Footer -------- */
  footer{
    border-top:1px solid var(--rule);
    padding:clamp(48px,7vw,80px) 0 40px;
  }
  .footer-top{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:60px;
  }
  .footer-top h4{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-style:italic;
    font-size:20px;
    max-width:260px;
    line-height:1.4;
  }
  .footer-col p.head{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--stone);
    margin-bottom:16px;
  }
  .footer-col a{
    display:block;
    font-size:14px;
    margin-bottom:10px;
    color:var(--sumi);
  }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--stone);
    letter-spacing:0.04em;
  }

  /* -------- Reveal on scroll -------- */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* -------- Focus states -------- */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--indigo);
    outline-offset:3px;
  }

  /* -------- Responsive -------- */
  @media (max-width: 860px){
    .navlinks{
      position:fixed; inset:64px 0 0 0; background:var(--washi);
      flex-direction:column; padding:32px; gap:24px;
      transform:translateY(-8px);
      opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
    }
    .navlinks.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
    .navtoggle{
      display:block; background:none; border:none; font-family:'IBM Plex Mono', monospace;
      font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:var(--sumi);
    }
    .section-head{ grid-template-columns:1fr; }
    .art-row, .art-row.reverse{ grid-template-columns:1fr; }
    .art-row.reverse .art-media, .art-row.reverse .art-info{ order:initial; }
    .garment-grid{ grid-template-columns:1fr 1fr; }
    .gallery-grid{ grid-template-columns:1fr; }
    .practice-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; }
    .principles-inner{ letter-spacing:0.16em; }
  }
  @media (max-width: 520px){
    .garment-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr; }
  }