:root{
    --bone:#F2EDE3;
    --bone-deep:#E6E1D7;
    --ink:#1B1A17;
    --ink-soft:#4A473F;
    --taupe:#9C9182;
    --line:#CFC8B9;
    --panel-1:#D8CFC0;
    --panel-2:#C7BBA8;
    --panel-3:#BDB09B;
    --panel-4:#EDE6D8;
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bone);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

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

  .serif{font-family:'Inter', sans-serif;}
  .bahnschrift{
    font-family:'Bahnschrift', 'Bahnschrift Light SemiCondensed', 'Segoe UI', Arial, sans-serif;
    font-weight:300;
    font-stretch:semi-condensed;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:6px 48px;
  }
  .nav-left ul, .nav-right ul{
    display:flex;
    gap:28px;
    list-style:none;
  }
  .nav-left ul{justify-content:flex-start;}
  .nav-right ul{justify-content:flex-end;}
  .nav-left a, .nav-right a{
    font-size:12px;
    letter-spacing:0.06em;
    position:relative;
    padding-bottom:2px;
  }
  .nav-left a{color:var(--ink);}
  .nav-right a{color:var(--ink);}

  /* Home page only: nav adapts to the photo + dark section as you scroll */
  body.page-home.zone-hero .nav-right a{color:#F5F2EA;}
  body.page-home.zone-dark .nav-left a,
  body.page-home.zone-dark .nav-right a{color:#F5F2EA;}
  .nav-left a::after, .nav-right a::after{
    content:'';
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:1px;
    background:currentColor;
    transition:width 0.4s ease;
  }
  .nav-left a:hover::after, .nav-right a:hover::after{width:100%;}
  header .logo{
    grid-column:2;
    justify-self:center;
  }

  .logo{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:20px;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
  }
  .logo-mark{
    height:140px;
    width:auto;
    display:block;
    filter:invert(1);
    mix-blend-mode:difference;
  }


  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:
      linear-gradient(to top, rgba(242,237,227,0.55), rgba(242,237,227,0) 50%),
      url('hero-home.jpg')
;
    background-size:cover;
    background-position:center 60%;
  }

  .hero-texture{
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(100deg, rgba(27,26,23,0.035) 0px, rgba(27,26,23,0.035) 1px, transparent 1px, transparent 68px);
    opacity:0.6;
  }

  .hero-figure{
    position:absolute;
    right:8%;
    top:0;
    height:100%;
    width:34%;
    min-width:280px;
    opacity:0;
    transform:translateY(24px);
    animation:rise 1.4s cubic-bezier(.22,1,.36,1) 0.3s forwards;
  }

  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:0 48px 64px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
  }

  .hero-title{
    font-size:clamp(40px, 5vw, 72px);
    font-weight:300;
    line-height:0.94;
    letter-spacing:-0.01em;
    opacity:0;
    transform:translateY(28px);
    animation:rise 1.1s cubic-bezier(.22,1,.36,1) 0.15s forwards;
  }
  .hero-title em{font-style:italic;font-weight:400;}

  .hero-aside{
    max-width:230px;
    font-size:14px;
    color:var(--ink-soft);
    padding-bottom:14px;
    opacity:0;
    transform:translateY(20px);
    animation:rise 1.1s cubic-bezier(.22,1,.36,1) 0.55s forwards;
  }
  .hero-aside .season{
    display:block;
    font-size:12px;
    letter-spacing:0.08em;
    color:var(--ink);
    margin-bottom:10px;
  }

  @keyframes rise{
    to{opacity:1; transform:translateY(0);}
  }

  .scroll-cue{
    position:absolute;
    left:48px; bottom:28px;
    z-index:2;
    font-size:12px;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:rise 1s ease 1s forwards;
  }
  .scroll-cue .stem{
    width:1px; height:28px;
    background:var(--ink-soft);
  }

  /* ---------- Intro ---------- */
  .intro{
    padding:190px 48px 140px;
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:60px;
    max-width:1400px;
    margin:0 auto;
  }
  .intro-label{
    font-size:13px;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    max-width:200px;
  }
  .intro-text{
    font-family:'Inter', sans-serif;
    font-weight:300;
    font-size:clamp(26px, 3vw, 38px);
    line-height:1.4;
    max-width:640px;
  }
  .intro-text em{font-style:italic;color:var(--ink-soft);}

  /* ---------- Collection ---------- */
  .collection{
    padding:0 48px 160px;
    max-width:1400px;
    margin:0 auto;
  }
  .collection-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    border-top:1px solid var(--line);
    padding:22px 0 60px;
  }
  .collection-head h2{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:32px;
  }
  .collection-head a{
    font-size:13px;
    letter-spacing:0.04em;
    border-bottom:1px solid var(--ink);
    padding-bottom:2px;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:28px;
  }

  .piece{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .piece-panel{
    aspect-ratio:3/4;
    border-radius:2px;
    position:relative;
    overflow:hidden;
    transition:transform 0.6s cubic-bezier(.22,1,.36,1);
  }
  .piece:hover .piece-panel{transform:translateY(-6px);}
  .piece-panel::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(155deg, rgba(255,255,255,0.16), rgba(0,0,0,0.06) 60%);
  }

  .piece-info{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:var(--ink-soft);
  }
  .piece-info .name{color:var(--ink); font-family:'Inter', sans-serif; font-size:15px;}

  .p1{grid-column:span 5;}
  .p2{grid-column:span 4; margin-top:80px;}
  .p3{grid-column:span 3;}
  .p4{grid-column:span 3;}
  .p5{grid-column:span 6; margin-top:-40px;}
  .p6{grid-column:span 3; margin-top:40px;}

  .tone-a{background:linear-gradient(160deg, var(--panel-1), var(--panel-4));}
  .tone-b{background:linear-gradient(160deg, var(--panel-2), var(--panel-1));}
  .tone-c{background:linear-gradient(160deg, var(--ink-soft), #2b2820);}
  .tone-d{background:linear-gradient(160deg, var(--panel-4), #f4f1ea);}
  .tone-e{background:linear-gradient(160deg, var(--panel-3), var(--panel-2));}
  .tone-f{background:linear-gradient(160deg, #d8d2c4, var(--panel-1));}

  /* ---------- Feature / craft ---------- */
  .craft{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--ink);
    color:var(--bone);
  }
  .craft-panel{
    background:linear-gradient(200deg, #2b2820, #17150f);
    min-height:520px;
  }
  .craft-text{
    padding:100px 64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:26px;
    max-width:520px;
  }
  .craft-text .kicker{
    font-size:13px;
    letter-spacing:0.06em;
    color:var(--taupe);
  }
  .craft-text h3{
    font-family:'Inter', sans-serif;
    font-weight:300;
    font-size:clamp(30px, 3vw, 44px);
    line-height:1.2;
  }
  .craft-text p{
    color:#C9C4B6;
    font-size:15px;
    max-width:420px;
  }
  .craft-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:8px;
    border-top:1px solid rgba(239,236,229,0.18);
    padding-top:22px;
  }
  .craft-list div{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:#C9C4B6;
    padding:6px 0;
    border-bottom:1px solid rgba(239,236,229,0.1);
  }
  .craft-list span:last-child{color:var(--bone);}

  /* ---------- Closing / newsletter ---------- */
  .closing{
    padding:150px 48px;
    text-align:left;
    max-width:1400px;
    margin:0 auto;
  }
  .closing h2{
    font-family:'Inter', sans-serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(32px, 5vw, 64px);
    max-width:820px;
    line-height:1.2;
  }
  .closing-row{
    margin-top:48px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
    border-top:1px solid var(--line);
    padding-top:28px;
  }
  .signup{
    display:flex;
    align-items:flex-end;
    gap:18px;
  }
  .signup input{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--ink);
    font-family:'Inter', sans-serif;
    font-size:15px;
    padding:8px 0;
    width:260px;
    color:var(--ink);
  }
  .signup input::placeholder{color:var(--ink-soft);}
  .signup input:focus{outline:none; border-color:var(--ink);}
  .signup button{
    background:none;
    border:none;
    font-size:13px;
    letter-spacing:0.05em;
    border-bottom:1px solid var(--ink);
    padding-bottom:2px;
    cursor:pointer;
  }
  .contact-line{
    font-size:13px;
    letter-spacing:0.06em;
    color:var(--ink-soft);
  }
  .signup button:focus-visible, .nav-left a:focus-visible, .nav-right a:focus-visible, .collection-head a:focus-visible{
    outline:2px solid var(--ink-soft);
    outline-offset:3px;
  }

  /* ---------- Footer ---------- */

  /* ---------- Responsive ---------- */
  @media (max-width:860px){
    header{padding:14px 20px; grid-template-columns:1fr auto 1fr;}
    .logo-mark{height:64px;}
    .nav-left, .nav-right{display:none;}
    header .logo{grid-column:2;}
    .hero-content{flex-direction:column; align-items:flex-start; gap:24px; padding:0 22px 48px;}
    .hero-aside{max-width:100%;}
    .intro{grid-template-columns:1fr; padding:150px 22px 90px; gap:24px;}
    .collection{padding:0 22px 100px;}
    .grid{grid-template-columns:repeat(6,1fr); gap:18px;}
    .p1,.p2,.p3,.p4,.p5,.p6{grid-column:span 6; margin-top:0;}
    .craft{grid-template-columns:1fr;}
    .craft-panel{min-height:340px;}
    .craft-text{padding:64px 22px;}
    .closing{padding:90px 22px;}
    .closing-row{align-items:flex-start;}
    .signup input{width:190px;}
    footer{flex-direction:column; gap:14px; padding:28px 22px;}
  }

  /* ---------- Shop mega-menu ---------- */
  .has-dropdown{position:relative;}
  .mega-menu{
    position:absolute;
    top:26px; left:-20px;
    background:var(--bone);
    border:1px solid var(--line);
    border-radius:2px;
    padding:22px 26px;
    min-width:200px;
    box-shadow:0 16px 34px rgba(27,26,23,0.12);
    display:none;
    z-index:50;
  }
  .has-dropdown:hover .mega-menu, .has-dropdown:focus-within .mega-menu, .has-dropdown.open .mega-menu{display:block;}
  .mega-menu a{
    display:block;
    font-size:13px;
    color:var(--ink-soft);
    padding:5px 0;
    white-space:nowrap;
  }
  .mega-menu a:hover{color:var(--ink);}
  .mega-menu .cat-heading{
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--ink);
    display:block;
    margin-top:12px;
  }
  .mega-menu .cat-heading:first-child{margin-top:0;}
  .mega-menu .submenu{
    margin-left:10px;
    padding-left:10px;
    border-left:1px solid var(--line);
  }

  /* ---------- Simple / generic pages ---------- */
  .page-hero{
    padding:180px 48px 50px;
    max-width:1000px;
    margin:0 auto;
  }
  .page-hero .kicker{
    font-size:13px;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    display:block;
    margin-bottom:14px;
  }
  .page-hero h1{
    font-family:'Inter', sans-serif;
    font-weight:300;
    font-size:clamp(32px, 5vw, 56px);
    line-height:1.15;
  }
  .page-content{
    padding:0 48px 140px;
    max-width:760px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .page-content p{
    color:var(--ink-soft);
    font-size:15px;
    line-height:1.75;
  }
  .page-content h2{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:22px;
    margin-top:14px;
  }
  .page-content a.inline-link{
    color:var(--ink);
    border-bottom:1px solid var(--ink);
  }

  /* ---------- Shop landing categories ---------- */
  .shop-categories{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:26px;
    max-width:920px;
    margin:0 auto;
    padding:0 48px 140px;
  }
  .shop-cat-card{
    border:1px solid var(--line);
    padding:32px;
    border-radius:2px;
  }
  .shop-cat-card h3{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:20px;
    margin-bottom:6px;
  }
  .shop-cat-card p{color:var(--ink-soft); font-size:13px; margin-bottom:14px;}
  .shop-cat-card .sub-links{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px;
    border-top:1px solid var(--line);
    padding-top:14px;
  }
  .shop-cat-card .sub-links a{font-size:13px; color:var(--ink-soft);}
  .page-content .sub-links{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .page-content .sub-links a{
    font-size:15px;
    color:var(--ink);
    border-bottom:1px solid var(--line);
    padding-bottom:10px;
  }
  .page-content .sub-links a:hover{border-color:var(--ink);}
  .shop-cat-card .sub-links a:hover{color:var(--ink);}

  /* ---------- New footer ---------- */
  .site-footer{
    border-top:1px solid var(--line);
    padding:90px 48px 0;
  }
  .footer-cols{
    display:grid;
    grid-template-columns:1fr 1fr 1.3fr;
    gap:48px;
    max-width:1300px;
    margin:0 auto;
    padding-bottom:70px;
  }
  .footer-col h4{
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.06em;
    margin-bottom:20px;
  }
  .footer-col ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .footer-col a{font-size:13px; color:var(--ink-soft);}
  .footer-col a:hover{color:var(--ink);}

  .footer-subscribe p.lead{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
  .footer-subscribe .signup{margin-bottom:16px;}
  .footer-subscribe .signup input{width:100%;}
  .consent-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:12px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .consent-row input[type="checkbox"]{
    margin-top:3px;
    accent-color:var(--ink);
  }

  .footer-bottom{
    border-top:1px solid var(--line);
    padding:26px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
  }
  .footer-bottom img{height:42px; width:auto;}
  .footer-bottom span{font-size:14px; color:var(--ink-soft);}

  @media (max-width:860px){
    .footer-cols{grid-template-columns:1fr; gap:40px; padding-bottom:50px;}
    .mega-menu{left:0;}
    .shop-categories{grid-template-columns:1fr; padding:0 22px 100px;}
    .page-hero{padding:150px 22px 40px;}
    .page-content{padding:0 22px 100px;}
    .site-footer{padding:60px 22px 0;}
  }

  .with-header-space{padding-top:190px;}
  @media (max-width:860px){
    .with-header-space{padding-top:150px;}
  }