/* ═════════════════════════════════════════════════════════════════
   ORIGIN MERCHANTS — "The Ledger of Provenance"
   Ink canvas · paper warmth · rose-salt accent · brass detail
   ═════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0E0D0B;
  --ink-2:    #161411;
  --ink-3:    #201D19;
  --paper:    #F4EDE2;
  --paper-dim:#CFC5B4;
  --rose:     #D97F6E;
  --rose-hi:  #E8A090;
  --brass:    #C9A227;
  --hairline: rgba(244,237,226,.14);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:  "Spline Sans Mono", "Cascadia Code", Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--rose); color:var(--ink) }
::-webkit-scrollbar{ width:10px } ::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:5px }
::-webkit-scrollbar-thumb:hover{ background:var(--rose) }

h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:.005em }
a{ color:inherit }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:4; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} }

/* prototype badge */
.proto-badge{
  position:fixed; bottom:16px; right:-1px; z-index:60;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--ink); background:var(--brass);
  padding:6px 14px 6px 16px; border-radius:3px 0 0 3px;
}

/* ── nav ─────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(20px,4vw,56px);
  background:linear-gradient(var(--ink) 20%, transparent);
}
.nav__word{
  font-family:var(--serif); font-size:20px; text-decoration:none; letter-spacing:.02em;
}
.nav__word em{ font-style:italic; color:var(--rose-hi) }
.nav__links{ display:flex; gap:clamp(14px,2.5vw,34px); align-items:center }
.nav__links a{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--paper-dim); transition:color .25s;
}
.nav__links a:hover{ color:var(--rose-hi) }
.nav__cta{
  border:1px solid var(--hairline); padding:9px 18px; border-radius:2px;
  color:var(--paper) !important; transition:border-color .25s, background .25s;
}
.nav__cta:hover{ border-color:var(--rose); background:rgba(217,127,110,.08) }

/* ── hero ────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
#salt{ position:absolute; inset:0; width:100%; height:100% }
.hero__ridge{
  position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(90px,17vw,240px);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; padding:120px 20px 140px; max-width:960px }
.hero__over{
  font-family:var(--mono); font-size:clamp(10px,1.3vw,13px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--paper-dim); margin-bottom:26px;
}
.hero__over .arrow{ color:var(--rose) }
.hero__title{
  font-size:clamp(56px,11.5vw,150px); line-height:.94; letter-spacing:.01em;
  font-weight:300;
}
.hero__title span{
  display:block; font-style:italic; font-weight:600;
  background:linear-gradient(100deg,var(--paper) 30%, var(--rose-hi) 55%, var(--brass) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__tag{
  margin-top:30px; font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.6vw,30px); color:var(--rose-hi);
}
.hero__sub{
  margin:16px auto 0; max-width:560px; color:var(--paper-dim);
  font-size:clamp(15px,1.6vw,17px);
}
.hero__cta{ margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.btn{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:15px 34px; border-radius:2px; transition:all .3s;
}
.btn--solid{ background:var(--rose); color:var(--ink); font-weight:600 }
.btn--solid:hover{ background:var(--rose-hi); transform:translateY(-2px) }
.btn--ghost{ border:1px solid var(--hairline); color:var(--paper) }
.btn--ghost:hover{ border-color:var(--rose); color:var(--rose-hi) }
.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:56px; overflow:hidden;
}
.hero__scroll span{
  display:block; width:1px; height:100%;
  background:linear-gradient(var(--rose), transparent);
  animation:drop 2.2s ease-in-out infinite;
}
@keyframes drop{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── ticker ──────────────────────────────────────────── */
.ticker{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  overflow:hidden; background:var(--ink-2); padding:15px 0;
}
.ticker__track{ display:flex; white-space:nowrap; width:max-content; animation:tick 46s linear infinite }
.ticker__track span{
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; color:var(--paper-dim);
}
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ── sections ────────────────────────────────────────── */
.section{ padding:clamp(90px,12vw,150px) clamp(20px,6vw,90px); max-width:1360px; margin:0 auto }
.section__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--rose);
  margin-bottom:18px;
}
.section__head{ max-width:640px; margin-bottom:clamp(44px,6vw,80px) }
.section__head h2, .standard__head h2, .enquiries h2{
  font-size:clamp(38px,5.4vw,64px); line-height:1.04; margin-bottom:20px;
}
.section__lede{ color:var(--paper-dim); font-size:clamp(15px,1.7vw,18px) }

/* ── cards ───────────────────────────────────────────── */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
}
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .cards{ grid-template-columns:1fr } }
.card{
  background:var(--ink); padding:clamp(28px,3vw,44px);
  display:flex; flex-direction:column; gap:14px; min-height:300px;
  transition:background .35s;
  position:relative;
}
.card::after{
  content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--rose);
  transform:scaleY(0); transform-origin:top; transition:transform .35s;
}
.card:hover{ background:var(--ink-2) }
.card:hover::after{ transform:scaleY(1) }
.card svg{ width:52px; height:52px; color:var(--rose-hi) }
.card h3{ font-size:24px }
.card p{ color:var(--paper-dim); font-size:15px; flex:1 }
.card__foot{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass);
}

/* ── the standard (paper section) ────────────────────── */
.section--paper{
  background:var(--paper); color:var(--ink); max-width:none;
}
.section--paper ::selection{ background:var(--ink); color:var(--paper) }
.standard{
  max-width:1360px; margin:0 auto;
  display:grid; grid-template-columns:minmax(280px,1fr) 1.6fr; gap:clamp(40px,6vw,110px);
}
.standard__head{ position:sticky; top:120px; align-self:start }
.standard__head .section__no{ color:#A8532F }
.standard__head .section__lede{ color:#5C554A }
.ledger{ list-style:none }
.ledger li{
  display:grid; grid-template-columns:78px 1fr; gap:26px;
  padding:34px 0; border-top:1px solid rgba(14,13,11,.16);
}
.ledger li:last-child{ border-bottom:1px solid rgba(14,13,11,.16) }
.ledger__no{
  font-family:var(--serif); font-style:italic; font-size:clamp(30px,3.4vw,44px);
  color:#A8532F; line-height:1;
}
.ledger h3{ font-size:clamp(21px,2.2vw,27px); margin-bottom:8px }
.ledger p{ color:#5C554A; font-size:15.5px; max-width:56ch }

/* ── route map ───────────────────────────────────────── */
.routemap svg{ width:100%; height:auto; display:block }
.routemap__port circle{ fill:var(--rose) }
.routemap__port .pulse{
  fill:none; stroke:var(--rose); stroke-width:1; opacity:.7;
  animation:pulse 2.6s ease-out infinite;
  transform-box:fill-box; transform-origin:center;
}
@keyframes pulse{ 0%{transform:scale(.4); opacity:.8} 100%{transform:scale(1.9); opacity:0} }
.routemap__port text{
  fill:var(--paper); font-family:var(--mono); font-size:15px; letter-spacing:.2em;
  text-anchor:middle;
}
.routemap__port text.sub{ fill:var(--paper-dim); font-size:11.5px; letter-spacing:.08em; text-transform:lowercase }
.routemap figcaption{
  margin-top:26px; text-align:center; color:var(--paper-dim);
  font-size:13.5px; font-family:var(--mono); letter-spacing:.04em;
}
#routePath{ stroke-dashoffset:0 }
.routemap.animate #routePath{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 3.2s ease-out forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* ── own-label band ──────────────────────────────────── */
.band{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(60% 120% at 85% 50%, rgba(217,127,110,.12), transparent 70%),
    var(--ink-2);
  text-align:center; padding:clamp(70px,9vw,120px) 24px;
}
.band__kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin-bottom:18px;
}
.band h2{ font-size:clamp(32px,4.6vw,54px); margin-bottom:16px }
.band p{ color:var(--paper-dim); max-width:520px; margin:0 auto }

/* ── enquiries ───────────────────────────────────────── */
.section--enquiries{ text-align:left }
.enquiries h2{ font-size:clamp(52px,9vw,110px); line-height:.98 }
.enquiries__sub{ margin:26px 0 40px; color:var(--paper-dim); max-width:520px }
.enquiries__mail{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(22px,3.6vw,40px); color:var(--rose-hi); text-decoration:none;
  border-bottom:1px solid var(--rose); padding-bottom:6px; transition:color .3s, border-color .3s;
}
.enquiries__mail:hover{ color:var(--brass); border-color:var(--brass) }
.enquiries__note{
  margin-top:34px; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--paper-dim);
}

/* ── footer ──────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--hairline); padding:60px clamp(20px,6vw,90px) 40px;
  background:var(--ink-2);
}
.footer__grid{
  max-width:1360px; margin:0 auto 40px;
  display:grid; grid-template-columns:1fr 1.4fr; gap:40px;
}
.footer__word{ font-family:var(--serif); font-size:26px }
.footer__word em{ font-style:italic; color:var(--rose-hi) }
.footer__line{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--paper-dim);
  margin-top:10px;
}
.footer__legal p{ color:var(--paper-dim); font-size:13px; margin-bottom:12px; max-width:64ch }
.footer__proto{
  max-width:1360px; margin:0 auto; padding-top:26px; border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:#6b645a;
}

/* ── Munshi, the house clerk ─────────────────────────── */
.munshi-fab{
  position:fixed; bottom:22px; right:22px; z-index:70;
  display:flex; align-items:center; gap:10px;
  background:var(--ink-2); color:var(--paper);
  border:1px solid var(--rose); border-radius:999px;
  padding:13px 22px 13px 16px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  transition:transform .25s, background .25s;
}
.munshi-fab:hover{ transform:translateY(-2px); background:var(--ink-3) }
.munshi-fab svg{ width:18px; height:18px; color:var(--rose-hi) }
.munshi{
  position:fixed; bottom:86px; right:22px; z-index:71;
  width:min(390px, calc(100vw - 32px)); max-height:min(600px, calc(100svh - 120px));
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--hairline); border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.65); overflow:hidden;
}
.munshi__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 20px 14px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
}
.munshi__name{ font-family:var(--serif); font-size:20px }
.munshi__name em{ font-style:italic; color:var(--rose-hi); font-size:15px }
.munshi__sub{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); margin-top:5px }
.munshi__close{
  background:none; border:none; color:var(--paper-dim); font-size:26px; line-height:1;
  cursor:pointer; padding:0 2px;
}
.munshi__close:hover{ color:var(--rose-hi) }
.munshi__log{ flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:12px; min-height:180px }
.munshi__msg{ max-width:88%; padding:12px 15px; border-radius:8px; font-size:14.5px; line-height:1.55 }
.munshi__msg--clerk{ background:var(--ink-3); border:1px solid var(--hairline); align-self:flex-start; color:var(--paper) }
.munshi__msg--user{ background:var(--rose); color:var(--ink); align-self:flex-end; font-weight:500 }
.munshi__msg a{ color:var(--rose-hi) }
.munshi__msg--user a{ color:var(--ink) }
.munshi__thinking{ color:var(--paper-dim); font-style:italic }
.munshi__cites{ margin-top:9px; display:flex; flex-wrap:wrap; gap:6px }
.munshi__cites span{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  border:1px solid var(--hairline); color:var(--brass);
  padding:3px 8px; border-radius:999px;
}
.munshi__form{ display:flex; gap:0; border-top:1px solid var(--hairline) }
.munshi__form input{
  flex:1; background:var(--ink); border:none; color:var(--paper);
  padding:15px 18px; font-family:var(--sans); font-size:14.5px; outline:none;
}
.munshi__form input::placeholder{ color:#6b645a }
.munshi__form input:focus{ background:var(--ink-3) }
.munshi__form button{
  background:var(--rose); color:var(--ink); border:none; width:54px;
  font-size:20px; cursor:pointer; transition:background .25s;
}
.munshi__form button:hover{ background:var(--rose-hi) }
.munshi__disclaimer{
  padding:10px 18px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  color:var(--paper-dim); border-top:1px solid var(--hairline);
}
.munshi__disclaimer a{ color:var(--rose-hi); text-decoration:none }
@media (max-width:520px){
  .munshi{ right:16px; bottom:80px }
  .munshi-fab{ bottom:16px; right:16px }
}

/* ── reveal on scroll ────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1) }
.reveal.in{ opacity:1; transform:none }

/* ── responsive ──────────────────────────────────────── */
@media (max-width:900px){
  .standard{ grid-template-columns:1fr }
  .standard__head{ position:static }
  .footer__grid{ grid-template-columns:1fr }
  .nav__links a:not(.nav__cta){ display:none }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .grain,.ticker__track,.hero__scroll span,.routemap__port .pulse{ animation:none !important }
  .routemap.animate #routePath{ animation:none; stroke-dashoffset:0 }
  .reveal{ opacity:1; transform:none; transition:none }
}