/* =========================================================
   PONTUS HOUSE — house stylesheet
   Old-world print house × futuristic precision
   ========================================================= */

:root{
  --paper:      #f4efe4;   /* warm ivory ground        */
  --paper-2:    #efe8d9;   /* slightly deeper panel    */
  --ink:        #17130d;   /* warm near-black          */
  --ink-soft:   #4a4034;   /* muted body ink           */
  --gold:       #b0842a;   /* old gold                 */
  --gold-lift:  #c9a24e;   /* brighter gold on dark    */
  --red:        #8c1c12;   /* oxblood vermilion        */
  --navy:       #0e1730;   /* deep sea navy (sparing)  */
  --navy-2:     #0a1124;
  --line:       rgba(23,19,13,.16);
  --line-gold:  rgba(176,132,42,.45);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --meas: 66ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.06rem,.55rem + .95vw,1.32rem);
  line-height:1.55;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--gold); color:var(--paper); }

.skip{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; z-index:50; font-family:var(--mono); font-size:.7rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- shared type utilities ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.eyebrow--red{ color:var(--red); }

h1,h2,h3{ font-weight:600; line-height:1.04; margin:0; letter-spacing:.005em; }
.display{ font-size:clamp(2.7rem,1.2rem + 6vw,5.6rem); }

/* seven-pointed star divider (echoes the book's septagram) */
.star{ width:24px; height:24px; fill:var(--gold); flex:none; }
.rule-star{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  color:var(--line-gold); margin:0;
}
.rule-star::before,.rule-star::after{
  content:""; height:1px; width:min(30vw,150px);
  background:linear-gradient(90deg,transparent,var(--line-gold),transparent);
}

/* ---------- top meta bar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem var(--pad);
  font-family:var(--mono); font-size:.63rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.topbar span:last-child{ color:var(--gold); }
@media (max-width:560px){ .topbar span.hide-sm{ display:none; } }

/* ---------- masthead ---------- */
.masthead{
  text-align:center;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(2rem,4vw,3.5rem);
}
.masthead img{
  width:min(560px,86vw); margin:0 auto;
  mix-blend-mode:multiply;
}
.masthead .estab{
  margin-top:1.4rem; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- hero ---------- */
.hero{
  padding:clamp(1rem,3vw,2rem) var(--pad) clamp(3.5rem,7vw,6rem);
  text-align:center;
}
.hero .display{ margin:.4rem auto .1rem; max-width:16ch; }
.hero .display em{ font-style:italic; color:var(--red); }
.hero .lede{
  margin:1.6rem auto 0; max-width:52ch;
  color:var(--ink-soft); font-size:clamp(1.15rem,.7rem + 1vw,1.5rem);
  line-height:1.5;
}

/* ---------- generic section frame ---------- */
section{ padding-inline:var(--pad); }
.band{ padding-block:clamp(3.5rem,8vw,7rem); }
.wrap{ max-width:1120px; margin-inline:auto; }

/* ---------- the debut (dark sea band) ---------- */
.debut{
  background:
    radial-gradient(120% 90% at 50% -10%, #14224a 0%, var(--navy) 45%, var(--navy-2) 100%);
  color:var(--paper);
  border-block:1px solid rgba(201,162,78,.25);
}
.debut .grid{
  display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:1000px; margin-inline:auto;
}
.debut .cover{
  position:relative;
}
.debut .cover img{
  width:100%; border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,78,.3);
}
.debut .cover .tag{
  position:absolute; top:-14px; left:-14px;
  background:var(--red); color:var(--paper);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.5rem .8rem; box-shadow:0 8px 20px -6px rgba(0,0,0,.6);
}
.debut .eyebrow{ color:var(--gold-lift); }
.debut h2{ font-size:clamp(2.2rem,1.2rem + 3.5vw,3.6rem); margin:.7rem 0 0; }
.debut .series{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-lift); margin:1rem 0 0;
}
.debut .byline{ font-style:italic; color:var(--paper); opacity:.85; margin:.4rem 0 0; font-size:1.25rem; }
.debut p.blurb{ color:rgba(244,239,228,.8); max-width:46ch; margin:1.4rem 0 0; }
.debut .meta{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; margin:1.8rem 0 0;
  padding-top:1.5rem; border-top:1px solid rgba(201,162,78,.28);
}
.debut .meta div{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,228,.55); }
.debut .meta strong{ display:block; margin-top:.45rem; font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:.02em; color:var(--gold-lift); text-transform:none; }
.cta{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); background:var(--gold-lift);
  padding:.9rem 1.5rem; text-decoration:none; border-radius:1px;
  transition:transform .18s ease, background .18s ease;
}
.cta:hover{ background:#dab765; transform:translateY(-2px); }
.cta__note{ display:block; margin-top:.9rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,228,.5); }
@media (max-width:720px){
  .debut .grid{ grid-template-columns:1fr; }
  .debut .cover{ max-width:300px; margin:0 auto; }
}

/* ---------- the house (three columns) ---------- */
.house .lead{
  max-width:60ch; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center;
  font-size:clamp(1.3rem,.8rem + 1.4vw,1.9rem); line-height:1.4; color:var(--ink);
}
.house .lead em{ font-style:italic; color:var(--red); }
.cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem);
}
.cols .col{ padding-top:1.4rem; border-top:1px solid var(--line-gold); }
.cols .col h3{ font-size:1.55rem; }
.cols .col .num{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.9rem; }
.cols .col p{ color:var(--ink-soft); margin:.7rem 0 0; font-size:1.08rem; line-height:1.55; }
@media (max-width:760px){ .cols{ grid-template-columns:1fr; gap:2.4rem; } }

/* ---------- name / colophon aside ---------- */
.colophon{ background:var(--paper-2); border-block:1px solid var(--line); }
.colophon .wrap{ display:grid; grid-template-columns:200px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:920px; }
.colophon img{ width:170px; margin:0 auto; mix-blend-mode:multiply; }
.colophon .eyebrow{ margin-bottom:1rem; }
.colophon p{ margin:0; max-width:56ch; color:var(--ink-soft); }
.colophon p + p{ margin-top:1rem; }
.colophon strong{ color:var(--ink); font-weight:600; }
@media (max-width:640px){ .colophon .wrap{ grid-template-columns:1fr; text-align:center; } .colophon p{ margin-inline:auto; } }

/* ---------- footer ---------- */
.foot{
  background:var(--ink); color:var(--paper);
  padding:clamp(3rem,6vw,5rem) var(--pad) 2.5rem;
}
.foot .wrap{ display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:start; max-width:1120px; }
.foot .wordmark{ font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:.14em; }
.foot .tagline{ font-family:var(--mono); font-size:.63rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-lift); margin-top:.7rem; }
.foot .contacts{ display:flex; flex-wrap:wrap; gap:2.5rem; }
.foot .contacts div span{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,228,.5); margin-bottom:.5rem; }
.foot .contacts a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line-gold); padding-bottom:1px; }
.foot .contacts a:hover{ color:var(--gold-lift); }
.foot .legal{
  grid-column:1 / -1; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem;
  border-top:1px solid rgba(201,162,78,.22);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,228,.45);
}
@media (max-width:640px){ .foot .wrap{ grid-template-columns:1fr; } }