/* ==========================================================================
   Caveris — public pages
   Palette, typography and signature elements per the Color Style Sheet v3.0
   and the Brand Identity Guide. Shared by index.html and about.html, and
   deliberately identical in system to share.html so the invite, the pages
   and the form read as one object.
   ========================================================================== */

:root{
  --white:#FFFFFF; --linen:#F1E9DC; --rule:#E6E2DA; --sand:#DECFBB;
  --gold:#B8873B; --muted:#8A867C; --charcoal:#3A352F; --pine:#14342A;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --measure:37rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--charcoal);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.5rem}

/* ---------- masthead ---------- */
.masthead{background:var(--pine); padding:2.2rem 0 3rem; margin-bottom:3rem}
.eyebrow{
  font-size:.75rem; font-weight:500; letter-spacing:.06em;
  color:var(--sand); margin:0 0 .8rem;
}
.eyebrow .dia{color:var(--gold); margin-right:.55rem}
h1{
  font-family:var(--serif); font-weight:500; font-size:2.85rem;
  line-height:1.08; letter-spacing:-.01em; color:var(--white); margin:0 0 .55rem;
}
.standfirst{
  font-family:var(--serif); font-size:1.42rem;
  line-height:1.4; color:var(--sand); margin:0;
}
.tagline{
  margin:1.6rem 0 0; padding-top:0; border-top:none;
  font-family:var(--serif); font-size:1.05rem; font-weight:500;
  letter-spacing:.02em; color:var(--gold);
}

/* ---------- brand bar ----------
   PLACEHOLDER WORDMARK. The name set as type, holding the position a drawn
   mark will occupy. Cormorant Garamond 500, tracked open. Swap this block
   for the SVG when the identity lands — nothing else depends on it.
   ------------------------------------------------------------------ */
.brandbar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap; padding:0 0 2.1rem;
}
.wordmark{
  font-family:var(--serif); font-weight:500; font-size:1.6rem; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; color:var(--white);
  margin:0; text-decoration:none; white-space:nowrap;
}
.wordmark:hover{color:var(--white)}
.wordmark .dia{
  color:var(--gold); font-size:.62em; letter-spacing:0;
  margin-right:.5em; vertical-align:.14em;
}

/* ---------- nav ---------- */
nav.top{padding:0}
nav.top ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem}
nav.top a{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); text-decoration:none; padding-bottom:.2rem;
  border-bottom:1px solid transparent;
}
nav.top a:hover{color:var(--white); border-bottom-color:var(--gold)}
nav.top a[aria-current=page]{color:var(--white); border-bottom-color:var(--gold)}

/* ---------- type ---------- */
p{margin:0 0 1.1rem}
.lede{font-size:1.06rem}
h2{
  font-size:1.32rem; font-weight:600; color:var(--charcoal);
  margin:3.4rem 0 .9rem; padding-top:.9rem;
  border-top:2px solid var(--gold); letter-spacing:-.01em;
}
h2 .dia{display:none}
h3.sub{
  font-size:1rem; font-weight:600; color:var(--charcoal); margin:2rem 0 .4rem;
}
a{color:var(--pine); text-decoration:underline; text-decoration-color:var(--sand);
  text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--gold)}
strong{font-weight:600}
.note{font-size:.875rem; color:var(--muted); line-height:1.55}
:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
.masthead :focus-visible{outline-color:var(--sand)}

/* ---------- image plate ----------
   Photographs run untreated: bright, contemporary, observational. No
   grayscale, no duotone, no overlay — Pine and Sand carry the seriousness,
   the photography brings the light.
   ---------------------------------------------------------------- */
figure.plate{margin:2.6rem 0}
figure.plate .frame{overflow:hidden; background:var(--linen); line-height:0}
figure.plate img{display:block; width:100%; height:auto}
figure.plate .frame.r43{aspect-ratio:4/3}
figure.plate .frame.r43 img{height:100%; object-fit:cover; object-position:50% 46%}
figure.plate figcaption{
  margin:.7rem 0 0; font-size:.75rem; line-height:1.5; color:var(--muted);
  padding-left:.9rem; border-left:2px solid var(--sand);
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--serif); font-size:1.6rem; line-height:1.32;
  color:var(--pine); background:none;
  border:none; padding:0; margin:2.6rem 0;
}
.pull p{margin:0}

/* ---------- rule panel (signature) ---------- */
.rulepanel{
  background:var(--white); border-left:4px solid var(--gold);
  padding:1.7rem 1.6rem; margin:0 0 1.4rem;
}
.rulepanel h3{
  font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pine); margin:0 0 .8rem;
}
.rulepanel p:last-child{margin-bottom:0}

/* ---------- the gap ---------- */
.gap{list-style:none; margin:1.4rem 0 1.6rem; padding:0}
.gap li{padding:.95rem 0; border-top:1px solid var(--rule)}
.gap li:last-child{border-bottom:1px solid var(--rule)}
.gap .what{font-weight:600; display:block}
.gap .body{color:var(--muted); font-size:.92rem; line-height:1.6}

/* ---------- the pathway (signature element) ---------- */
.arc{margin:2.4rem 0 0}
.arc-label{
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--gold); margin:0 0 .35rem;
}
.arc-say{font-family:var(--serif); font-size:1.18rem;
  line-height:1.45; color:var(--pine); margin:0 0 1.1rem}

.phase{
  background:var(--linen); border-left:3px solid var(--pine);
  padding:1.25rem 1.4rem; margin:0 0 .85rem;
}
.phase .num{
  font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .3rem;
}
.phase .name{
  font-family:var(--serif); font-weight:500; font-size:1.42rem; line-height:1.2;
  color:var(--charcoal); margin:0 0 .45rem;
}
.phase .able{margin:0 0 1rem; font-size:.95rem}

/* belief shift — the same swap device the submission form uses */
.shift{border-top:1px solid var(--rule); padding-top:.9rem}
.shift-row{display:flex; gap:.8rem; align-items:baseline; margin-bottom:.5rem}
.shift-row:last-child{margin-bottom:0}
.shift-tag{
  flex:0 0 auto; font-size:.6rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:.18rem .45rem; border:1px solid currentColor;
  line-height:1.3; white-space:nowrap;
}
.shift-from{color:var(--muted)}
.shift-to{color:var(--pine)}
.shift-text{font-family:var(--serif); font-size:1.08rem; line-height:1.4}
.shift-row.is-from .shift-text{color:var(--muted)}
.shift-row.is-from .shift-text s{text-decoration-color:var(--gold); text-decoration-thickness:1px}

/* ---------- boundaries list ---------- */
.limits{list-style:none; margin:1.4rem 0 1.5rem; padding:0}
.limits li{position:relative; padding:0 0 .95rem 1.6rem; margin:0}
.limits li::before{
  content:"—"; position:absolute; left:0; top:0; color:var(--gold); font-weight:600;
}
.limits .lead{font-weight:600}

/* ---------- what you get ---------- */
.four{list-style:none; margin:1.3rem 0 1.4rem; padding:0}
.four li{
  padding:.85rem 0; border-top:1px solid var(--rule);
}
.four li:last-child{border-bottom:1px solid var(--rule)}
.four .lead{font-weight:600; display:block}
.four .body{color:var(--muted); font-size:.92rem}

/* ---------- call to action ---------- */
.cta{
  background:var(--pine); padding:2rem 1.7rem; margin:2.6rem 0 0;
}
.cta h3{
  font-family:var(--serif); font-weight:500; font-size:1.7rem; line-height:1.15;
  color:var(--white); margin:0 0 .6rem;
}
.cta p{color:var(--sand); font-size:.95rem; margin:0 0 1.3rem}
.cta p:last-of-type{margin-bottom:0}
.cta a.btn{
  display:inline-block; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  color:var(--pine); background:var(--linen); border:1px solid var(--linen);
  border-radius:2px; padding:.75rem 1.7rem; text-decoration:none;
  transition:background .15s;
}
.cta a.btn:hover{background:var(--white)}
.cta a.btn.ghost{background:transparent; border-color:var(--sand); color:var(--sand); margin-left:.5rem}
.cta a.btn.ghost:hover{background:transparent; border-color:var(--linen); color:var(--linen)}
.cta :focus-visible{outline-color:var(--sand)}

/* ---------- quiet panel ---------- */
.quiet{
  background:var(--linen); border:none;
  padding:1.5rem 1.5rem; margin:1.5rem 0; font-size:.92rem; line-height:1.62;
}
.quiet h3{
  font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pine); margin:0 0 .75rem;
}
.quiet p:last-child{margin-bottom:0}

/* ---------- definition rows ---------- */
.defs{margin:1.3rem 0 1.4rem}
.defs div{padding:.85rem 0; border-top:1px solid var(--rule)}
.defs div:last-child{border-bottom:1px solid var(--rule)}
.defs dt{font-weight:600; margin:0 0 .15rem}
.defs dd{margin:0; color:var(--muted); font-size:.92rem; line-height:1.6}

footer{
  margin:4.5rem 0 0; padding:1.4rem 0 3rem;
  border-top:1px solid var(--sand); font-size:.75rem; color:var(--muted);
}
footer a{color:var(--muted); text-decoration-color:var(--rule)}
footer .links{margin:0 0 .9rem}
footer .links a{margin-right:1.1rem}

@media (max-width:34rem){
  h1{font-size:2.15rem}
  .brandbar{padding-bottom:1.5rem; gap:1rem}
  .wordmark{font-size:1.35rem}
  .masthead{padding:1.6rem 0 2rem; margin-bottom:2.2rem}
  .phase{padding:1.1rem 1.15rem}
  .phase .name{font-size:1.28rem}
  .shift-row{flex-direction:column; gap:.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}