/* pages.css — editorial content pages for nicolaspetersen.com
   Inherits the site's existing identity: ink #172523, cream #f8f7f4, gold #cdb681,
   Cormorant display + Manrope text, both already self-hosted in /assets. */

:root{
  --ink:#172523;
  --ink-2:#1e2e2c;
  --ink-3:#263835;
  --cream:#f8f7f4;
  --cream-dim:rgba(248,247,244,.72);
  --cream-faint:rgba(248,247,244,.46);
  --gold:#cdb681;
  --gold-dim:rgba(205,182,129,.30);
  --rule:rgba(248,247,244,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:99}

/* ---------- header ---------- */
.pg-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:22px;
  padding:16px clamp(20px,4vw,52px);
  background:rgba(23,37,35,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.pg-header .np-logo{width:42px;height:42px;display:block}
.pg-header .brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-name{font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1.35}
.brand-name span{display:block;color:var(--gold);font-size:9px;letter-spacing:.2em}
.pg-nav{margin-left:auto;display:flex;gap:clamp(14px,2.4vw,30px);align-items:center;flex-wrap:wrap}
.pg-nav a{font-size:13.5px;text-decoration:none;color:var(--cream-dim);white-space:nowrap}
.pg-nav a:hover,.pg-nav a:focus-visible{color:var(--cream)}
.pg-cta{
  border:1px solid var(--gold);border-radius:999px;
  padding:9px 18px;font-size:13px;color:var(--gold)!important;text-decoration:none;white-space:nowrap
}
.pg-cta:hover{background:var(--gold);color:var(--ink)!important}
@media(max-width:860px){.brand-name{display:none}}

/* ---------- shell ---------- */
.wrap{max-width:860px;margin:0 auto;padding-inline:clamp(20px,5vw,32px)}
main{padding-block:clamp(44px,7vw,84px) 0}

.crumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:26px}
.crumb a{color:var(--gold);text-decoration:none}
.crumb a:hover{text-decoration:underline}

h1{
  font-family:Cormorant,'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(38px,6.4vw,68px);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0 0 20px;
  text-wrap:balance;
}
.standfirst{
  font-size:clamp(18px,2.2vw,21px);
  line-height:1.58;
  color:var(--cream-dim);
  margin:0 0 14px;
  max-width:62ch;
}
.byline{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint);
  padding-top:18px;border-top:1px solid var(--rule);margin-top:30px
}

h2{
  font-family:Cormorant,'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(27px,3.7vw,38px);
  line-height:1.16;
  letter-spacing:-.01em;
  margin:58px 0 0;
  text-wrap:balance;
}
h3{
  font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  margin:34px 0 10px;color:var(--gold);font-weight:600
}

/* the answer capsule — the 25-30 word direct answer that sits right under an H2.
   This is the unit AI engines lift when they cite a page. */
.capsule{
  margin:16px 0 0;
  padding:17px 21px;
  border-left:2px solid var(--gold);
  background:var(--ink-2);
  font-size:17px;
  line-height:1.6;
  color:var(--cream);
}
p{margin:18px 0;max-width:68ch}

ul,ol{margin:18px 0;padding-left:20px;max-width:66ch}
li{margin:9px 0}
li::marker{color:var(--gold)}

strong{color:#fff;font-weight:600}
.term{color:var(--gold);font-style:italic}

/* fact table */
.facts{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.facts th,.facts td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.facts th{color:var(--gold);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.facts tr:last-child td,.facts tr:last-child th{border-bottom:0}
.tablewrap{overflow-x:auto}

.note{
  margin:30px 0;padding:17px 21px;border:1px solid var(--gold-dim);border-radius:3px;
  font-size:15px;color:var(--cream-dim)
}
.note strong{color:var(--gold)}

/* property / link cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;margin:30px 0}
.card{
  display:block;text-decoration:none;background:var(--ink-2);
  border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease
}
.card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card .body{padding:14px 16px}
.card .nm{font-family:Cormorant,Georgia,serif;font-size:21px;line-height:1.2}
.card .mt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-faint);margin-top:6px}

/* FAQ */
.faq{margin:26px 0}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{
  cursor:pointer;padding:16px 0;font-size:17.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:21px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 18px;color:var(--cream-dim)}

/* closing CTA */
.closer{
  margin:74px 0 0;padding:clamp(30px,5vw,50px);
  background:var(--ink-2);border:1px solid var(--rule);border-radius:3px;text-align:center
}
.closer h2{margin-top:0}
.closer p{margin-left:auto;margin-right:auto;color:var(--cream-dim)}
.btn{
  display:inline-block;margin-top:16px;padding:14px 30px;
  background:var(--gold);color:var(--ink);text-decoration:none;
  border-radius:999px;font-size:14.5px;font-weight:600
}
.btn:hover{background:#ddc998}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold);margin-left:8px}
.btn-ghost:hover{background:var(--gold);color:var(--ink)}

/* footer */
.pg-footer{
  margin-top:84px;padding:38px clamp(20px,5vw,32px) 52px;
  border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--cream-faint)
}
.pg-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline}
.pg-footer a{color:var(--cream-dim);text-decoration:none}
.pg-footer a:hover{color:var(--gold)}
.pg-footer .sp{margin-left:auto}


/* ---- phone: the fact tables must stack -------------------------------
   The th carries white-space:nowrap so the label never breaks mid-word. At 390px that
   squeezed the value column to ~90px and clipped every cell. Below 620px the rows become
   blocks instead, label above value. */
@media (max-width:620px){
  .facts, .facts tbody, .facts tr, .facts th, .facts td{display:block;width:100%}
  .facts tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .facts tr:last-child{border-bottom:0}
  .facts th,.facts td{border-bottom:0;padding:0;white-space:normal}
  .facts th{margin-bottom:5px}
  .tablewrap{overflow-x:visible}
  .pg-header{gap:12px;padding-inline:16px}
  .pg-nav{gap:10px 14px}
  .pg-nav a{font-size:13px}
  .cards{grid-template-columns:1fr}
  h2{margin-top:44px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* visibility13: readable editorial pages and touch-sized buyer navigation */
@font-face{font-family:Manrope;src:url('/assets/manrope-vf.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Cormorant;src:url('/assets/cormorant-regular.woff2') format('woff2');font-display:swap}
.guide-photo{width:100%;aspect-ratio:16/10;object-fit:cover;margin:32px 0 44px}.buyer-paths{display:flex;flex-wrap:wrap;gap:8px 24px;padding:30px 0;border-top:1px solid var(--rule);margin-top:48px}.buyer-paths a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:14px;text-underline-offset:5px}.pg-header .brand-name{display:none}.crumb,.byline,.card .mt{color:#aab4b0}.pg-nav a{min-height:44px;display:inline-flex;align-items:center}@media(max-width:620px){.pg-header{position:relative;align-items:flex-start}.pg-nav{gap:2px 15px}.pg-nav .pg-cta{padding:7px 13px}.guide-photo{aspect-ratio:4/3}.btn-ghost{margin-left:0;margin-top:12px}.buyer-paths{flex-direction:column;gap:4px}}