/* ============================================================
   Virohana — Sovereign charter aesthetic
   Parchment · ink · garnet · gold hairlines
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root{
  --paper:    #F3EEE3;
  --paper-2:  #ECE4D4;
  --ink:      #1B1A16;
  --ink-soft: #565043;
  --ink-faint:#8A8270;
  --garnet:   #722A24;
  --garnet-2: #8E382F;
  --gold:     #B0883C;
  --rule:     rgba(27,26,22,0.14);
  --rule-2:   rgba(176,136,60,0.45);

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "Spline Sans Mono", ui-monospace, monospace;

  --measure: 64rem;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  line-height:1.62;
  font-weight:400;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}

/* fine paper grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* faint vignette warmth */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% -10%, rgba(176,136,60,0.07), transparent 60%);
}

.wrap{ position:relative; z-index:1; }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-0.012em; }
.kicker{
  font-family:var(--mono);
  font-size:0.72rem; font-weight:500;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--garnet);
}
a{ color:var(--ink); text-decoration:none; }
em{ font-style:italic; color:var(--ink-soft); }
strong{ font-weight:500; }
::selection{ background:var(--garnet); color:var(--paper); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem var(--pad);
  background:rgba(243,238,227,0.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:0.7rem; }
.brand .seal{ width:30px; height:30px; flex:none; }
.brand .name{
  font-family:var(--display); font-size:1.32rem; font-weight:500;
  letter-spacing:-0.01em;
}
nav.menu{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); }
nav.menu a{
  font-family:var(--mono); font-size:0.74rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft);
  padding:0.2rem 0; position:relative;
}
nav.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--garnet); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
nav.menu a:hover, nav.menu a[aria-current="page"]{ color:var(--ink); }
nav.menu a:hover::after, nav.menu a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---------- Layout ---------- */
main{ padding:0 var(--pad); }
section{ max-width:var(--measure); margin-inline:auto; }
.section-pad{ padding-block:clamp(4rem,10vw,8rem); }

.hairline{ height:1px; background:var(--rule); max-width:var(--measure); margin:0 auto; }
.hairline.gold{ background:linear-gradient(90deg,transparent,var(--rule-2) 18%,var(--rule-2) 82%,transparent); }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(4.5rem,12vw,9rem) clamp(3rem,7vw,5rem); }
.hero .kicker{ display:block; margin-bottom:1.6rem; }
.hero h1{
  font-size:clamp(2.7rem, 1.6rem + 5.4vw, 5.8rem);
  font-weight:300;
  max-width:18ch;
}
.hero h1 .accent{ font-style:italic; color:var(--garnet); }
.hero .lede{
  margin-top:1.8rem; max-width:46ch;
  font-size:clamp(1.12rem,1rem+0.6vw,1.42rem);
  color:var(--ink-soft); font-weight:300;
}
.cta-row{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:0.9rem 1.4rem; align-items:center; }

.btn{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.16em;
  text-transform:uppercase; padding:0.85rem 1.5rem;
  border:1px solid var(--ink); color:var(--paper); background:var(--ink);
  transition:all .3s ease; display:inline-block;
}
.btn:hover{ background:var(--garnet); border-color:var(--garnet); transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.link-arrow{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--garnet); }
.link-arrow .arr{ transition:transform .3s ease; display:inline-block; }
.link-arrow:hover .arr{ transform:translateX(5px); }

/* ---------- Tenets strip ---------- */
.tenets{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.tenet{ background:var(--paper); padding:clamp(1.6rem,4vw,2.6rem); }
.tenet .n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; color:var(--gold); }
.tenet h3{ font-size:1.5rem; margin:0.7rem 0 0.4rem; }
.tenet p{ color:var(--ink-soft); font-size:0.98rem; font-weight:300; }

/* ---------- Generic blocks ---------- */
.block h2{ font-size:clamp(1.9rem,1.3rem+2.4vw,3.1rem); font-weight:300; max-width:20ch; }
.block .sub{ color:var(--ink-soft); max-width:52ch; margin-top:1.1rem; font-weight:300; }

.feature{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:clamp(1.8rem,4vw,2.8rem);
  position:relative;
}
.card .tag{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--garnet); border:1px solid var(--rule-2); padding:0.25rem 0.6rem; display:inline-block;
}
.card h3{ font-size:1.85rem; margin:1.1rem 0 0.7rem; font-weight:400; }
.card ul{ list-style:none; margin-top:1.1rem; }
.card li{ padding-left:1.4rem; position:relative; color:var(--ink-soft); margin-bottom:0.5rem; font-weight:300; }
.card li::before{ content:""; position:absolute; left:0; top:0.62em; width:0.5rem; height:1px; background:var(--garnet); }

.price{ font-family:var(--mono); color:var(--gold); letter-spacing:0.1em; font-size:0.85rem; }

/* product list */
.stack{ display:grid; gap:1.4rem; }
.row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:start;
  padding:1.8rem 0; border-bottom:1px solid var(--rule);
}
.row .idx{ font-family:var(--mono); color:var(--ink-faint); font-size:0.85rem; padding-top:0.4rem; }
.row h3{ font-size:1.5rem; font-weight:400; }
.row p{ color:var(--ink-soft); font-weight:300; margin-top:0.35rem; max-width:48ch; }
.row .meta{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--garnet); white-space:nowrap; padding-top:0.5rem; }

/* about */
.lede-col{ max-width:40ch; }
.prose{ max-width:58ch; }
.prose p{ margin-bottom:1.25rem; color:var(--ink-soft); font-weight:300; }
.prose p:first-of-type{ color:var(--ink); font-size:1.18rem; }

/* blog */
.posts{ display:grid; gap:0; }
.post{ padding-block:clamp(2rem,4vw,2.8rem); border-bottom:1px solid var(--rule); }
.post .date{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); }
.post h2{ font-size:clamp(1.6rem,1.2rem+1.6vw,2.3rem); font-weight:400; margin:0.6rem 0 0.9rem; max-width:24ch; }
.post .prose{ max-width:62ch; }
.post details summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--garnet); margin-top:0.6rem; }
.post details summary::-webkit-details-marker{ display:none; }
.post details[open] summary{ color:var(--ink-faint); }
.post details .prose{ margin-top:1.2rem; }

/* ---------- Footer ---------- */
footer{
  position:relative; z-index:1;
  margin-top:clamp(4rem,8vw,7rem);
  border-top:1px solid var(--rule);
  padding:clamp(2.5rem,6vw,4rem) var(--pad) 2.5rem;
}
.foot-grid{ max-width:var(--measure); margin-inline:auto; display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; }
.foot-motto{ font-family:var(--display); font-style:italic; font-size:1.5rem; font-weight:300; max-width:18ch; }
.foot-meta{ font-family:var(--mono); font-size:0.72rem; line-height:2; letter-spacing:0.06em; color:var(--ink-faint); text-align:right; }
.foot-meta a:hover{ color:var(--garnet); }

/* ---------- Motion ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:0; animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s; } .d2{ animation-delay:.18s; } .d3{ animation-delay:.31s; }
.d4{ animation-delay:.44s; } .d5{ animation-delay:.57s; }
@media (prefers-reduced-motion:reduce){ .reveal{ animation:none; opacity:1; } }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  nav.menu{ gap:1rem; }
  nav.menu a{ font-size:0.66rem; letter-spacing:0.12em; }
  .brand .name{ font-size:1.12rem; }
  .tenets{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; }
  .row{ grid-template-columns:auto 1fr; }
  .row .meta{ grid-column:2; padding-top:0.2rem; }
  .foot-meta{ text-align:left; }
}