/* ===== Ember & Oak — design tokens (warm, artisanal, quietly premium) ===== */
:root{
  /* palette — deep forest green, warm cream, burnished amber */
  --forest:#1F3A2D; --forest-2:#2b5140; --forest-ink:#F7F2E9;
  --cream:#F7F2E9; --bg:#F7F2E9; --surface:#FFFDF8;
  --amber:#C98A3D; --amber-2:#b3762e; --amber-ink:#2a1c09;
  --accent:#C98A3D; --accent-ink:#2a1c09;
  --text:#211c14; --muted:#5c5344; --border:#e5dcc9; --border-strong:#d7ccb2;

  --font-display:'Fraunces', Georgia, 'Times New Roman', 'DejaVu Serif', serif;
  --font-sans:'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'DejaVu Sans', sans-serif;

  /* type scale */
  --fs-xs:0.78rem; --fs-sm:0.9rem; --fs-base:1rem; --fs-lg:1.35rem;
  --fs-xl:2rem; --fs-2xl:2.85rem; --fs-3xl:4rem;
  --lh-tight:1.12; --lh-body:1.62;

  /* spacing rhythm */
  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-6:12px; --sp-8:16px;
  --sp-12:24px; --sp-16:32px; --sp-24:48px; --sp-32:64px; --sp-48:96px;

  --radius:6px; --radius-sm:4px; --radius-lg:12px;
  --container:1140px;
  --shadow:0 1px 0 rgba(31,58,45,.04);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); line-height:var(--lh-tight); font-weight:600; margin:0}
h1{font-size:var(--fs-3xl); letter-spacing:-.01em}
h2{font-size:var(--fs-2xl); letter-spacing:-.01em}
h3{font-size:var(--fs-lg)}
p{margin:0}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--sp-24)}
.hidden{display:none !important}
.eyebrow{
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber-2);
}

/* ===== buttons ===== */
.btn{
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent;
  padding:.72rem 1.4rem; border-radius:var(--radius); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; line-height:1; white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--forest); color:var(--forest-ink); border-color:var(--forest)}
.btn-primary:hover{background:var(--forest-2)}
.btn-accent{background:var(--amber); color:var(--amber-ink); border-color:var(--amber)}
.btn-accent:hover{background:var(--amber-2)}
.btn-ghost{background:transparent; color:var(--forest); border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--forest); background:rgba(31,58,45,.04)}
.btn[disabled]{cursor:not-allowed; opacity:1}
.btn-disabled{
  background:transparent; color:var(--muted); border:1px dashed var(--border-strong);
  cursor:not-allowed;
}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:2px}

/* ===== top bar / shell ===== */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(247,242,233,.92);
  backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:var(--container); margin:0 auto; padding:var(--sp-8) var(--sp-24);
  display:flex; align-items:center; gap:var(--sp-24);
}
.brand{
  font-family:var(--font-display); font-weight:600; font-size:1.4rem; letter-spacing:-.01em;
  color:var(--forest); text-decoration:none; white-space:nowrap;
}
.brand .amp{color:var(--amber)}
.nav{display:flex; gap:var(--sp-24); margin-left:var(--sp-8)}
.nav a{
  text-decoration:none; color:var(--text); font-size:var(--fs-sm); font-weight:500;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--amber)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-12)}
.who{font-size:var(--fs-sm); color:var(--muted)}

/* ===== hero (split) ===== */
.hero{padding:var(--sp-48) 0 var(--sp-32)}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:var(--sp-48); align-items:center;
}
.hero-copy .eyebrow{margin-bottom:var(--sp-12)}
.hero-copy h1{margin-bottom:var(--sp-16)}
.hero-lede{font-size:var(--fs-lg); color:var(--muted); max-width:34ch; margin-bottom:var(--sp-8)}
.hero-tag{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem;
  color:var(--forest); margin-bottom:var(--sp-24);
}
.hero-cta{display:flex; gap:var(--sp-12); flex-wrap:wrap; margin-bottom:var(--sp-16)}
.hero-note{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm);
  color:var(--forest); background:rgba(201,138,61,.12);
  border:1px solid rgba(201,138,61,.3); padding:.45rem .8rem; border-radius:999px;
}
.hero-note .dot{width:8px; height:8px; border-radius:50%; background:var(--amber)}
.hero-media{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong);
  aspect-ratio:4/5; background:linear-gradient(160deg, rgba(201,138,61,.14), rgba(31,58,45,.14));
}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media{position:relative}
.hero-invite{
  display:none; position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.hero-media.is-empty{
  background:
    linear-gradient(155deg, rgba(201,138,61,.16), rgba(247,242,233,0) 60%),
    linear-gradient(325deg, rgba(31,58,45,.14), rgba(247,242,233,0) 60%),
    var(--surface);
}
.hero-media.is-empty .hero-invite{display:block}

/* ===== section frame ===== */
.section{padding:var(--sp-48) 0; border-top:1px solid var(--border)}
.section-head{max-width:56ch; margin-bottom:var(--sp-32)}
.section-head .eyebrow{margin-bottom:var(--sp-8); display:block}
.section-head p{color:var(--muted); margin-top:var(--sp-8); font-size:var(--fs-lg)}

/* ===== collection grid ===== */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-24)}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
}
.media-placeholder{
  position:relative; aspect-ratio:4/3; width:100%;
  background:
    linear-gradient(150deg, rgba(201,138,61,.13), rgba(247,242,233,0) 55%),
    linear-gradient(320deg, rgba(31,58,45,.10), rgba(247,242,233,0) 60%),
    var(--surface);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.media-placeholder::after{
  content:""; position:absolute; inset:10px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); pointer-events:none;
}
.media-placeholder .invite{
  position:relative; margin:var(--sp-16); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.card-body{padding:var(--sp-16) var(--sp-16) var(--sp-16); display:flex; flex-direction:column; flex:1}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-8)}
.card h3{font-size:1.28rem}
.price{font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--forest); white-space:nowrap}
.notes{color:var(--muted); font-size:var(--fs-sm); margin-top:var(--sp-6); min-height:2.6em}
.card-meta{
  display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-12);
  font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em;
}
.chip{
  display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--forest);
  background:rgba(31,58,45,.07); border:1px solid rgba(31,58,45,.14);
  padding:.28rem .6rem; border-radius:999px;
}
.card-foot{margin-top:var(--sp-16); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8)}
.stock{
  display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-sm);
  font-weight:600; color:var(--amber-2);
}
.stock .dot{width:8px; height:8px; border-radius:50%; background:var(--amber)}

/* ===== story ===== */
.story-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--sp-48); align-items:start}
.story-body p{margin-bottom:var(--sp-16); font-size:1.06rem}
.story-body p:last-child{margin-bottom:0}
.pull{
  font-family:var(--font-display); font-style:italic; font-size:1.5rem; line-height:1.4;
  color:var(--forest); border-left:3px solid var(--amber); padding-left:var(--sp-16);
}
.story-card{
  background:var(--forest); color:var(--forest-ink); border-radius:var(--radius-lg);
  padding:var(--sp-24);
}
.story-card h3{color:var(--forest-ink); margin-bottom:var(--sp-12)}
.story-card p{color:rgba(247,242,233,.82); font-size:var(--fs-sm)}
.story-card .stripe-line{
  margin-top:var(--sp-16); padding-top:var(--sp-16); border-top:1px solid rgba(247,242,233,.16);
  color:var(--forest-ink); font-weight:500; font-size:var(--fs-sm);
}
.story-card .stripe-line strong{color:var(--amber)}

/* ===== account / auth ===== */
.account-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-48); align-items:start}
.auth-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-24); max-width:420px;
}
.auth-card h3{margin-bottom:var(--sp-6)}
.auth-sub{color:var(--muted); font-size:var(--fs-sm); margin-bottom:var(--sp-16)}
.field{display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-12)}
.field label{font-size:var(--fs-sm); font-weight:600}
.field input{
  font:inherit; padding:.7rem .8rem; border:1px solid var(--border-strong);
  border-radius:var(--radius); background:#fff; color:var(--text);
}
.field input:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(201,138,61,.18)}
.auth-actions{display:flex; gap:var(--sp-8); align-items:center; margin-top:var(--sp-8)}
.linkbtn{
  background:none; border:none; padding:0; font:inherit; color:var(--forest);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.msg{font-size:var(--fs-sm); margin-top:var(--sp-12); min-height:1.2em}
.msg.error{color:#a12b2b}
.msg.ok{color:var(--forest-2)}

/* signed-in workspace */
.workspace{display:grid; gap:var(--sp-24)}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-24)}
.panel h3{margin-bottom:var(--sp-6)}
.panel .sub{color:var(--muted); font-size:var(--fs-sm); margin-bottom:var(--sp-16)}
.empty{
  text-align:center; padding:var(--sp-32) var(--sp-16);
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(201,138,61,.06), rgba(247,242,233,0));
}
.empty .em-title{font-family:var(--font-display); font-size:1.35rem; color:var(--forest); margin-bottom:var(--sp-6)}
.empty p{color:var(--muted); max-width:44ch; margin:0 auto}
.order-list{list-style:none; padding:0; margin:0}
.order-list li{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-12);
  padding:var(--sp-12) 0; border-bottom:1px solid var(--border);
}
.order-list li:last-child{border-bottom:none}
.order-list .o-name{font-weight:600}
.order-list .o-meta{color:var(--muted); font-size:var(--fs-sm)}
.rec-form{display:flex; gap:var(--sp-8); flex-wrap:wrap; margin-top:var(--sp-16)}
.rec-form input{
  font:inherit; padding:.6rem .7rem; border:1px solid var(--border-strong);
  border-radius:var(--radius); background:#fff; flex:1; min-width:160px;
}

/* ===== footer ===== */
.footer{border-top:1px solid var(--border); padding:var(--sp-32) 0; margin-top:var(--sp-24)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-16); flex-wrap:wrap}
.footer .brand{font-size:1.15rem}
.footer p{color:var(--muted); font-size:var(--fs-sm)}

/* ===== entrance motion — content is ALWAYS visible by default; the animation only
   enhances elements as they scroll in, and never hides anything if it doesn't run. ===== */
.reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  .reveal.in{animation:revealUp .55s ease both}
}
@keyframes revealUp{ from{opacity:.35; transform:translateY(12px)} to{opacity:1; transform:none} }

/* ===== responsive ===== */
@media (max-width:900px){
  :root{--fs-3xl:3rem; --fs-2xl:2.25rem}
  .hero-grid{grid-template-columns:1fr; gap:var(--sp-24)}
  .hero-media{aspect-ratio:16/10; order:2}
  .hero-copy{order:1}
  .grid{grid-template-columns:repeat(2,1fr)}
  .story-grid,.account-wrap{grid-template-columns:1fr; gap:var(--sp-24)}
  .container,.topbar-inner{padding-left:var(--sp-16); padding-right:var(--sp-16)}
}
@media (max-width:640px){
  .nav{display:none}
  .grid{grid-template-columns:1fr}
  .hero{padding-top:var(--sp-24)}
  h1{font-size:2.4rem}
}