/* =========================================================
   Rafael Visuals — v1
   Design system derived from Knowledge/Wiki/Design - Hermes Agent.md
   ========================================================= */

:root{
  /* --- colour: four values, no more.
         Light ground is the primary variant; assets/theme-dark.css flips it. --- */
  --bg:      #f5f5f5;
  --fg:      #0000f2;
  --accent:  #edff45;
  --paper:   #0000f2;   /* the one inverted block runs the other way */

  /* --- measure: one unit derived from a 2360px artboard --- */
  --u-anchor: 0.72px;
  --u:    max(calc(100vw / 2360), var(--u-anchor));
  --vsq:  calc(0.5vw + 0.5vh);

  --frame:   calc(2.5 * var(--vsq));
  --bezel:   calc(var(--frame) * 2.2);
  --gutter:  calc(140 * var(--u));
  --gap:     calc(26 * var(--u));
  --stack:   calc(190 * var(--u));   /* space between blocks */

  /* --- type --- */
  --font-display: "Instrument Serif", "Times New Roman", Times, serif;
  --font-mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  --t-h1:      calc(160 * var(--u));
  --t-name:    max(19px, calc(34 * var(--u)));
  --t-num:     calc(96 * var(--u));
  --t-body:    max(12px, calc(21 * var(--u)));
  --t-eyebrow: max(11px, calc(17 * var(--u)));

  /* --- motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.15s;
  --dur:  0.2s;
}

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

html{ background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-display);
  font-weight:400;
  font-synthesis:none;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* blue on acid, both variants — the pairing is the point, not the ground */
::selection{ background:var(--accent); color:#0000f2; }

:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:3px;
}

*{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
*:hover{ scrollbar-color:color-mix(in srgb, var(--fg) 20%, transparent) transparent; }
::-webkit-scrollbar{ width:.25rem; height:.25rem; }
::-webkit-scrollbar-track,::-webkit-scrollbar-button{ display:none; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--fg) 20%, transparent); }

/* ---------------------------------------------------------
   the frame + texture layers
   --------------------------------------------------------- */

.frame{
  position:fixed; inset:0; z-index:100;
  border:var(--frame) solid var(--bg);
  border-bottom-width:var(--bezel);
  pointer-events:none;
}

/* grain (colour-burn) + vignette, both at .2 — never a visible "filter" */
.texture{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
}
.texture::before{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat 0 0 / 12.8rem 12.8rem;
  mix-blend-mode:multiply;   /* on a light ground; colour-burn does nothing here */
  opacity:.1;
}
.texture::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 42%, transparent 50%, var(--bg) 100%);
  opacity:.14;
}

/* ---------------------------------------------------------
   bezel — the frame carries information, not decoration
   --------------------------------------------------------- */

.bezel{
  position:fixed; z-index:101;
  left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:1.5em;
  padding:0 var(--frame);
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.14em;
  line-height:1;
  margin:0;
}
.bezel--top{ top:0; height:var(--frame); }
.bezel--bottom{ bottom:0; height:var(--bezel); }

.bezel p, .bezel span, .bezel a{ margin:0; }

.bezel__id{ opacity:.72; }
.bezel__mail{ opacity:.72; }
.bezel__mail:hover{ opacity:1; }

.readout{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.readout__idle{ opacity:.55; }
.readout__live{ color:var(--fg); }
.readout__i{ opacity:.55; }
.hint{ opacity:.4; white-space:nowrap; }

/* ---------------------------------------------------------
   scroll container
   --------------------------------------------------------- */

.scroll{
  position:relative; z-index:1;
  padding:var(--frame) var(--frame) var(--bezel);
}

.block{ padding:0 var(--gutter); margin-bottom:var(--stack); }
.hero + .block{ margin-top:0; }

/* ---------------------------------------------------------
   hero — the thesis: name, one line, then the work bleeds in
   --------------------------------------------------------- */

.hero{
  padding:calc(80 * var(--u)) var(--gutter) calc(70 * var(--u));
  min-height:66vh;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
  column-gap:calc(24 * var(--u));
  align-content:end;
  align-items:center;
}
.hero__l{ display:flex; flex-direction:column; justify-content:flex-end; }

/* The artwork carries an off-white ground of its own (#f8f8f8). `darken`
   discards every pixel lighter than the page and keeps the glass — no cut-out,
   no halo, no edge. It only works while the page ground stays this light,
   which is why the dark variant hides it instead. */
.hero__tools{
  width:min(100%, 900px);
  height:auto;
  display:block;
  justify-self:center;
  object-fit:contain;
  mix-blend-mode:darken;
}

.hero__mark{
  margin:0;
  font-size:var(--t-h1);
  font-weight:400;
  line-height:.84;
  letter-spacing:.02em;
}
.hero__mark span{ display:block; }

.hero__line{
  margin:calc(34 * var(--u)) 0 0;
  max-width:46ch;
  font-family:var(--font-mono);
  font-size:var(--t-body);
  letter-spacing:.1em;
  line-height:1.5;
  opacity:.72;
}

/* one-shot reveal on load; nothing else on the page animates in */
.rev{ opacity:0; transform:translateY(.35em); }
.ready .rev{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms);
}

/* ---------------------------------------------------------
   section label — the count is the argument
   --------------------------------------------------------- */

.label{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2em;
  padding-bottom:calc(14 * var(--u));
  margin-bottom:var(--gap);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 28%, transparent);
}

.label__name{
  margin:0;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:var(--t-name);
  letter-spacing:.1em;
  line-height:1;
}
.label__sub{
  margin:.85em 0 0;
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.14em;
  opacity:.55;
}
.label__n{
  margin:0;
  font-size:var(--t-num);
  line-height:.72;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  opacity:.9;
}

/* ---------------------------------------------------------
   the wall
   --------------------------------------------------------- */

.grid{ display:grid; gap:var(--gap); }
.grid--v{ grid-template-columns:repeat(4,1fr); }
.grid--h{ grid-template-columns:repeat(2,1fr); }
.grid--s{ grid-template-columns:repeat(3,1fr); }

/* --- brand groups inside a block --- */

.group + .group{ margin-top:calc(76 * var(--u)); }

.sub{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5em;
  padding-bottom:.75em;
  margin-bottom:var(--gap);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 15%, transparent);
}
.sub__name{
  margin:0;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:max(12px, calc(23 * var(--u)));
  letter-spacing:.14em;
  line-height:1;
  opacity:.82;
  text-transform:none;   /* a brand is set the way the brand sets it */
}
.sub__n{
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  opacity:.45;
}

.tile{
  position:relative;
  display:block; width:100%; padding:0; margin:0;
  border:0; border-radius:0;
  text-decoration:none; color:inherit;
  background:color-mix(in srgb, #000 12%, var(--bg));
  aspect-ratio:9 / 16;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tile--v{ aspect-ratio:9 / 16; }
.tile--h{ aspect-ratio:16 / 9; }
.tile--s{ aspect-ratio:1 / 1; }

.tile .media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:.86;
  transition:opacity var(--dur) var(--ease);
}
.tile video.media{ opacity:0; }

/* the wall reads as one calm texture until something is asked for */
.tile::after{
  content:""; position:absolute; inset:0;
  background:var(--bg);
  opacity:.14;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}

/* active tile lifts above the grain layer and goes to full colour */
.tile.is-active{ z-index:5; }
.tile.is-active .media{ opacity:1; }
.tile.is-active.is-playing img.media{ opacity:0; }
.tile.is-active::after{ opacity:0; }

/* ---------------------------------------------------------
   the one inverted block
   --------------------------------------------------------- */

.paper{
  background:var(--paper);
  color:var(--bg);
  margin:0 0 var(--stack);
  padding:calc(110 * var(--u)) var(--gutter);
}

.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
  margin:0;
}
.fact dt{
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  opacity:.55;
  padding-bottom:.9em;
  margin-bottom:1.4em;
  border-bottom:1px solid color-mix(in srgb, var(--bg) 30%, transparent);
}
.fact dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--t-body);
  letter-spacing:.1em;
  line-height:1.9;
}
.fact__big{
  font-family:var(--font-display);
  font-size:calc(84 * var(--u));
  letter-spacing:0;
  line-height:.8;
  font-variant-numeric:lining-nums;
}

/* ---------------------------------------------------------
   footer — the address is the call to action
   --------------------------------------------------------- */

.foot{
  position:relative;
  padding:calc(150 * var(--u)) var(--gutter) calc(90 * var(--u));
  overflow:hidden;
}

.ghost{
  position:absolute;
  left:50%; bottom:calc(-6 * var(--u));
  transform:translateX(-50%);
  font-size:min(calc(560 * var(--u)), 30dvh);
  line-height:.8;
  letter-spacing:.03em;
  white-space:nowrap;
  color:var(--accent);
  mix-blend-mode:exclusion;
  opacity:.2;
  pointer-events:none; user-select:none;
}

.foot__eyebrow{
  position:relative;
  margin:0 0 calc(26 * var(--u));
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  opacity:.55;
}
.foot__mail{
  position:relative;
  display:inline-block;
  font-size:clamp(28px, calc(88 * var(--u)), 128px);
  line-height:1;
  letter-spacing:.01em;
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 22%, transparent);
  text-underline-offset:.18em;
  transition:text-decoration-color var(--fast) var(--ease);
  word-break:break-word;
}
.foot__mail:hover{ text-decoration-color:currentColor; }

.foot__links{
  position:relative;
  display:flex; flex-wrap:wrap; gap:2.2em;
  list-style:none;
  margin:calc(52 * var(--u)) 0 0; padding:0;
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
}

.link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 25%, transparent);
  text-underline-offset:.3em;
  transition:text-decoration-color var(--fast) var(--ease);
}
.link:hover{ text-decoration-color:currentColor; }

/* ---------------------------------------------------------
   player
   --------------------------------------------------------- */

.player{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(20 * var(--u));
  padding:calc(var(--frame) * 1.6);
  background:var(--bg);
}
.player[hidden]{ display:none; }

.player__stage{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:0; flex:1;
}
.player__stage video{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  background:#000;
  display:block;
}
.player__close{
  align-self:flex-end;
  background:none; border:0; border-radius:0;
  padding:.4em 0;
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 25%, transparent);
  text-underline-offset:.3em;
  transition:text-decoration-color var(--fast) var(--ease);
}
.player__close:hover{ text-decoration-color:currentColor; }
.player__caption{
  margin:0; align-self:flex-start;
  font-family:var(--font-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  opacity:.55;
}

/* ---------------------------------------------------------
   responsive
   --------------------------------------------------------- */

@media (max-width:1100px){
  .grid--v{ grid-template-columns:repeat(3,1fr); }
  .facts{ grid-template-columns:repeat(2,1fr); row-gap:calc(60 * var(--u)); }
  :root{ --gutter:calc(70 * var(--u)); }
}

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    row-gap:22px;
  }
  .hero__tools{
    width:min(96%,720px);
    order:-1;
  }
}

@media (max-width:700px){
  :root{
    --gutter:0px;
    --stack:64px;
    --gap:8px;
    --t-h1:16.5vw;
    --t-num:52px;
    --t-name:17px;
    --bezel:calc(var(--frame) * 3.2);
  }
  .hero{
    min-height:58vh; padding:44px var(--gutter) 44px;
    grid-template-columns:1fr; row-gap:22px;
  }
  .hero__tools{ width:min(96%,620px); }
  .grid--v{ grid-template-columns:repeat(2,1fr); }
  .grid--h{ grid-template-columns:1fr; }
  .grid--s{ grid-template-columns:repeat(2,1fr); }
  .group + .group{ margin-top:40px; }
  .facts{ grid-template-columns:1fr; row-gap:40px; }
  .fact__big{ font-size:54px; }
  .paper{ padding:64px 22px; margin-bottom:var(--stack); }
  .block{ padding:0; }
  .hint{ display:none; }
  .bezel--bottom{ align-items:center; }
  .foot{ padding:96px 0 40px; }
  .foot__links{ gap:1.4em; }
  .label__n{ line-height:.8; }
}

/* ---------------------------------------------------------
   quality floor
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; }
  .ready .rev{ transition:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}