/* ====== Secrets of Clay — Brand Foundation ====== */
/* Type: Cormorant Garamond (display/logo), Newsreader (headings),
   Hanken Grotesk (body — Neue Montreal substitute), Caveat (handwritten accent) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Caveat:wght@400;500;600&display=swap');

:root{
  /* palette — straight from the owner's brand kit */
  --cream:      #ebd5ba;   /* raw clay */
  --brown:      #6f4e2d;   /* clay brown */
  --sage:       #68674e;   /* muted olive */
  --terracotta: #995e58;   /* muted rust */
  --tan:        #b7a183;   /* warm tan */
  --warm-white: #f6f1ea;   /* warm white */

  /* derived */
  --ink:        #3a2c1d;   /* deep clay ink for text */
  --ink-soft:   #6b5a47;
  --paper:      #f6f1ea;
  --paper-2:    #efe6d8;
  --line:       rgba(58,44,29,.16);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --head:  'Newsreader', Georgia, serif;
  --body:  'Hanken Grotesk', system-ui, sans-serif;
  --script:'Caveat', cursive;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ margin:0; font-family:var(--body); color:var(--ink); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.foot-bottom .site-credit{
  opacity:.72;
  white-space:nowrap;
}

.mobile-nav-toggle,
.mobile-panel{ display:none; }

@media(max-width:1024px){
  .mobile-nav-toggle{
    margin-left:auto;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(246,241,234,.82);
    color:var(--brown);
    display:grid;
    place-items:center;
    padding:0;
    cursor:pointer;
  }
  .mobile-nav-toggle svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:1.7;
    fill:none;
    stroke-linecap:round;
    display:block;
  }
  .mobile-panel{
    position:absolute;
    right:24px;
    top:calc(100% + 8px);
    width:min(320px, calc(100vw - 32px));
    display:block;
    padding:10px 0;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--warm-white);
    box-shadow:0 20px 46px rgba(58,44,29,.16);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease, transform .24s ease;
  }
  header.mobile-nav-open .mobile-panel{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .mobile-panel nav{
    display:block;
  }
  .mobile-panel a{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    border:0;
    border-radius:0;
    color:var(--ink-soft);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    background:transparent;
    border-bottom:1px solid rgba(58,44,29,.08);
  }
  .mobile-panel a.active{
    color:var(--terracotta);
    background:rgba(153,94,88,.07);
    box-shadow:inset 3px 0 0 var(--terracotta);
  }
  .mobile-panel .mobile-panel-cta{
    margin:10px 12px 2px;
    min-height:44px;
    justify-content:center;
    border-radius:999px;
    color:var(--warm-white);
    background:var(--brown);
    border-color:var(--brown);
    border-bottom:0;
    box-shadow:none;
  }
}

@media(max-width:430px){
  .mobile-panel{ right:16px; }
}

@media(max-width:640px){
  header .nav{
    gap:12px !important;
    padding:12px 18px !important;
  }
  header .brand{
    min-width:0 !important;
    gap:9px !important;
  }
  header .brand img{
    width:48px !important;
    height:48px !important;
  }
  header .brand .n1{
    font-size:17px !important;
    letter-spacing:.08em !important;
  }
  header .brand .n2{
    font-size:8px !important;
    letter-spacing:.32em !important;
  }
  .mobile-nav-toggle{
    flex:0 0 46px;
    width:46px;
    height:46px;
  }
  header .nav > .btn.solid{ display:none; }
}

@media(max-width:380px){
  header .nav{ padding-left:14px !important; padding-right:14px !important; }
  header .brand img{ width:44px !important; height:44px !important; }
  header .brand .n1{ font-size:15px !important; letter-spacing:.07em !important; }
  header .brand .n2{ font-size:7.5px !important; letter-spacing:.28em !important; }
  .mobile-nav-toggle{ flex-basis:42px; width:42px; height:42px; }
}

/* subtle clay-grain texture used as an overlay */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* scroll-reveal: content stays visible if browser animation support fails */
.reveal{ opacity:1; transform:none; }
.reveal-ready .reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.reveal-ready .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-ready .reveal{ opacity:1; transform:none; transition:none; } }