/* Marrow & Vine — static stylesheet */
:root{
  --color-bg:#14100e;
  --color-surface:#1c1713;
  --color-deep:#0e0b09;
  --color-text:#ede3d4;
  --color-muted:rgba(237,227,212,.68);
  --color-faint:rgba(237,227,212,.55);
  --color-divider:rgba(237,227,212,.14);

  --color-accent:#d3a05e;
  --color-accent-100:#f8efe0;
  --color-accent-200:#efdcc0;
  --color-accent-300:#e3c396;
  --color-accent-400:#dcb27b;
  --color-accent-500:#d3a05e;
  --color-accent-600:#c08d4c;
  --color-accent-deep:#3a2a18;
  --color-accent-deeper:#241a12;

  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Karla","Helvetica Neue",Arial,sans-serif;

  --space-4:20px;
  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:3px;

  --shadow-sm:0 2px 10px -6px rgba(0,0,0,.6);
  --shadow-md:0 10px 26px -18px rgba(0,0,0,.7);
  --shadow-lg:0 26px 60px -32px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
a{color:var(--color-accent)}
a:hover{color:var(--color-accent-300)}
img{display:block;width:100%;height:100%;object-fit:cover}
section[id]{scroll-margin-top:88px}

h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:500;letter-spacing:-.01em}
h6,.kicker{font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;margin:0}
.lux{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase}
.muted{color:var(--color-muted)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:1px;border:1px solid var(--color-accent-500);
  background:transparent;color:var(--color-accent-300);
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .25s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translateY(-1.5px);background:rgba(211,160,94,.12);color:var(--color-accent-200)}
.btn-primary{background:var(--color-accent-500);border-color:var(--color-accent-500);color:#14100e;box-shadow:inset 0 0 0 1px rgba(20,16,14,.28)}
.btn-primary:hover{background:var(--color-accent-400);border-color:var(--color-accent-400);color:#14100e}
.btn-ghost{border-color:transparent;padding-left:0;padding-right:0;letter-spacing:.12em}
.btn-ghost:hover{background:transparent;transform:none;color:var(--color-accent-200)}
.btn-block{width:100%}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-light:hover{background:rgba(255,255,255,.2);color:#fff}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:rgba(211,160,94,.3)}

.tag{display:inline-flex;align-items:center;padding:5px 12px;border-radius:1px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tag-outline{border:1px solid var(--color-accent-500);color:var(--color-accent-300)}

/* nav */
.nav-link{position:relative;padding:4px 2px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:inherit;transition:color .2s}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:var(--color-accent);transform:scaleX(0);transform-origin:center;transition:transform .3s}
.nav-link:hover{color:var(--color-accent)}
.nav-link:hover::after{transform:scaleX(1)}
header{transition:box-shadow .3s ease,background .3s ease}
header.stuck{box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}

/* ornament + marks */
.orn{height:12px;
  background-image:
    repeating-linear-gradient(45deg,rgba(211,160,94,.45) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(211,160,94,.45) 0 1px,transparent 1px 8px);
  background-size:8px 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.tri{display:inline-flex;align-items:center;gap:5px;color:inherit}
.dia{width:5px;height:5px;transform:rotate(45deg);background:currentColor;display:inline-block}
.dia-lg{width:8px;height:8px}
.rule{height:1px;width:44px;background:currentColor;opacity:.55}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--color-accent);margin-bottom:16px}
.eyebrow.center{justify-content:center}
.eyebrow span.label{font-size:12px;letter-spacing:.28em;text-transform:uppercase}

.dropcap::first-letter{font-family:var(--font-heading);font-size:4.6em;line-height:.72;float:left;padding:6px 12px 0 0;color:var(--color-accent)}

/* cards + images */
.card{background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.frame{position:relative;overflow:hidden;background:
  linear-gradient(140deg,#241c16,#14100e 60%,#1e1813);}
.frame img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.frame:hover img{transform:scale(1.045)}
.ken img{animation:ken 26s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-faint)}
.input{
  width:100%;padding:11px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--color-divider);background:var(--color-bg);
  color:var(--color-text);font-family:var(--font-body);font-size:15px;
}
.input:hover{border-color:rgba(211,160,94,.5)}
.input::placeholder{color:rgba(237,227,212,.38)}
textarea.input{min-height:84px;resize:vertical}

/* reveal */
.rev{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .ken img{animation:none}
}