/* ============================================================
PETINUUM — base.css · THE RULE BOOK
Pages write <h1>…<h6>, .brow, .pair, .region, .cities — never a
font name, never a style. This file decides what each one is.
Change a number here, every page moves. One source of truth.
============================================================ */

:root{
--ink:#070f1c; --navy:#0d1b34; --navy-2:#11233f; --navy-3:#16335a;
--bone:#e7dcc4; /* Cinzel H1 + region header H2 */
--white:#f4f1ea; /* Cormorant SC descriptor H4 */
--gold:#c5a24e; /* Poiret H5/H6, chapter H2, brow, links */
--gold-bright:#dcc079;
--gold-ghost:rgba(206, 168, 80, 0.16);
--lede:rgba(244,241,234,.62);

--display:'Cinzel',serif;
--serif:'Cormorant SC',serif;
--accent:'Poiret One',sans-serif;
--body:'Fauna One',serif;

/* THE LADDER — fixed, evenly stepped 8 -> 50 */
--t-h1:3.125rem; /* 50 */
--t-h2:2.625rem; /* 42 */
--t-h3:2.0625rem; /* 33 */
--t-h4:1.5rem; /* 24 */
--t-h5:1rem; /* 16 */
--t-h6:.5rem; /* 8 */
--t-brow:.72rem; /* eyebrow ~11.5 */
--t-body:.875rem; /* 14 */

--maxw:1040px; --gap:1.5rem;
--space-section:clamp(3rem,7vw,5.5rem);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
img{max-width:100%;height:auto;display:block;}

/* GROUND + BREATHING LIGHT-ROOM (automatic on every page) */
body{
font-family:var(--body); font-size:var(--t-body); line-height:1.7;
color:var(--white); position:relative; overflow-x:hidden;
background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 34%,var(--ink) 100%);
}
body::before{
content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none;
background:
radial-gradient(62vw 52vh at 50% 10%, rgba(96,150,215,.34), transparent 66%),
radial-gradient(46vw 80vh at 0% 42%, rgba(70,120,185,.20), transparent 72%),
radial-gradient(46vw 80vh at 100% 42%, rgba(70,120,185,.20), transparent 72%);
animation:breathe 13s ease-in-out infinite alternate;
}
@keyframes breathe{
0%{opacity:.5; transform:scale(1) translateY(0);}
100%{opacity:1; transform:scale(1.14) translateY(-1.5%);}
}
body::after{
  content:""; position:fixed; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%); background:var(--gold-ghost);
  z-index:1; pointer-events:none;
}
@media(prefers-reduced-motion:reduce){ body::before{animation:none;opacity:.8;} }

/* ============================================================
   THE THREAD — three styles, chosen site-wide by body class.
   .thread-center / .thread-fade / .thread-scroll
============================================================ */

/* CENTER — vertical gold line down the middle, with nodes */
body.thread-center::after{
content:""; position:fixed; top:0; bottom:0; left:50%; width:1px;
transform:translateX(-50%); background:var(--gold-ghost);
z-index:1; pointer-events:none;
}

/* FADE — left-side line that fades top-to-bottom */
body.thread-fade::after{
content:""; position:fixed; top:0; bottom:0; left:2.25rem; width:1px;
background:linear-gradient(180deg,var(--gold) 0%,var(--gold-ghost) 55%,transparent 100%);
z-index:1; pointer-events:none;
}

/* SCROLL — left-side line that draws in as the page scrolls */
body.thread-scroll::after{
content:""; position:fixed; top:0; left:2.25rem; width:1px;
height:var(--thread-h,0%);
background:linear-gradient(180deg,var(--gold) 0%,var(--gold-ghost) 100%);
z-index:1; pointer-events:none; transition:height .1s linear;
}

.node{position:relative;z-index:2;width:7px;height:7px;margin:var(--space-section) auto;
border:1px solid rgba(203, 164, 73, 0.4);background:transparent;}

/* THE SIX VOICES */
h1,.h1{font-family:var(--display);font-weight:600;color:var(--bone);
font-size:var(--t-h1);letter-spacing:.05em;line-height:1.06;}
h2,.h2{font-family:var(--display);font-weight:500;color:var(--gold);
font-size:var(--t-h2);letter-spacing:.05em;line-height:1.1;}
h3,.h3{font-family:var(--serif);font-weight:600;color:var(--bone);
font-size:var(--t-h3);letter-spacing:.03em;line-height:1.14;}
h4,.h4{font-family:var(--serif);font-weight:500;color:var(--white);
font-size:var(--t-h4);letter-spacing:.04em;line-height:1.25;}
h5,.h5{font-family:var(--accent);font-weight:400;color:var(--gold);
font-size:var(--t-h5);letter-spacing:.24em;text-transform:uppercase;}
h6,.h6{font-family:var(--accent);font-weight:400;color:var(--gold);
font-size:var(--t-h6);letter-spacing:.36em;text-transform:uppercase;}

/* the brow — every region & city carries one */
.brow{display:block;font-family:var(--accent);font-weight:400;color:var(--gold);
font-size:var(--t-brow);letter-spacing:.34em;text-transform:uppercase;}

.lede{font-family:var(--body);color:var(--lede);font-size:var(--t-body);
max-width:46ch;margin-inline:auto;line-height:1.75;}
p,li{font-family:var(--body);font-size:var(--t-body);}

/* LINKS, CITIES */
a{color:var(--gold);text-decoration:none;transition:color .25s ease;}
a:hover{color:var(--bone);}
.cities{font-family:var(--body);font-size:var(--t-body);max-width:32ch;
margin-inline:auto;line-height:1.85;}
.cities a{color:var(--gold);}
.cities a:hover{color:var(--bone);}
.cities .sep{color:var(--gold-ghost);margin:0 .35rem;}

/* LAYOUT PRIMITIVES */
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
padding:var(--space-section) var(--gap) 0;}
.stack{display:flex;flex-direction:column;align-items:center;text-align:center;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,8vw,6rem);}
.region{display:flex;flex-direction:column;align-items:center;text-align:center;}
.center{text-align:center;}
.region > * + *{margin-top:.85rem;}
.region .cities{margin-top:1.35rem;}
.stack > * + *{margin-top:.85rem;}

/* SITE CHROME */
.site-header{position:relative;z-index:3;background:rgba(7,15,28,.82);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-bottom:1px solid var(--gold-ghost);}
.site-header__inner,.site-footer__inner{max-width:var(--maxw);margin-inline:auto;
padding:1.05rem var(--gap);display:flex;align-items:center;justify-content:space-between;
gap:1.5rem;flex-wrap:wrap;}
.brand{font-family:var(--display);font-weight:600;color:var(--bone);
font-size:1.4rem;letter-spacing:.18em;text-transform:uppercase;}
.brand:hover{color:var(--bone);}
.site-nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap;}
.site-nav a{font-family:var(--accent);font-size:var(--t-brow);letter-spacing:.2em;
text-transform:uppercase;color:var(--lede);}
.site-nav a:hover{color:var(--gold);}

/* FOOTER — expanded, with breathing room + social row */
.site-footer{position:relative;z-index:3;background:var(--ink);
border-top:1px solid var(--gold-ghost);color:var(--lede);
margin-top:var(--space-section);}
.site-footer__inner{flex-direction:column;align-items:center;gap:1.4rem;
padding-top:3rem;padding-bottom:3rem;}
.footer-social{display:flex;gap:1.6rem;align-items:center;}
.footer-social a{font-family:var(--accent);font-size:var(--t-brow);
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.footer-social a:hover{color:var(--bone);}
.footer-nav{display:flex;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap;justify-content:center;}
.footer-nav a{font-family:var(--accent);font-size:var(--t-brow);
letter-spacing:.2em;text-transform:uppercase;color:var(--lede);}
.footer-nav a:hover{color:var(--gold);}
.footer-mark{font-family:var(--body);font-size:var(--t-brow);
letter-spacing:.08em;color:var(--lede);text-align:center;}

@media(max-width:820px){
.pair{grid-template-columns:1fr;gap:3.25rem;}
:root{--t-h1:2.5rem;--t-h2:2.05rem;--t-h3:1.7rem;}
}
/* === CARDS / PILLARS — canonical, the one card === */
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:3rem;}
.pillars-grid{max-width:1200px;margin-left:auto;margin-right:auto;}
.pillars-grid--2{grid-template-columns:repeat(2,1fr);gap:2.5rem;max-width:900px;}
.pillars-grid--3{grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1100px;}
.pillars-grid--4{grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1200px;}
.pillar-card{background:rgba(76, 48, 15, 0.5);border:1px solid rgba(245,240,232,0.2);padding:2.5rem 2rem;transition:all 0.3s ease;}
.pillar-card:hover{border-color:rgba(245,240,232,0.5);background:rgba(90, 56, 18, 0.65);transform:translateY(-4px);}
.pillar-number{font-family:'Cinzel',serif;font-weight:500;font-size:1.4rem;color:rgba(245,240,232,0.65);letter-spacing:0.15em;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid rgba(245,240,232,0.18);}
.pillar-name{font-family:'Cinzel',serif;font-weight:600;font-size:1.5rem;color:#f5f0e8;letter-spacing:0.06em;margin-bottom:1rem;}
.pillar-body{font-size:1.02rem;line-height:1.75;color:rgba(245,240,232,0.92);}
@media(max-width:900px){.pillars-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.pillars-grid{grid-template-columns:1fr;}}
/* === BOX HIGHLIGHT — the framed statement === */
.principles-standard{max-width:820px;margin:0 auto 4rem;padding:2.5rem 3rem;background:rgba(90, 57, 19, 0.65);border:1px solid rgba(245,240,232,0.3);text-align:center;position:relative;}
.principles-standard::before,.principles-standard::after{content:'';position:absolute;left:3rem;right:3rem;height:2px;background:linear-gradient(to right,transparent,rgba(245,240,232,0.7),transparent);}
.principles-standard::before{top:-1px;}
.principles-standard::after{bottom:-1px;}
.standard-label{font-family:'Cormorant SC',serif;font-weight:500;letter-spacing:0.08em;color:#f5f0e8;display:block;margin-bottom:1.5rem;text-transform:uppercase;}
.standard-text{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.55;letter-spacing:0.03em;color:#f5f0e8;display:block;}
/* === PAGE BACKGROUND — ochre lighting, drifts on scroll === */
body.bg-ochre{font-family:'Cormorant SC',serif;background-image:linear-gradient(160deg,#2a1a08 0%,#3d2810 18%,#5c3d18 36%,#7a5220 54%,#9a6b28 70%,#b88838 84%,#c4a050 94%,#d4b870 100%);background-repeat:no-repeat;background-size:100% 150%;background-position-x:0;background-position-y:calc(var(--bgshift,0) * 1px);color:#f5f0e8;min-height:100vh;overflow-x:hidden;}
@media(prefers-reduced-motion:reduce){body.bg-ochre{background-attachment:fixed;background-size:100% 100%;background-position-y:0;}}