/* =========================================================
   STILL HAUS COLLECTIVE
   Type system:
     Archivo 700/800  → headlines + wordmark (uppercase)
     Fraunces italic  → taglines + pull-quotes (sentence case)
     Inter            → body paragraphs (sentence case)
     Spline Sans Mono → labels/tags/meta (uppercase, tracked)
     Courier Prime    → every numeral (round zero) via unicode-range
   Black opener/footer, pure white body. No gray. Lime = spark.
   ========================================================= */

/* Courier Prime covers ONLY digits (round zero); listed first in every
   font var so all numerals render Courier Prime automatically. */
@font-face{font-family:"CP Digits";src:url("/assets/fonts/courier-prime-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0030-0039;}
@font-face{font-family:"CP Digits";src:url("/assets/fonts/courier-prime-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0030-0039;}

:root {
  --ink:   #0A0A0A;
  --white: #FFFFFF;
  --lime:  #D5F00E;

  --font-head:  "CP Digits", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-serif: "CP Digits", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:  "CP Digits", "Inter", system-ui, sans-serif;
  --font-mono:  "CP Digits", "Spline Sans Mono", ui-monospace, "Courier New", monospace;
  --font-display: "CP Digits", "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;

  --step--1: clamp(0.68rem, 0.64rem + 0.16vw, 0.76rem);
  --step-0:  clamp(0.92rem, 0.88rem + 0.2vw, 1.04rem);
  --step-1:  clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.1rem + 1.9vw, 2.8rem);
  --step-3:  clamp(2.4rem, 1.5rem + 4.4vw, 6.5rem);

  --pad: clamp(1.5rem, 5vw, 6rem);
  --gutter: clamp(1.1rem, 2.6vw, 2.4rem);
  --maxw: 1720px;
  --ease: cubic-bezier(0.65, 0.05, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p,ul,figure,blockquote { margin: 0; }
ul,ol { list-style: none; padding: 0; }

.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .05em; text-transform: uppercase; }
.idx { color: var(--ink); font-style: normal; }

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:400;background:var(--ink);color:var(--white);padding:.7rem 1rem;font-family:var(--font-mono);font-size:var(--step--1);transition:top .2s var(--ease);}
.skip-link:focus{top:1rem;}
:where(a,button):focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* =========================================================
   SWEEP HIGHLIGHT — one hover language everywhere
   ========================================================= */
.sweep{position:relative;display:inline-block;isolation:isolate;
  padding:.08em .3em;margin:0 -.3em;color:inherit;transition:color .3s var(--ease);}
.sweep::before{content:"";position:absolute;inset:0;background:var(--lime);z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease);}
.sweep:hover, .sweep:focus-visible{color:var(--ink);}
.sweep:hover::before, .sweep:focus-visible::before{transform:scaleX(1);}

/* =========================================================
   OPENER — name slides out from behind a lime bar, then splits open
   ========================================================= */
.no-js .opener{display:none;}
.opener{position:fixed;inset:0;z-index:200;}
.opener__panel{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);will-change:transform;transition:transform .75s var(--ease);}
.opener__panel--top{top:0;} .opener__panel--bot{bottom:0;}
.opener.is-out .opener__panel--top{transform:translateY(-100%);}
.opener.is-out .opener__panel--bot{transform:translateY(100%);}
.opener__inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.6rem,5vh,2.6rem);transition:opacity .4s var(--ease),transform .5s var(--ease);}
.opener.is-out .opener__inner{opacity:0;transform:translateY(-10px);}
.opener__reveal{position:relative;overflow:hidden;padding-left:1.1rem;}
.opener__limebar{position:absolute;left:0;top:6%;bottom:6%;width:5px;background:var(--lime);z-index:2;}
.opener__mark{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:var(--white);
  line-height:.92;letter-spacing:-.02em;font-size:clamp(1.5rem,4.6vw,2.2rem);
  transform:translateX(-118%);}
.js .opener__mark{animation:mark-slide .75s var(--ease) .15s forwards;}
.opener__mark span{display:block;}
.opener__load{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--white);}
.opener__num{letter-spacing:.16em;}
.opener__bar{display:block;width:min(200px,46vw);height:1px;background:rgba(255,255,255,.28);overflow:hidden;}
.opener__bar i{display:block;height:100%;width:0;background:var(--lime);}
.opener.is-done{display:none;}
@keyframes mark-slide{to{transform:none;}}
.opener-lock{overflow:hidden;height:100%;}

/* =========================================================
   GRAIN · CROP MARKS · EDGE LABEL
   ========================================================= */
.grain{position:fixed;inset:-40%;z-index:95;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;animation:grain 6s steps(6) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0);}20%{transform:translate(-5%,3%);}40%{transform:translate(3%,-5%);}60%{transform:translate(-3%,5%);}80%{transform:translate(5%,-3%);}}

.crop{position:fixed;inset:0;z-index:112;pointer-events:none;mix-blend-mode:difference;}
.crop i{position:absolute;width:15px;height:15px;}
.crop i::before,.crop i::after{content:"";position:absolute;background:#fff;}
.crop i::before{width:15px;height:1px;} .crop i::after{width:1px;height:15px;}
.crop i:nth-child(1){top:var(--gutter);left:var(--gutter);}
.crop i:nth-child(1)::before{top:0;left:0;} .crop i:nth-child(1)::after{top:0;left:0;}
.crop i:nth-child(2){top:var(--gutter);right:var(--gutter);}
.crop i:nth-child(2)::before{top:0;right:0;} .crop i:nth-child(2)::after{top:0;right:0;}
.crop i:nth-child(3){bottom:var(--gutter);left:var(--gutter);}
.crop i:nth-child(3)::before{bottom:0;left:0;} .crop i:nth-child(3)::after{bottom:0;left:0;}
.crop i:nth-child(4){bottom:var(--gutter);right:var(--gutter);}
.crop i:nth-child(4)::before{bottom:0;right:0;} .crop i:nth-child(4)::after{bottom:0;right:0;}

.edge-label{position:fixed;left:calc(var(--gutter) + .5rem);top:50%;z-index:112;pointer-events:none;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.3em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;white-space:nowrap;}
@media (max-width:820px){.edge-label{display:none;}}

/* =========================================================
   TOP BAR — dark text over white, switches white over the footer
   ========================================================= */
.topbar{position:fixed;top:0;left:0;right:0;z-index:130;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.4vw,1.9rem) calc(var(--gutter) + 1.2rem);
  color:var(--ink);transition:color .4s var(--ease);}
.topbar.is-dark{color:var(--white);}
.brand{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;font-size:var(--step-1);}
.topbar__center{display:none;color:inherit;}
@media (min-width:760px){.topbar__center{display:block;position:absolute;left:50%;transform:translateX(-50%);}}
.topbar__inq{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;}

/* =========================================================
   HERO
   ========================================================= */
.hero{background:var(--white);min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--gutter) + 4.5rem) var(--pad) clamp(2rem,6vw,4rem);}
.hero__grid{width:100%;max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,3.5rem);align-items:center;}
.hero__lockup{transform-origin:top left;}
.hero__word{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:.86;letter-spacing:-.035em;font-size:clamp(2.6rem,10.5vw,8.5rem);}
.hero__word span{display:block;}
.js .hero__word{opacity:0;transform:translateY(18px) scale(.965);transform-origin:left center;
  transition:opacity .6s var(--ease),transform .75s var(--ease);}
.entered .hero__word{opacity:1;transform:none;}
.hero__tag{margin-top:clamp(1.2rem,3vw,2rem);display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--step-1);color:var(--ink);}
.hero__tag .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--lime);flex:none;}
.hero__media{overflow:hidden;position:relative;background:#f2f2f2;aspect-ratio:4/5;max-width:420px;width:100%;justify-self:end;}
.hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);background:#f2f2f2;}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) clamp(260px,30vw,400px);gap:clamp(2.5rem,5vw,5rem);}
  .hero__media{max-width:none;}
}
@media (max-width:640px){.hero__media{max-width:none;}}

/* =========================================================
   LABEL ROWS (contents page)
   ========================================================= */
.label-row{display:flex;justify-content:space-between;gap:1rem;color:var(--ink);
  padding:1.1rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}

/* =========================================================
   (01) THE HOUSE — belief statement
   ========================================================= */
.belief{max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--pad) clamp(4rem,11vw,9rem);}
.belief__grid{padding-top:clamp(2.5rem,7vw,5.5rem);}
.belief__statement{position:relative;isolation:isolate;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;font-size:clamp(2.3rem, 1.6rem + 5.2vw, 7rem);line-height:.98;
  letter-spacing:-.03em;color:var(--ink);max-width:15ch;}
.belief__w{color:var(--ink);transition:color .25s var(--ease);}
.belief.is-scrub .belief__w{color:#D8D7CF;}
.belief__hl{position:relative;white-space:nowrap;}
.belief__hl::before{content:"";position:absolute;left:-.06em;right:-.06em;top:.1em;bottom:.12em;
  background:var(--lime);transform:scaleX(var(--hp,1));transform-origin:left center;z-index:-1;}
.belief__q{color:var(--lime);font-weight:600;}
.belief__note{font-family:var(--font-body);font-size:var(--step-0);letter-spacing:0;line-height:1.65;
  color:var(--ink);max-width:46ch;margin-left:auto;margin-top:clamp(3rem,9vw,7rem);}

/* =========================================================
   (02) THE BUILDS — venture rows (image + text side by side)
   ========================================================= */
.builds{max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(3rem,8vw,6rem);}
.vrow{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,3vw,2.5rem);
  margin-inline:calc(-1 * clamp(1.2rem,3vw,2.5rem));
  border-bottom:1px solid var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease);}
.builds .vrow:first-of-type{border-top:1px solid var(--ink);}
.vrow__media{display:block;}
.vrow__frame{display:block;overflow:hidden;background:#f2f2f2;aspect-ratio:4/5;}
.vrow__frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);
  transform:scale(1.02);transition:transform 1s var(--ease);}
.vrow:hover .vrow__frame img{transform:scale(1.05);}
.vrow__cap{display:block;margin-top:.9rem;color:var(--ink);letter-spacing:.03em;}
.vrow__tag{display:block;color:var(--ink);margin-bottom:1.1rem;}
.vrow__name{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:-.035em;line-height:.9;margin-bottom:1.1rem;}
.vrow__tagline{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,0.9rem+1.4vw,2rem);line-height:1.15;margin-bottom:1.3rem;}
.vrow__blurb{max-width:46ch;font-size:var(--step-0);line-height:1.65;margin-bottom:1.8rem;}
.vrow__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;}
.vrow__status{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);}
.vrow__status .live{width:.5rem;height:.5rem;border-radius:50%;background:var(--lime);flex:none;}
.vrow__visit{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.05em;text-transform:uppercase;}
.vrow__cap,.vrow__tag,.vrow__name,.vrow__tagline,.vrow__blurb,.vrow__status,.vrow__visit{transition:color .45s var(--ease);}
@media (hover:hover){
  .vrow:hover{background:var(--ink);color:var(--white);border-color:var(--white);}
  .builds .vrow:hover{border-top-color:var(--white);}
  .vrow:hover .vrow__cap,.vrow:hover .vrow__tag,.vrow:hover .vrow__name,
  .vrow:hover .vrow__tagline,.vrow:hover .vrow__blurb,.vrow:hover .vrow__status,
  .vrow:hover .vrow__visit{color:var(--white);}
  .vrow:hover .vrow__visit span{color:var(--lime);}
  .vrow__visit:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;}
}
@media (min-width:760px){
  .vrow{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,5rem);align-items:center;}
  .vrow__media{max-width:400px;}
  .vrow--flip .vrow__media{order:2;margin-left:auto;}
  .vrow--flip .vrow__body{order:1;}
}

/* =========================================================
   CONTACT (black footer)
   ========================================================= */
.contact{background:var(--ink);color:var(--white);margin-top:clamp(2rem,5vw,4rem);
  min-height:min(78vh,760px);
  padding:clamp(3rem,7vw,5rem) var(--pad) clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(3rem,7vw,5.5rem);}

/* top band */
.contact__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.contact__label{color:var(--white);}

/* middle band — two columns */
.contact__mid{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:clamp(2.5rem,6vw,4rem);}
.contact__lead{display:flex;flex-direction:column;align-items:flex-start;}
.contact__statement{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);line-height:.95;max-width:12ch;color:var(--white);}
.contact__sub{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--white);
  font-size:clamp(1.2rem, 1rem + 0.9vw, 1.375rem);margin-top:.85rem;}
.contact__email-block{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  margin-top:clamp(2rem,5vw,3.4rem);}
.contact__minlabel{color:var(--white);}
.contact__email{font-family:var(--font-body);font-weight:500;letter-spacing:.005em;
  font-size:clamp(1rem, 0.95rem + 0.2vw, 1.125rem);color:var(--white);white-space:nowrap;}
.contact__ventures{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;}
.contact__vlink{color:var(--white);}
@media (min-width:640px){
  .contact__ventures{align-items:flex-end;text-align:right;}
}

/* bottom band */
.contact__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 2.5rem;
  padding-top:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--white);}
.contact__meta{color:var(--white);margin:0;}
.contact__toplink{color:var(--white);}

/* =========================================================
   REVEALS
   ========================================================= */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js [data-reveal].is-in{opacity:1;transform:none;}
.js .reveal-img{opacity:0;transform:translateY(26px) scale(1.02);transition:opacity .9s var(--ease),transform 1s var(--ease);}
.js .reveal-img.is-in{opacity:1;transform:none;}
.js .word{display:inline-block;overflow:hidden;vertical-align:top;}
.js .word>span{display:inline-block;transform:translateY(110%);transition:transform .7s var(--ease);}
.js [data-split].is-in .word>span{transform:none;}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .opener{display:none!important;}
  .opener-lock{overflow:auto!important;}
  .grain{animation:none;}
  .js [data-reveal]{opacity:1!important;transform:none!important;}
  .js .reveal-img{opacity:1!important;transform:none!important;}
  .js .word>span{transform:none!important;}
  .js .hero__word{opacity:1!important;transform:none!important;}
  .hero__lockup{transform:none!important;opacity:1!important;}
  .hero__video{display:none!important;}
  .belief__w{color:var(--ink)!important;}
  .belief__hl::before{transform:scaleX(1)!important;}
}

/* =========================================================
   TOUCH — tapped/active states (no hover on touch devices)
   ========================================================= */
.sweep:active{color:var(--ink);}
.sweep:active::before{transform:scaleX(1);}
.vrow__visit:active{color:var(--lime);}
.vrow:active .vrow__visit span{color:var(--lime);}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:640px){
  .crop{display:none;}
  /* pull-quote: comfortably smaller so it never clips the screen edge */
  .belief__statement{font-size:clamp(1.7rem, 1rem + 3.6vw, 2.4rem);}
  .belief__bigq{font-size:clamp(3.2rem,17vw,5rem);}
  /* contact stacks, never side-by-side */
  .contact{min-height:auto;}
  .contact__mid{flex-direction:column;gap:clamp(2.2rem,7vw,3rem);}
  .contact__ventures{align-items:flex-start;text-align:left;}
  /* bigger tap targets */
  .topbar__inq{padding:.45rem .25rem;margin:-.45rem -.25rem;}
  .vrow__visit{display:inline-block;padding:.5rem 0;}
  .contact__email,.contact__vlink,.contact__toplink{display:inline-block;padding:.4rem 0;}
}