/* ============================================================
   ANTHOLOGY GROUP — PAGE SHELL (subpages)
   Mirrors the fixed-view landing page chrome: HUD bars, rails,
   viewframe, grain, micro-labels. One scrollable document frame.
   00. tokens   01. base    02. backdrop & overlays
   03. hud      04. viewframe   05. page frame
   06. content  07. forms   08. prose (legal)   09. mobile
   ============================================================ */

/* ---- 00. tokens ---- */
:root{
  --bg:        #050505;
  --ink:       #E9E7E0;
  --dim:       #8B897F;
  --faint:     #55534B;
  --line:      #2B2A26;
  --line-hi:   #4A4840;
  --acc:       #FF3D00;
  --acc-soft:  #FF8A00;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --hud-t: 48px;
  --hud-b: 52px;
  --vx:    92px;
  --vt:    70px;
  --vb:    76px;
  --pad:   30px;

  --fs-micro: 10px;
  --fs-small: 11.5px;
}

/* ---- 01. base ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }
html,body{ height:100%; }
body{
  position:fixed; inset:0; overflow:hidden;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
::selection{ background:var(--acc); color:#000; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; }
:focus-visible{ outline:1px solid var(--acc); outline-offset:2px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.mono{ font-family:var(--mono); }
.micro{
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ---- 02. backdrop & overlays ---- */
/* CSS-only film backdrop: drifting warm leaks (no WebGL on utility pages) */
body::before{
  content:""; position:fixed; inset:-18%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 36% at 84% 90%, rgba(255,61,0,.17), transparent 70%),
    radial-gradient(30% 26% at 6% 4%, rgba(255,138,0,.08), transparent 70%);
  animation:leakDrift 26s ease-in-out infinite alternate;
}
@keyframes leakDrift{
  from{ transform:translate3d(-1.2%,-.8%,0) scale(1); }
  to{   transform:translate3d(1.2%,1.6%,0) scale(1.05); }
}
#grain{
  position:fixed; inset:-100px; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.14; mix-blend-mode:overlay;
  animation:grainShift 0.9s steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 33%{ transform:translate(-38px,22px); }
  66%{ transform:translate(24px,-30px); } 100%{ transform:translate(0,0); }
}
#reticle{
  position:fixed; top:50%; left:50%; z-index:4; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.4;
}

/* ---- 03. hud ---- */
.hud{ position:fixed; z-index:20; }

.hud-top{
  top:0; left:0; right:0; height:var(--hud-t);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-bottom:1px solid var(--line);
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  background:rgba(5,5,5,.6);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ display:block; flex:0 0 auto; }
.brand-name{
  font-family:var(--sans); font-weight:700; font-size:15px;
  letter-spacing:.06em; white-space:nowrap;
}
.brand-name sup{ font-size:8px; vertical-align:top; color:var(--dim); }
.brand-sub{ margin-left:2px; }

.hud-ticker{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
}
.hud-ticker .tick-label{ color:var(--faint); }
.hud-ticker .tick-title{ color:var(--ink); }

.hud-meta{ display:flex; align-items:center; gap:16px; }
.hud-meta .sep{ color:var(--faint); }

.hud-bottom{
  bottom:0; left:0; right:0; height:var(--hud-b);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 20px; border-top:1px solid var(--line);
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(5,5,5,.6);
}
.counter{ display:flex; align-items:baseline; gap:8px; }
.counter .fr-label{ color:var(--faint); }
.counter .pg-code{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink); }
.counter .of{ color:var(--faint); font-family:var(--mono); font-size:11px; letter-spacing:.1em; }

.progress{ flex:1 1 auto; height:14px; position:relative; border:1px solid var(--line);
  max-width:520px; }
.progress-fill{
  position:absolute; top:2px; bottom:2px; left:2px; width:2%;
  background:repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px);
  transition:width .15s linear;
}
.progress-fill.at-end{ background:repeating-linear-gradient(90deg, var(--acc) 0 5px, transparent 5px 8px); }

.hud-status{ display:flex; align-items:center; gap:14px; }
.rec{ display:flex; align-items:center; gap:6px; }
.rec-dot{ width:7px; height:7px; background:var(--acc); animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.12; } }
.hud-barcode svg{ display:block; }

/* rails */
.rail{ top:50%; transform:translateY(-50%); display:flex; flex-direction:column; }
.rail-left{ left:20px; }
.rail-left nav{ display:flex; flex-direction:column; gap:2px; }
.idx-btn{
  display:flex; align-items:center; gap:8px; padding:5px 6px;
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); text-align:left;
  border-left:2px solid transparent; transition:color .25s, border-color .25s;
}
.idx-btn .idx-name{ opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s; }
.rail-left:hover .idx-name, .idx-btn.on .idx-name{ opacity:1; transform:none; }
.idx-btn:hover{ color:var(--ink); }
.idx-btn.on{ color:var(--ink); border-left-color:var(--acc); }
.idx-btn.on .idx-no{ color:var(--acc); }

.rail-right{ right:20px; align-items:center; }
.rail-tagline{
  writing-mode:vertical-rl; font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
}
.rail-ticks{
  width:5px; height:110px; margin:14px auto 0;
  background:repeating-linear-gradient(180deg, var(--line-hi) 0 1px, transparent 1px 9px);
}

#syslog{
  position:fixed; z-index:20; left:var(--vx); bottom:calc(var(--hud-b) + 5px);
  list-style:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); pointer-events:none;
}
#syslog li{ white-space:nowrap; animation:logIn .3s both; }
#syslog li .ok{ color:var(--acc); }
@keyframes logIn{ from{ opacity:0; transform:translateY(4px);} }

/* ---- 04. viewframe ---- */
#viewframe{
  position:fixed; z-index:5; pointer-events:none;
  top:var(--vt); bottom:var(--vb); left:var(--vx); right:var(--vx);
  border:1px solid var(--line);
}
#viewframe .corner{ position:absolute; width:16px; height:16px; }
#viewframe .corner::before,#viewframe .corner::after{
  content:""; position:absolute; background:var(--ink);
}
#viewframe .corner::before{ width:16px; height:2px; }
#viewframe .corner::after{ width:2px; height:16px; }
.corner.tl{ top:-2px; left:-2px; }
.corner.tr{ top:-2px; right:-2px; } .corner.tr::before{ right:0; } .corner.tr::after{ right:0; }
.corner.bl{ bottom:-2px; left:-2px; } .corner.bl::before{ bottom:0; } .corner.bl::after{ bottom:0; }
.corner.br{ bottom:-2px; right:-2px; } .corner.br::before{ bottom:0; right:0; } .corner.br::after{ bottom:0; right:0; }
#viewframe .plus{ position:absolute; width:13px; height:13px; opacity:.7; }
#viewframe .plus::before,#viewframe .plus::after{ content:""; position:absolute; background:var(--dim); }
#viewframe .plus::before{ left:0; right:0; top:6px; height:1px; }
#viewframe .plus::after{ top:0; bottom:0; left:6px; width:1px; }
.plus.tl{ top:-28px; left:-28px; } .plus.tr{ top:-28px; right:-28px; }
.plus.bl{ bottom:-28px; left:-28px; } .plus.br{ bottom:-28px; right:-28px; }
#viewframe .ruler{
  position:absolute; left:0; right:0; bottom:-1px; height:7px;
  background:repeating-linear-gradient(90deg, var(--line-hi) 0 1px, transparent 1px 10px);
}
#viewframe .vf-tag{ position:absolute; background:var(--bg); padding:0 8px; }
.vf-tag.t1{ top:-6px; left:24px; }
.vf-tag.t2{ top:-6px; right:24px; color:var(--faint); }
.vf-tag.t3{ bottom:-6px; right:24px; color:var(--faint); }

/* ---- 05. page frame (single scrollable document) ---- */
#page{
  position:fixed; z-index:10;
  top:var(--vt); bottom:var(--vb); left:var(--vx); right:var(--vx);
  padding:var(--pad);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  touch-action:pan-y pinch-zoom; overscroll-behavior:contain;
  scrollbar-width:none;
  --dir:1;
}
#page::-webkit-scrollbar{ display:none; }
.frame-inner{ width:100%; max-width:880px; margin:auto; }
.frame-inner.wide{ max-width:1060px; }

/* ---- 06. content components ---- */
.f-kicker{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:10px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.f-kicker .k-r{ color:var(--acc); white-space:nowrap; }
.f-micro{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:12px; margin-top:34px; border-top:1px solid var(--line);
}
.f-micro .barcode svg{ display:block; opacity:.85; }
.checker{
  height:9px; margin-bottom:22px;
  background:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%)
    0 0 / 9px 9px;
  opacity:.85;
}
.pg-title{
  font-weight:700; text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(40px, 7.2vw, 88px); line-height:.94; margin-bottom:16px;
}
.pg-title .outline{ color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.pg-sub{
  max-width:560px; font-size:clamp(14.5px,1.5vw,17px); line-height:1.55;
  color:#ABA9A0; margin-bottom:30px;
}
.pg-sub em{ font-style:normal; color:var(--acc); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.chip{
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-hi); padding:6px 10px; color:var(--dim);
}
.chip b{ color:var(--ink); font-weight:600; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:13px 20px; border:1px solid var(--ink);
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{ background:var(--ink); color:#000; }
.btn.primary{ background:var(--acc); border-color:var(--acc); color:#000; }
.btn.primary:hover{ background:var(--ink); border-color:var(--ink); }
.btn .arr{ font-family:var(--sans); }

.ch-list{ border-top:1px solid var(--line); max-width:720px; }
.ch-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 2px; border-bottom:1px solid var(--line);
  transition:background .2s;
}
a.ch-row:hover{ background:rgba(233,231,224,.05); }
a.ch-row:hover .ch-val{ color:var(--acc); }
.ch-key{ flex:0 0 auto; }
.ch-val{
  font-family:var(--mono); font-size:clamp(13px,1.7vw,17px); font-weight:500;
  letter-spacing:.04em; text-align:right; transition:color .2s; word-break:break-all;
}
.ch-val .arr{ color:var(--acc); margin-left:6px; }

/* load-in animation (mirrors the landing page frame entry) */
.stagger{ --i:0;
  animation:printIn .62s cubic-bezier(.22,.75,.25,1) both;
  animation-delay:calc(var(--i) * 60ms + 60ms);
}
@keyframes printIn{
  from{ opacity:0; transform:translateY(30px); clip-path:inset(0 0 100% 0); }
  60%{ clip-path:inset(0 0 0 0); }
  to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}

/* ---- 07. forms ---- */
.ag-form{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.field label .req{ color:var(--acc); }
.field input,.field textarea{
  background:rgba(233,231,224,.04); border:1px solid var(--line-hi);
  color:var(--ink); font-family:var(--mono); font-size:14px;
  padding:12px; width:100%;
  transition:border-color .2s, background .2s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover,.field textarea:hover{ border-color:var(--dim); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--acc); background:rgba(233,231,224,.06);
}
.ag-form .btn{ align-self:flex-start; margin-top:6px; }
.form-note{ margin-top:14px; }
.form-note a{ color:var(--dim); border-bottom:1px solid var(--line-hi); }
.form-note a:hover{ color:var(--acc); border-color:var(--acc); }

/* ---- 08. prose (legal documents) ---- */
.prose{ max-width:760px; color:var(--dim); font-size:15.5px; line-height:1.66; }
.prose p{ margin:0 0 14px; }
.prose h4{
  font-family:var(--sans); color:var(--ink); text-transform:uppercase;
  letter-spacing:.03em; font-size:15.5px; font-weight:700;
  margin:32px 0 12px; padding-top:14px; border-top:1px solid var(--line);
}
.prose h4::before{ content:"▸ "; color:var(--acc); }
.prose ul{ margin:0 0 16px 2px; list-style:none; }
.prose li{ padding-left:18px; position:relative; margin-bottom:7px; }
.prose li::before{ content:"■"; position:absolute; left:0; top:2px; color:var(--acc); font-size:8px; }
.prose a{ color:var(--ink); border-bottom:1px solid var(--acc); }
.prose a:hover{ color:var(--acc); }
.prose strong,.prose b{ color:var(--ink); font-weight:600; }

/* ---- 09. mobile / narrow ---- */
@media (max-width: 900px){
  :root{ --vx:14px; --vt:58px; --vb:66px; --pad:16px; --hud-t:46px; --hud-b:50px; }
  .hud-ticker{ display:none; }
  .hud-meta .coords{ display:none; }
  .rail-left,.rail-right{ display:none; }
  #syslog{ display:none; }
  #viewframe .plus{ display:none; }
  .vf-tag.t2,.vf-tag.t3{ display:none; }
  .brand-sub{ display:none; }
  .progress{ max-width:none; }
  .hud-barcode{ display:none; }
  .f-hide-m{ display:none; }

  #page{ padding-top:24px; }
  .f-kicker{ margin-bottom:18px; }
  .f-micro{ margin-top:24px; }
  .pg-title{ font-size:clamp(34px, 10.5vw, 64px); }
  .pg-sub{ margin-bottom:22px; }
  .ch-row{ padding:11px 2px; }
  .prose{ font-size:14.5px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #grain{ animation:none; }
  body::before{ animation:none; }
}