/* ═══════════════════════════════════════════════════════════════════
   BEREE / "The Redirect": SHARED LAYER
   Every page on get.beree.io loads this file and nothing else is
   allowed to redefine what is in it.

   What lives here: tokens, reset, accessibility, type scale, buttons,
   nav, footer, section primitives, the reveal.
   What does not: anything only one page needs. The home page's own
   set pieces are in home.css; the inner-page shell is in page.css;
   single-page CSS sits in its own file next to those.

   Load order on every page:
     styles.css  →  <page>.css
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* canvas: near-black, tinted toward the brand teal */
  --ink:      #0A0F0F;
  --ink-2:    #101818;
  --ink-3:    #16201F;
  --rule:     #24322F;
  --rule-hot: #FF5C39;
  --bone:     #EDE9E2;
  --dim:      #8FA09C;
  --dimmer:   #7A8C89;
  --coral:    #FF5C39;
  --coral-lo: #CB6349;
  /* Both tones sit on --coral and must clear 4.5:1 for body copy.
     .72 measured 4.27:1, which fails; .80 measures 4.93:1. */
  --on-coral:   rgba(10,15,15,.92);
  --on-coral-2: rgba(10,15,15,.80);

  --f-d: 'Archivo', 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --g: clamp(16px, 3.4vw, 52px);
  /* Gutter reserved for the home page's hop rail. Only home.css widens
     it, so inner pages sit flush and never carry an empty column. */
  --rail: 0px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.62,.02,.16,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--f-d); font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(15px,1.02vw,17.5px); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{ margin:0; }
ul,ol{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; }

::selection{ background:var(--coral); color:var(--ink); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{
  position:fixed; left:8px; top:-100px; z-index:200;
  background:var(--coral); color:var(--ink); padding:.7rem 1.1rem;
  font-family:var(--f-m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; transition:top .18s var(--e-out);
}
.skip:focus{ top:8px; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

/* ── primitives ─────────────────────────────────────────────────── */
.bleed{ padding-inline:var(--g); padding-left:calc(var(--g) + var(--rail)); }
.g12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); }
.g12 > *{ min-width:0; }
.mono{ font-family:var(--f-m); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.tab{ font-variant-numeric:tabular-nums; }

.hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.hr-hot{ border-top:2px solid var(--coral); }

.stamp{
  font-family:var(--f-m); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); display:flex; align-items:baseline; gap:.75rem;
}
.stamp::after{ content:''; flex:1; height:1px; background:var(--rule); transform:translateY(-3px); }
.stamp .sub{ color:var(--dim); font-weight:400; letter-spacing:.1em; }
@media (max-width:700px){
  .stamp{ flex-wrap:wrap; row-gap:.3rem; }
  .stamp::after{ flex-basis:100%; margin-top:.15rem; }
}

/* architectural display type */
.disp{
  font-family:var(--f-d); text-transform:uppercase;
  font-variation-settings:'wdth' 86,'wght' 800;
  line-height:.86; letter-spacing:-.022em;
  font-size:clamp(2.7rem,9.4vw,9.6rem);
  text-wrap:balance;
}
.disp-xl{ font-size:clamp(2.35rem,10vw,12rem); line-height:.82; letter-spacing:-.034em; }
.disp-s{ font-size:clamp(1.9rem,4.4vw,4.1rem); line-height:.92; letter-spacing:-.02em;
         font-variation-settings:'wdth' 90,'wght' 700; }
/* one step below disp-s, for inner-page section headings */
.disp-xs{ font-size:clamp(1.45rem,3vw,2.5rem); line-height:.98; letter-spacing:-.015em;
          font-variation-settings:'wdth' 90,'wght' 700; }
.lede{ font-size:clamp(1.02rem,1.42vw,1.36rem); line-height:1.44; color:var(--bone);
       font-variation-settings:'wdth' 100,'wght' 400; max-width:min(34ch,100%); }
.body{ color:var(--dim); max-width:min(46ch,100%); }
.body strong{ color:var(--bone); font-variation-settings:'wdth' 100,'wght' 600; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--f-m); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:1.05rem 1.5rem; border:1px solid var(--coral);
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--coral); z-index:-1;
  transform:scaleX(1); transform-origin:left; transition:transform .38s var(--e-out);
}
.btn-solid{ color:var(--ink); }
.btn-solid:hover::before,.btn-solid:focus-visible::before{ transform:scaleX(0); transform-origin:right; }
.btn-solid:hover,.btn-solid:focus-visible{ color:var(--coral); }
.btn-line{ color:var(--bone); border-color:var(--rule); }
.btn-line::before{ transform:scaleX(0); transform-origin:right; background:var(--bone); }
.btn-line:hover::before,.btn-line:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.btn-line:hover,.btn-line:focus-visible{ color:var(--ink); border-color:var(--bone); }
.btn-lg{ padding:1.25rem 2rem; font-size:13px; }

/* ── nav ────────────────────────────────────────────────────────── */
/* The markup for .nav is byte-identical on every page. See README. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; gap:var(--g);
  padding:.85rem var(--g); background:rgba(10,15,15,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule);
}
.nav::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--coral); transform:scaleX(var(--sp,0)); transform-origin:left;
}
.wordmark{
  font-family:var(--f-d); font-variation-settings:'wdth' 78,'wght' 800;
  font-size:19px; letter-spacing:.01em; text-transform:uppercase; text-decoration:none;
  display:flex; align-items:center; gap:.5rem;
}
.wordmark span{ color:var(--coral); }
.nav-status{
  font-family:var(--f-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dimmer); margin-left:auto; display:none; white-space:nowrap;
}
.nav-status b{ color:var(--coral); font-weight:700; }
.nav-links{ display:none; gap:1.4rem; }
.nav-links a{
  font-family:var(--f-m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; padding:.3rem 0; border-bottom:1px solid transparent;
}
.nav-links a:hover{ color:var(--bone); border-bottom-color:var(--coral); }
.nav-links a[aria-current="page"]{ color:var(--bone); border-bottom-color:var(--coral); }
.nav-cta{ display:flex; gap:.5rem; margin-left:auto; }
.nav-cta .btn{ padding:.7rem 1rem; font-size:11px; }
.nav-cta .sign{ display:none; }
@media (min-width:760px){
  .nav-links{ display:flex; } .nav-status{ display:block; }
  .nav-cta{ margin-left:0; } .nav-cta .sign{ display:inline-flex; }
}
@media (min-width:1240px){ .nav-links{ gap:1.7rem; } }

main{ padding-top:60px; }

/* ── section frame ──────────────────────────────────────────────── */
.sec{ position:relative; border-top:1px solid var(--rule); }
.sec-pad{ padding-block:clamp(4.5rem,10vw,9rem); }
/* the calmer rhythm inner pages read at */
.sec-pad-s{ padding-block:clamp(2.8rem,6vw,5rem); }

/* ── footer ─────────────────────────────────────────────────────── */
/* The markup for .foot is byte-identical on every page. See README. */
.foot{ border-top:1px solid var(--rule); padding-block:2.4rem; }
.foot-row{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:baseline; }
.foot p,.foot a{ font-family:var(--f-m); font-size:11px; letter-spacing:.08em;
                 text-transform:uppercase; color:var(--dimmer); }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--coral); }
.foot nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.foot-legal{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--rule); }
.foot-legal a[aria-current="page"]{ color:var(--bone); }

/* ── reveal ─────────────────────────────────────────────────────── */
/* Gated on .js, which the inline snippet in every <head> sets before
   first paint. Nothing may start at opacity:0 unless the script that
   brings it back is already running. */
html.js .rv{ opacity:0; transform:translate3d(0,26px,0); }
html.js .rv.in{ opacity:1; transform:none;
        transition:opacity .7s var(--e-out) var(--rd,0s), transform .8s var(--e-out) var(--rd,0s); }

/* ── reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js .rv{ opacity:1; transform:none; }
}