/* ============================================================
   Shared page scaffolding for interior pages
   ============================================================ */
.page-hero{
  position:relative; padding:180px 28px 80px;
  overflow:hidden; border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(232,130,58,.06), transparent 70%);
  pointer-events:none;
}
.page-hero .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(242,239,232,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,239,232,.02) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image: radial-gradient(70% 60% at 50% 40%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, black 40%, transparent 85%);
  pointer-events:none;
}
.page-hero .inner{position:relative; z-index:2; max-width:var(--max); margin:0 auto}
.page-hero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(44px, 7.2vw, 104px);
  line-height:.96; letter-spacing:-.035em;
  color:var(--cream);
  font-variation-settings:"opsz" 144, "SOFT" 30;
  margin-top:24px; max-width:16ch;
}
.page-hero h1 i{font-style:italic; color:var(--accent)}
.page-hero .lead{
  max-width:560px; color:var(--cream-dim);
  font-size:17px; line-height:1.6; margin-top:28px;
}

/* Section block */
.block{padding:100px 28px; border-top:1px solid var(--line); position:relative}
.block-inner{max-width:var(--max); margin:0 auto}
.block-narrow{max-width:var(--max-narrow); margin:0 auto}

.prose{max-width:680px; color:var(--cream-dim); font-size:16px; line-height:1.75}
.prose p{margin-bottom:1.2em}
.prose p strong{color:var(--cream); font-weight:500}
.prose h3{
  font-family:var(--serif); font-weight:400; font-size:28px;
  letter-spacing:-.02em; color:var(--cream); margin:2em 0 .6em;
}
.prose h3 i{font-style:italic; color:var(--accent)}
.prose ul{margin:1em 0 1.5em; padding-left:0; list-style:none}
.prose ul li{padding-left:20px; position:relative; padding-bottom:10px}
.prose ul li::before{
  content:""; position:absolute; left:0; top:10px;
  width:6px; height:1px; background:var(--accent);
}

.callout{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:28px 32px;
  border-left:2px solid var(--accent);
}
.callout .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.callout p{color:var(--cream); font-size:16px; line-height:1.65; font-family:var(--serif); font-weight:300}
.callout p i{font-style:italic}