/* ==========================================================================
   PRCTC — Landing / Edition 001
   Visual system: REGOLITH
   Palette + type follow PRCTC_Graphic_Charter.pdf (v1, 17/07/2026)
   ========================================================================== */

:root{
  /* --- Regolith palette --- */
  --onyx:      #212322;   /* Primary 02 — text, statement surfaces */
  --ardoise:   #435564;   /* Primary 01 — signature cool mid-tone */
  --cloud:     #f0efeb;   /* Primary 03 — dominant surface */
  --cream:     #f0eae0;   /* Neutral 01 */
  --luna:      #c4bfb4;   /* Neutral 02 */
  --crater:    #4a4640;   /* Accent 01 */
  --sand:      #c9b897;   /* Accent 02 */
  --graphite:  #53565a;

  --ink:       var(--onyx);
  --ink-soft:  #5c5f5c;
  --line:      rgba(33,35,34,.16);
  --line-soft: rgba(33,35,34,.09);

  /* --- Type --- */
  --display: "Archivo", "Manifold Extended CF", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Roboto Mono", "Söhne Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Rhythm --- */
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(84px, 12vw, 180px);
  --maxw: 1440px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------- reset + base */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cloud);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wordmark{ fill:currentColor; width:100%; height:auto; }

/* --------------------------------------------------------- grain overlay */
/* feTurbulence baked to a data URI — a single fixed layer over the whole page,
   matching the charter's "subtle grain treatment in post" photography rule. */
.grain{
  position:fixed; inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- shared type */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ardoise);
  margin-bottom:clamp(24px,3vw,44px);
}
.eyebrow--light{ color:var(--luna); }

.h-display{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(44px,7.2vw,104px);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.body{
  max-width:56ch;
  color:var(--ink-soft);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.62;
}
.body + .body{ margin-top:1.1em; }

.code{
  font-family:var(--mono);
  font-size:10px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ardoise);
}

/* --------------------------------------------------------- masthead */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:clamp(16px,2vw,26px) var(--gut);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.is-stuck{
  background:rgba(240,239,235,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-soft);
  padding-block:clamp(12px,1.4vw,16px);
}
.masthead__logo{ display:block; width:clamp(88px,9vw,124px); color:var(--onyx); }
.masthead__code{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ardoise);
  margin-left:auto;
}
.masthead__cta{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.masthead__cta:hover{ background:var(--onyx); border-color:var(--onyx); color:var(--cloud); }
@media (max-width:640px){ .masthead__code{ display:none; } .masthead__cta{ margin-left:auto; } }

/* --------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(120px,16vh,180px) 0 clamp(72px,10vh,110px);
  isolation:isolate;
  overflow:hidden;
}
.hero__terrain{ position:absolute; inset:0; z-index:-1; }
.hero__terrain .dunes{ position:absolute; inset:0; width:100%; height:100%; }
.hero__plate{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
/* Scrim: pulls the plate back towards Cloud so the type keeps its contrast and the
   page still reads 70% Cloud, and dissolves the bottom edge into the next section. */
.hero__terrain::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(240,239,235,.72) 0%,
      rgba(240,239,235,.62) 22%,
      rgba(240,239,235,.58) 46%,
      rgba(240,239,235,.34) 66%,
      rgba(240,239,235,.30) 84%,
      rgba(240,239,235,.80) 95%,
      var(--cloud) 100%);
}
.ridge{ transform-origin:50% 100%; }

.hero__inner{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* Onyx, not Ardoise, for everything sitting directly on the plate: measured over
   the dune the Ardoise/soft-grey inks fall to 2.4:1, well under the 4.5:1 floor. */
.hero__over{
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--onyx);
  margin-bottom:clamp(26px,4vh,46px);
}
.hero__over .rule{ width:clamp(28px,6vw,64px); height:1px; background:currentColor; opacity:.45; }

.hero__mark{
  width:min(76vw,880px);
  color:var(--onyx);
  margin:0 0 clamp(26px,4vh,44px);
}
.wordmark--hero{ width:100%; }

.hero__lede{
  max-width:52ch;
  font-size:clamp(15px,1.28vw,19px);
  line-height:1.6;
  color:var(--onyx);
  margin-bottom:clamp(32px,5vh,52px);
  text-wrap:balance;
}
/* lives inside the form panel, where it has a clean background to sit on */
.hero__note{
  margin-top:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ardoise);
}

/* corner system codes — charter: overlays at corners, never centered */
.hero__codes{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero__codes .code{ position:absolute; opacity:.7; white-space:nowrap; }
.code--tl{ top:calc(clamp(16px,2vw,26px) + 58px); left:var(--gut); }
.code--tr{ top:calc(clamp(16px,2vw,26px) + 58px); right:var(--gut); }
.code--bl{ bottom:clamp(20px,3vh,34px); left:var(--gut); }
.code--br{ bottom:clamp(20px,3vh,34px); right:var(--gut); }
@media (max-width:900px){ .code--bl,.code--tr{ display:none; } }

.scroll-cue{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:40px; height:clamp(40px,7vh,72px);
  display:flex; justify-content:center;
}
.scroll-cue__line{
  width:1px; height:100%; background:linear-gradient(to bottom,transparent,var(--ardoise));
  opacity:.5; transform-origin:top;
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:.55} 100%{transform:scaleY(1);opacity:0} }

/* --------------------------------------------------------- signup */
.signup{ width:100%; }
.signup--hero{
  max-width:840px;
  padding:clamp(20px,2.4vw,30px);
  border:1px solid rgba(33,35,34,.14);
  background:rgba(248,247,243,.62);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  text-align:left;
}
.signup__row{ display:grid; grid-template-columns:1fr 1fr auto; gap:clamp(14px,1.6vw,22px); align-items:end; }
@media (max-width:760px){ .signup__row{ grid-template-columns:1fr; align-items:stretch; } }

.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ardoise);
}
.field__opt{ opacity:.55; }
.field input, .field select{
  width:100%;
  padding:11px 0 10px;
  background:transparent;
  border:0; border-bottom:1px solid rgba(33,35,34,.28);
  border-radius:0;
  font-size:16px; letter-spacing:-.005em;
  transition:border-color .3s var(--ease);
  appearance:none;
}
.field select{ cursor:pointer; }
.field input::placeholder{ color:rgba(33,35,34,.32); }
.field input:focus, .field select:focus{ outline:none; border-bottom-color:var(--onyx); }
.field input:focus-visible, .field select:focus-visible{ outline:2px solid var(--ardoise); outline-offset:4px; }
.field.is-error input{ border-bottom-color:#8c3a2b; }

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px clamp(24px,2.6vw,38px);
  background:var(--onyx); color:var(--cloud);
  border:1px solid var(--onyx); border-radius:0;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; overflow:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn::after{
  content:""; position:absolute; inset:0; background:var(--ardoise);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.btn:hover::after{ transform:scaleY(1); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--wide{ width:100%; margin-top:8px; }

.consent{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:clamp(16px,2vw,22px);
  font-size:12.5px; line-height:1.45; color:var(--ink-soft);
  cursor:pointer;
}
.consent input{
  flex:none; width:15px; height:15px; margin-top:2px;
  accent-color:var(--onyx); cursor:pointer;
}
.consent.is-error span{ color:#8c3a2b; }

/* No reserved height: an empty status must not open a hole under the button. */
.signup__status{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ardoise);
}
.signup__status:not(:empty){ margin-top:14px; }
.signup__status:empty{ display:none; }   /* also drops its row in the grid layout */
.signup__status.is-error{ color:#8c3a2b; }
.signup.is-done .signup__status{ color:var(--onyx); }

/* --------------------------------------------------------- manifesto */
.manifesto{ padding-block:var(--sec); }
.manifesto__lines{ margin-bottom:clamp(40px,6vw,72px); }
.statement{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(28px,5.2vw,76px);
  line-height:1.04;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.statement--indent{ margin-left:clamp(0px,6vw,120px); }
.statement--indent2{ margin-left:clamp(0px,12vw,240px); }
@media (max-width:700px){ .statement--indent,.statement--indent2{ margin-left:0; } }
.manifesto__body{
  max-width:62ch; margin-left:auto;
  color:var(--ink-soft);
  font-size:clamp(15px,1.15vw,18px); line-height:1.62;
  padding-top:clamp(20px,3vw,32px);
  border-top:1px solid var(--line-soft);
}

/* --------------------------------------------------------- regolith */
.regolith{ background:var(--cream); padding-block:var(--sec); }
.regolith__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,96px); align-items:center;
}
@media (max-width:900px){ .regolith__grid{ grid-template-columns:1fr; } }
.regolith__text .h-display{ margin-bottom:clamp(24px,3vw,36px); }

.registers{
  margin-top:clamp(30px,4vw,46px);
  border-top:1px solid var(--line-soft);
}
.registers li{
  display:flex; gap:18px; align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase;
}
.registers__n{ color:var(--ardoise); opacity:.7; }

.regolith__plate{ margin:0; }
.regolith__plate img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.regolith__plate figcaption{
  margin-top:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ardoise); opacity:.75;
}

/* --------------------------------------------------------- values */
.values{ padding-block:var(--sec); }
.values__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3vw,48px);
  border-top:1px solid var(--line);
  padding-top:clamp(28px,3vw,44px);
}
@media (max-width:980px){ .values__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values__grid{ grid-template-columns:1fr; } }
.value h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 120,"wght" 700;
  font-size:clamp(19px,1.8vw,26px);
  text-transform:uppercase; letter-spacing:-.005em;
  margin-bottom:14px;
}
.value p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* --------------------------------------------------------- terrain band */
.band{ position:relative; margin:0; line-height:0; }
.band img{
  width:100%; height:clamp(220px,34vh,420px);
  object-fit:cover; object-position:50% 50%;
}
.band__code{
  position:absolute; right:var(--gut); bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cloud);
  line-height:1;
  /* the plate runs from dark rock to bright sand, so the code needs a shadow that
     holds wherever the crop lands at a given viewport width */
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75);
}

/* --------------------------------------------------------- spec (statement / onyx) */
.spec{
  background:var(--onyx); color:var(--cloud);
  padding-block:var(--sec);
}
.spec__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(52px,11vw,168px);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
  margin-bottom:clamp(40px,6vw,80px);
}
.spec__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,40px);
  border-top:1px solid rgba(240,239,235,.18);
  padding-top:clamp(24px,3vw,36px);
}
@media (max-width:760px){ .spec__grid{ grid-template-columns:repeat(2,1fr); } }
.spec__grid dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--luna); margin-bottom:10px;
}
.spec__grid dd{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 600;
  font-size:clamp(17px,1.6vw,23px); text-transform:uppercase;
}
.spec__note{
  margin-top:clamp(32px,4vw,52px);
  max-width:46ch;
  color:var(--luna); font-size:14.5px; line-height:1.6;
}

/* --------------------------------------------------------- register */
.register{ background:var(--cream); padding-block:var(--sec); }
.register__wrap{ max-width:760px; text-align:center; }
.star{
  width:clamp(30px,3.4vw,44px); height:auto;
  fill:var(--onyx); margin:0 auto clamp(24px,3vw,36px);
}
.register__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(34px,5.6vw,78px);
  line-height:.98; letter-spacing:-.015em; text-transform:uppercase;
  margin-bottom:clamp(18px,2vw,26px);
}
.register__lede{
  max-width:48ch; margin:0 auto clamp(34px,4.5vw,52px);
  color:var(--ink-soft); font-size:clamp(15px,1.15vw,17px); line-height:1.6;
  text-wrap:balance;
}
.signup--main{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,28px);
  text-align:left;
}
.signup--main .consent,
.signup--main .btn,
.signup--main .signup__status{ grid-column:1/-1; }
@media (max-width:620px){ .signup--main{ grid-template-columns:1fr; } }

.register__points{
  margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft);
  text-align:left;
}
.register__points li{
  display:flex; gap:16px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.register__points span{ color:var(--ardoise); opacity:.7; }

/* --------------------------------------------------------- footer */
.footer{ background:var(--onyx); color:var(--cloud); padding-block:clamp(48px,7vw,88px); }
.footer__wrap{ display:flex; flex-direction:column; gap:clamp(28px,4vw,44px); }
.wordmark--footer{ width:clamp(150px,20vw,260px); }
.footer__nav{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,36px);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.footer__nav a{ opacity:.72; transition:opacity .3s var(--ease); }
.footer__nav a:hover{ opacity:1; }
.footer__meta{
  display:flex; flex-wrap:wrap; gap:clamp(14px,3vw,32px);
  padding-top:clamp(20px,2.5vw,30px);
  border-top:1px solid rgba(240,239,235,.16);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--luna);
}

/* --------------------------------------------------------- reveal */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .scroll-cue__line{ animation:none; opacity:.4; }
}