:root{
  --frame: 80px;          /* frame thickness */
  --contentLeft: 100px;   /* hero inset from left */
  --offset: 80px;         /* “+80px” rhythm */
  --bg:#050505;
  --fg:#f5f5f5;
  --muted: rgba(245,245,245,.65);
  --muted2: rgba(245,245,245,.45);
  --line: rgba(245,245,245,.14);
  --accent:#ff3b30;

  --font:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  overflow:hidden;
}

a{ color:inherit; text-decoration:none; }

/* --- Fullscreen Vimeo background --- */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
.bg iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  transform:translate(-50%,-50%);
  border:0;
  filter:saturate(.95) contrast(.95);
}

/* --- Lighter veil (less dark) --- */
.veil{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 25% 35%, rgba(0,0,0,0.06), rgba(0,0,0,0.22) 70%),
    linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.26));
}

/* --- Frame cross lines --- */
.frame-lines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
}
.line{ position:absolute; background: rgba(245,245,245,0.18); }
.line--top{ left:0; right:0; top:var(--frame); height:1px; }
.line--bottom{ left:0; right:0; bottom:var(--frame); height:1px; }
.line--left{ top:0; bottom:0; left:var(--frame); width:1px; }
.line--right{ top:0; bottom:0; right:var(--frame); width:1px; }

/* --- Content layout --- */
.frame{
  min-height:100vh;
  padding:var(--frame);
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

/* Frame-aligned labels — centered INSIDE the frame */
.framePill{
  position:absolute;
  z-index:20;

  padding: 0;
  border: none;
  background: none;

  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(245,245,245,0.75);

  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* top-left label inside the top frame band */
.framePill--topLeft{
  top: calc(var(--frame) / 2);
  left: calc(var(--frame) + var(--offset));
}

/* bottom-left label inside the bottom frame band, +80px from frame */
.framePill--bottomLeft{
  bottom: calc(var(--frame) / 2);
  left: calc(var(--frame) + var(--offset));
}

/* SVG mark instead of text mark */
.markIcon{
  width:16px;
  height:16px;
  display:block;
  opacity:0.75;
  /* filter: invert(1); */ /* enable if w.svg is black */
  transform: translateY(-0.5px);
}

.plus{ color: var(--accent); }

/* Vertical label bottom-left inside frame */
.frameVLabel{
  position:absolute;
  left: calc(var(--frame) - 34px);
  bottom: calc(var(--frame) + 80px);
  transform: rotate(-90deg);
  transform-origin: left bottom;
  z-index:20;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(245,245,245,0.55);
  pointer-events:none;
}

/* Header brand aligned to the same rhythm (+80px from frame) */
.top{
  display:flex;
  justify-content:flex-start;
  padding-top:4px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  margin-left: calc(var(--frame) + var(--offset));
  transform: translateY(2px);
}

.name{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(245,245,245,.85);
}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,59,48,.12);
}

/* Main hero block */
.main{
  display:flex;
  align-items:center;
}

.hero{
  max-width: 880px;
  padding-left: var(--contentLeft);
}

.logo{
  width:28px;
  height:auto;
  display:block;
  margin-bottom:18px;
  filter:invert(1); /* remove if lw.svg already white */
  opacity:.92;
}

.h1{
  margin:0;
  font-weight:600;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1.08;
  letter-spacing:-0.02em;
}

.red{
  color:var(--accent);
  text-shadow:0 0 24px rgba(255,59,48,.22);
}

.accent{ color:var(--fg); }

.sub{
  margin-top:16px;
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
  max-width:64ch;
}

/* Links list inside content (simple hover color only) */
.linksList{
  margin-top: 22px;
  display: grid;
  gap: 10px;
  max-width: 320px;
}

.linkItem{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 0;
  border: none;
  background: none;

  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: rgba(245,245,245,0.65);
}

.linkItem:hover{
  color: rgba(245,245,245,0.95);
}

.arrow{
  color: rgba(245,245,245,0.45);
  font-size: 11px;
}

/* Footer unused (kept for structure) */
.footer{ height: 0; }

/* Responsive: better breathing on small screens */
@media (max-width: 900px){
  :root{
    --frame: 28px;
    --contentLeft: 14px;
    --offset: 24px; /* keep rhythm, but less aggressive on mobile */
  }

  body{ overflow:auto; }

  .frame{ padding: var(--frame); }

  .main{
    align-items:flex-start;
    padding-top: 10px;
  }

  .hero{
    padding-left: var(--contentLeft);
    padding-right: var(--contentLeft);
  }

  .h1{
    font-size: 26px;
    line-height: 1.12;
  }

  .sub{
    font-size: 12px;
  }

  /* reduce clutter */
  .frameVLabel{ display:none; }
}