/* ============================================================
   SYSTEM — tokens and type roles shared by every page
   ============================================================ */

:root{
  --paper:      #f5f4f0;
  --paper-deep: #efeee8;
  --ink:        #16150f;
  --ink-60:     rgba(22,21,15,.60);
  --ink-38:     rgba(22,21,15,.38);
  --ink-22:     rgba(22,21,15,.22);
  --ink-12:     rgba(22,21,15,.12);
  --ink-06:     rgba(22,21,15,.06);
  --red:        #d8412f;
  --red-30:     rgba(216,65,47,.30);

  --sans: "Helvetica Neue", "Inter", Arial, Helvetica, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", "Courier New", monospace;

  --rail: 34px;
  --hair: 1px;
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --- type roles ------------------------------------------- */

.t-label{
  font-size:9px; font-weight:600; letter-spacing:.20em;
  text-transform:uppercase; font-family:var(--sans);
}
.t-mono{
  font-family:var(--mono); font-size:10px; letter-spacing:.10em;
  text-transform:uppercase;
}

/* --- registration frame ----------------------------------- */

.frame{ position:fixed; inset:0; pointer-events:none; z-index:60; }
.frame i{
  position:absolute; width:13px; height:13px;
  border:var(--hair) solid var(--ink-22);
}
.frame i:nth-child(1){ top:var(--rail); left:var(--rail);  border-right:0; border-bottom:0; }
.frame i:nth-child(2){ top:var(--rail); right:var(--rail); border-left:0;  border-bottom:0; }
.frame i:nth-child(3){ bottom:var(--rail); left:var(--rail);  border-right:0; border-top:0; }
.frame i:nth-child(4){ bottom:var(--rail); right:var(--rail); border-left:0;  border-top:0; }

/* --- buttons ----------------------------------------------- */

.btn{
  appearance:none; background:transparent; cursor:pointer;
  border:var(--hair) solid var(--ink-22); color:var(--ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 22px; text-decoration:none; display:inline-block;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--red{ border-color:var(--red); color:var(--red); }
.btn--red:hover{ background:var(--red); color:var(--paper); border-color:var(--red); }
.btn--quiet{ border-color:var(--ink-12); color:var(--ink-60); }

/* --- underline links --------------------------------------- */

.links{ display:flex; gap:16px; }
.links a{ color:var(--ink-38); text-decoration:none; position:relative;
          transition:color .3s var(--ease); }
.links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px;
  height:var(--hair); background:var(--red);
  transition:right .35s var(--ease-out);
}
.links a:hover{ color:var(--ink); }
.links a:hover::after{ right:0; }

/* --- constructivist axes ----------------------------------- */

.diagonal{
  position:fixed; z-index:0; pointer-events:none;
  left:-10%; right:-10%; top:50%;
  height:var(--hair); background:var(--ink-06);
  transform:rotate(-14deg);
}
.diagonal.two{ transform:rotate(14deg); }

@media (max-width:820px){
  :root{ --rail:18px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}