/* ==========================================================================
   CONTINENTAL INSTITUTE
   Nothing here is inherited. The verbs are the brand's own.

   The guideline's hardest law is "one typeface, hierarchy by weight only."
   Manrope ships variable (wght 200..800), so weight is not just the type
   scale — it is the motion system. Text arrives thin and settles heavy as
   it is read. No other brand in this family can do this: Capital Moreno's
   identity is serif-against-sans, and Instrument Serif has no weight axis.

   Rules are arcs, struck from the emblem's own circular geometry, never
   straight hairlines. Green is treated as material with depth rather than
   a flat ground.
   ========================================================================== */

:root{
  --green:#023C14;          /* canon */
  --paper:#E9E7E4;          /* canon */
  --black:#000000;          /* canon — one appearance, at the gate */
  /* foreground and ground travel together; nothing below may hard-reference
     --paper or --green for text, or it goes invisible when the ground turns */
  --fg:var(--paper);
  --ground-bg:var(--green);
  --ink-1:rgba(233,231,228,.74);
  --ink-2:rgba(233,231,228,.70);   /* was .40 — 2.88:1, failed AA on 11-14px */
  --ink-3:rgba(233,231,228,.52);   /* was .22 — unreadable at label sizes */
  --hair:rgba(233,231,228,.16);
  --hair-2:rgba(233,231,228,.30);
  --gut:clamp(1.5rem,5vw,4.5rem);
  --measure:34rem;
}
/* ---- the three acts ------------------------------------------------------
   Green asserts. Cream evidences. Black excludes, once, at the gate.
   Each ground carries its own ink so a section inverts as a whole unit. */
.on-cream{
  --ground-bg:var(--paper); --fg:var(--green);
  --ink-1:rgba(2,60,20,.80); --ink-2:rgba(2,60,20,.74); --ink-3:rgba(2,60,20,.56);
  --hair:rgba(2,60,20,.15); --hair-2:rgba(2,60,20,.32);
  background:var(--paper); color:var(--green);
}
.on-cream{--fg:#023C14; --ground-bg:#E9E7E4}
.on-black{
  --ground-bg:var(--black); --fg:var(--paper);
  --ink-1:rgba(233,231,228,.74); --ink-2:rgba(233,231,228,.70); --ink-3:rgba(233,231,228,.52);
  --hair:rgba(233,231,228,.16); --hair-2:rgba(233,231,228,.30);
  background:var(--black); color:var(--paper);
}
.on-black{--fg:#E9E7E4; --ground-bg:#000000}
.on-cream .lockup,.on-cream .mark{color:var(--fg)}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--green);color:var(--paper);overflow-x:clip}
body{background:var(--green);color:var(--paper);min-height:100svh;overflow-x:clip;
  font-family:Manrope,ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:17px;
  line-height:1.60;-webkit-font-smoothing:antialiased;
  transition:background-color .5s ease,color .5s ease}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
img{max-width:100%;display:block}
::selection{background:var(--fg);color:var(--ground-bg)}


/* ---- header ------------------------------------------------------------- */
.bar{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;width:100%;max-width:100vw;overflow:hidden;
  padding:1.4rem var(--gut);
  background:color-mix(in srgb,var(--green) 72%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lockup{display:block;width:clamp(112px,13vw,168px);height:clamp(19px,2.2vw,28px);background:currentColor;
  -webkit-mask:url(logos/lockup.svg) no-repeat left center/contain;
  mask:url(logos/lockup.svg) no-repeat left center/contain}
.bar nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2rem)}
.bar nav a,.bar nav button{font-size:11px;font-weight:600;letter-spacing:.12em;
  word-spacing:.14em;text-transform:uppercase;color:var(--ink-1);cursor:pointer;
  transition:color .3s;white-space:nowrap}
.bar nav a:hover,.bar nav button:hover{color:var(--fg)}
/* the one action in the bar, and it must read as an action */
.bar nav a.cta{color:var(--ground-bg);background:var(--fg);border:0;
  padding:.72rem 1.15rem;border-bottom:0;transition:opacity .3s}
.bar nav a.cta:hover{opacity:.84;color:var(--ground-bg)}
.on-cream-bar .bar nav a.cta{color:var(--paper);background:var(--green)}

/* ---- type --------------------------------------------------------------- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;color:var(--ink-1)}
/* Large + light reads institutional. Large + heavy reads like a product
   launch. The guideline mandates Manrope; it does not mandate ExtraBold. */
.claim{font-weight:700;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(34px,6.1vw,78px)}
.motion .claim .lo.w.set{--w:500}
h2.head{font-weight:700;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(28px,3.9vw,52px)}
h3{font-weight:700;letter-spacing:-.010em;font-size:clamp(22px,1.9vw,26px);line-height:1.15}
p{color:var(--ink-1);max-width:var(--measure);text-wrap:pretty}
p b,p strong{color:var(--fg);font-weight:700}
.head b,.claim b{font-weight:700;color:var(--fg)}
.head i,.claim i{font-style:normal}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.50;color:var(--ink-1);font-weight:400;
  letter-spacing:-.005em;max-width:40rem}

/* ---- sections ----------------------------------------------------------- */
section{padding:clamp(6.5rem,13vh,10rem) var(--gut);position:relative}
/* three steps, not one. Uniform padding on every section is what makes a page
   read as generated rather than composed. */
.deep{padding-block:clamp(8rem,17vh,14rem)}
.quote{padding-block:clamp(11rem,24vh,19rem)}
section:last-of-type{padding-block:clamp(9rem,20vh,16rem)}
.inner{max-width:72rem;margin:0 auto}

/* the opening: the constraint, nothing else */
.sig{margin-top:clamp(2.8rem,6vw,4.2rem);display:flex;gap:clamp(1.4rem,3.4vw,3rem);
  flex-wrap:wrap;font-size:11px;font-weight:600;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;color:var(--ink-1)}
.sig span{position:relative}
.sig span + span::before{content:"";position:absolute;left:calc(-1 * clamp(.7rem,1.7vw,1.5rem));
  top:.42em;width:1px;height:.7em;background:var(--hair-2)}

/* ---- the ledger: a term, its standard, ruled by arcs -------------------- */
.ledger{margin-top:clamp(2.6rem,6vw,4rem);border-top:1px solid var(--hair)}
.item{display:grid;grid-template-columns:3.5rem 11rem 1fr;gap:clamp(1rem,3vw,2.4rem);
  align-items:baseline;padding:clamp(1.5rem,3vw,2.1rem) 0;border-bottom:1px solid var(--hair);
  transition:background .45s,padding-left .45s}
.item:hover{background:color-mix(in srgb,var(--paper) 4%,transparent);padding-left:.9rem}
.item .n{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-1);
  font-variant-numeric:tabular-nums}
.item p{margin:0;font-size:17px;max-width:46ch}

/* ---- the tracks: two equal fields, neither containing the other -------- */
.tracks{margin-top:clamp(2.6rem,6vw,4rem);display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-2);
  border:1px solid var(--hair-2)}
.track{background:var(--green);padding:clamp(1.8rem,4vw,2.8rem);
  display:flex;flex-direction:column;gap:1rem;min-height:clamp(210px,26vh,280px)}
.on-cream .track{background:var(--ground-bg)}
.track .band{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.track .tag{font-size:11px;font-weight:600;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;color:var(--ink-1)}
.track p{margin:0}

/* the single bordered field kept for Occidental, which is one thing not two */
.nest{margin-top:clamp(2.6rem,6vw,4rem);border:1px solid var(--hair-2);
  padding:clamp(1.6rem,4vw,3rem)}
.nest > .band{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.nest .tag{font-size:11px;font-weight:600;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;color:var(--ink-1)}
.nest p{margin-top:.9rem}

/* ---- the quotation ------------------------------------------------------ */
.quote{text-align:center}
.quote blockquote{font-weight:300;font-size:clamp(24px,2.55vw,34px);line-height:1.28;
  letter-spacing:-.016em;margin:0 auto;color:var(--fg)}
.quote cite{display:block;margin-top:2.4rem;font-style:normal;font-size:11px;
  font-weight:600;letter-spacing:.12em;word-spacing:.14em;text-transform:uppercase;color:var(--ink-1)}

/* ---- the register (form) ------------------------------------------------ */
.reg{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(2.4rem,5vw,3.4rem);
  border:1px solid var(--hair-2)}
.f{padding:clamp(1.1rem,2.4vw,1.5rem);border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);transition:background .3s}
.f:nth-child(2n){border-right:0}
.f.wide{grid-column:1/-1;border-right:0}
.f:focus-within{background:color-mix(in srgb,var(--paper) 5%,transparent)}
.f label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  word-spacing:.14em;text-transform:uppercase;color:var(--ink-1);margin-bottom:.6rem}
.f input,.f textarea{width:100%;font:inherit;font-size:17px;color:var(--fg);
  background:none;border:0;padding:.45rem 0}
.f input:focus,.f textarea:focus{outline:0}
.f textarea{resize:vertical;min-height:6rem;line-height:1.55}
.act{grid-column:1/-1;padding:clamp(1.2rem,2.6vw,1.6rem);display:flex;
  align-items:center;gap:1.4rem;flex-wrap:wrap}
.act button{font-weight:600;font-size:11px;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;cursor:pointer;color:var(--ground-bg);background:var(--fg);
  padding:1rem 2.1rem;transition:opacity .3s}
.act button:hover{opacity:.85}
.act button:disabled{opacity:.45;cursor:default}
.status{font-size:14px;color:var(--ink-2);margin:0}
.status[data-s="err"]{color:#E4A79A}
.fine{margin-top:1.1rem;font-size:14px;color:var(--ink-2);max-width:54ch}

/* ---- footer ------------------------------------------------------------- */
.foot{padding:clamp(4rem,8vw,6rem) var(--gut) clamp(2rem,4vw,3rem);border-top:1px solid var(--hair)}
.foot-in{max-width:72rem;margin:0 auto;display:grid;
  grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.foot h4{font-size:11px;font-weight:600;letter-spacing:.12em;word-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.1rem}
.foot a,.foot .t{display:block;font-size:14px;color:var(--ink-1);margin-bottom:.55rem;
  transition:color .3s;overflow-wrap:anywhere}
.foot a:hover{color:var(--fg)}
.foot .mark{display:block;width:clamp(150px,17vw,190px);height:clamp(26px,3vw,32px);background:currentColor;
  margin-bottom:1.3rem;
  -webkit-mask:url(logos/lockup.svg) no-repeat left center/contain;
  mask:url(logos/lockup.svg) no-repeat left center/contain}
.legal{max-width:72rem;margin:clamp(3rem,6vw,4.5rem) auto 0;padding-top:1.5rem;
  border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;font-size:11px;font-weight:600;letter-spacing:.12em;
  word-spacing:.14em;text-transform:uppercase;color:var(--ink-1)}

@media(max-width:760px){
  /* authored breaks are set for the desktop measure; under it, let the
     browser wrap rather than overflow, and drop the sizes so it rags well */
  .rise > i{white-space:normal}
  .claim{font-size:clamp(30px,8.4vw,40px);line-height:1.08}
  h2.head{font-size:clamp(25px,6.6vw,32px);line-height:1.12}
  .claim,h2.head,blockquote{width:auto}
}
@media(max-width:860px){
  .item{grid-template-columns:2.6rem 1fr;gap:.4rem 1.1rem}
  .item p{grid-column:2}
  .reg{grid-template-columns:1fr}
  .f{border-right:0}
  .foot-in{grid-template-columns:1fr}
  .tracks{grid-template-columns:1fr}
}
@media (hover:none) and (pointer:coarse){
  /* every interactive target clears 44px on a thumb */
  .foot a{padding:.78rem 0}
  .bar nav a,.bar nav button{padding:.85rem 0}
  .bar > a{padding:.75rem 0}
  .bar nav a.cta{padding:.85rem 0}
  .act button{padding:1.2rem 2.2rem}
  .f input{padding:.85rem 0}
  .f textarea{padding:.6rem 0}
  .sig span{padding:.2rem 0}
  a[href^="https://occidental"]{display:inline-block;padding:.6rem 0}
}

/* ==========================================================================
   SCROLL SYSTEM — Continental's own verbs, all driven by scroll position.

   1. WEIGHT SCRUB   the claim's wght axis tracks scroll 200 -> 800. The
                     sentence physically thickens under the reader. This is
                     the brand law turned into a scroll mechanic.
   2. ARC DRAW       the emblem's arc strokes itself in as it is passed.
   3. NEST           Principal is drawn further inside Craftsmen as you scroll.
   4. DEPTH          the ground shifts between the three greens continuously.
   ========================================================================== */

.beat{position:relative}
.stick{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--gut) + 3rem) var(--gut) var(--gut)}
.beat-tall{height:230svh}

/* 1 — the scrubbed claim */

/* 2 — the arc, drawn */


/* progress hairline — the one purely functional effect
.prog{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair-2);
  transform:scaleX(var(--p,0));transform-origin:0 50%}

@media (prefers-reduced-motion:reduce){
  .beat-tall,  .stick{position:static;min-height:0;padding:clamp(6rem,12vh,9rem) var(--gut)}
    .prog{display:none}
}

/* ==========================================================================
   MOTION — three pinned mechanics. No fading type, no inflating type.
   ========================================================================== */

/* A. MASKED LINE RISE — lines travel up from behind a hard edge.
      A cut, not a fade. Each line is its own mask. */
/* the mask must clear the descenders it would otherwise guillotine —
   measured 7.9px of ink lost at 52px and 12.5px at the hero size */
.rise{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
/* The authored break IS the rendered break. Without nowrap a too-long line
   re-wraps silently inside its own mask and the mechanic breaks invisibly. */
.rise > i{white-space:nowrap}
.claim,h2.head,blockquote{width:max-content;max-width:100%}
.rise > i{display:block;font-style:inherit}
/* the start-state is only claimed when the browser can resolve it — .anim is
   set in the document head, so with JS off nothing is ever left under a mask */
.anim .rise > i{transform:translateY(110%);
  transition:transform .90s cubic-bezier(.16,.84,.28,1);will-change:transform}
.anim .rise.in > i{transform:none}
.anim .rise:nth-of-type(2) > i{transition-delay:.14s}
.anim .rise:nth-of-type(3) > i{transition-delay:.28s}
.anim .rise:nth-of-type(4) > i{transition-delay:.42s}

/* C. PINNED EMBLEM — the mark scales up through the viewport while pinned,
      and the statement is read through it. */
.pin-mark{height:160svh;position:relative}
.pin-mark .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  overflow:clip;padding:0 var(--gut)}
.pin-mark .glyph{position:absolute;width:min(72vh,78vw);aspect-ratio:1;
  background:currentColor;opacity:.06;
  -webkit-mask:url(logos/emblem.svg) no-repeat center/contain;
  mask:url(logos/emblem.svg) no-repeat center/contain}
/* wide enough for the longest authored line (809px at 52px) — .pin clips
   horizontally for the glyph, so anything narrower guillotines the sentence */
.pin-mark .say{position:relative;max-width:min(58rem,92vw);text-align:center}

@media (prefers-reduced-motion:reduce){
  .anim .rise > i{transform:none!important;transition:none}
          .pin-mark .glyph{transform:scale(.8)!important;opacity:.05!important}
}
@media(max-width:760px){
  /* authored breaks are set for the desktop measure; under it, let the
     browser wrap rather than overflow, and drop the sizes so it rags well */
  .rise > i{white-space:normal}
  .claim{font-size:clamp(30px,8.4vw,40px);line-height:1.08}
  h2.head{font-size:clamp(25px,6.6vw,32px);line-height:1.12}
  .claim,h2.head,blockquote{width:auto}
}
@media(max-width:860px){
    }


/* Greek terms are set in the one italic Manrope gives us — a tilt, not a
   second family. They are the page's only foreign words and should read as
   terms of art, not emphasis. */
/* Manrope ships upright only. font-style:italic made the browser SHEAR the
   outlines into a synthetic oblique — worse than a second family, because it
   degrades the one typeface we have. Weight and colour carry the term instead. */
.lead i,p i,.item p i{font-style:normal;font-weight:600;color:var(--fg)}


/* ---- the gate: one screen, one sentence, the only black on the page ----- */
.gate{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:0 var(--gut)}
.gate h2{font-weight:700;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(28px,3.9vw,52px);max-width:none}


/* the hero is a composition, not a scroll stage — the sticky bought 1.04
   screens in which nothing changed, at the first thing a reader touches */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--gut) + 5rem) var(--gut) var(--gut)}
/* the ground arrives before the content does */
.act-open{padding-top:clamp(9rem,26vh,17rem)}