/* FONTS */

@font-face {
  font-family: 'inter';
  src: url('./fonts/InterVariable.ttf');
}

@font-face {
  font-family: 'inter-italic';
  src: url('./fonts/InterVariable-Italic.ttf');
}




:root{
  /* fallbacks only - the page script overwrites all of these once
     portait.svg is fetched and parsed, from the artwork's own geometry
     (see parseScene in ericgozzi.html) rather than a hardcoded copy */
  --vb-w: 419.52;
  --vb-h: 595.2;
  --tile-pitch: 34px;
  --tile-stroke-color: rgba(255, 255, 255, 0.6);
  --tile-stroke-width: 1px;
  --tile-alpha: 1;
  /* per-element nudge (see snapElementToGrid) that lands a tile-sized
     control's corner exactly on a wall grid intersection */
  --snap-x: 0px;
  --snap-y: 0px;
}

html{
  background-color: #1a1c22;
  overflow-x: hidden;
}

body{
    margin: 0px;
    padding: 5%;
    font-family: inter;
    font-weight: 400;
    background-color: #1a1c22;
    min-height: 100vh;
    overflow-x: hidden;
}

/* SCENE CANVAS - the whole drawing: the ambient light, the wall tiles
   (pitch- and phase-matched to portait.svg's own grid and continued
   across the entire page), and the portrait itself, all drawn together
   in one pass (see the page script). Sized to the full document, not
   just the viewport, so it scrolls naturally with the page. Needs no
   special stacking-context trick to layer correctly - z-index:0 here,
   under main's z-index:1, is enough on its own. */
canvas#sceneCanvas{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* everything a visitor actually reads or clicks sits above the canvas */
main{
  position: relative;
  z-index: 1;
}


/* BACK LINK */

a.back-link{
  display: inline-block;
  position: fixed;
  top: 4vh;
  left: 4vw;
  color: #aab4cc;
  font-family: 'inter';
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
  z-index: 1;
}

a.back-link:hover{
  color: white;
}


/* HEADER */

header.page-header{
  margin-top: calc(var(--tile-pitch) * 6);
}

h1{
    font-size: clamp(3rem, 6.5vw, 6rem);
    margin: 0;
    color: white;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

p.tagline{
  margin: calc(var(--tile-pitch) * 0.5) 0 0;
  color: #aab4cc;
  font-family: 'inter-italic';
  font-weight: 400;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}


/* LAYOUT */

section.item{
    margin: 0px;
    padding: 0px;
}

section.grid-container{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: calc(var(--tile-pitch) * 3);
    margin-top: calc(var(--tile-pitch) * 4);
}


/* BIO */

section.bio{
  padding-left: 6%;
}

p{
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.75;
    text-align: left;
    color: #e4e7f0;
    font-weight: 400;
}

p + p{
  margin-top: var(--tile-pitch);
}

div#biography{
  margin: 0;
}


/* PORTRAIT - the picture itself is drawn on the page-wide #sceneCanvas,
   not here. This spacer is an invisible placeholder that just reserves
   its footprint in the normal grid layout (and carries the accessible
   label) - the page script measures its rect to know exactly where on
   the big canvas to draw the portrait and align the tiles around it. */

section.portrait-frame{
  display: flex;
  flex-direction: column;
}

div.portrait-wrap{
  display: flex;
  align-items: center;
  gap: 14px;
}

div.portrait-spacer{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  aspect-ratio: var(--vb-w) / var(--vb-h);
}

/* a plain physical rocker switch, not a HUD control - up is on, down
   is off, same as the one on the actual wall. Sized to exactly two wall
   tiles (one across, two tall) and nudged by --snap-x/--snap-y (set in
   the page script) so it sits flush on the grid, like the switch is
   simply what's behind those two tiles. */
button.light-switch{
  flex: none;
  box-sizing: border-box;
  width: var(--tile-pitch);
  height: calc(var(--tile-pitch) * 2);
  padding: 3px;
  border: var(--tile-stroke-width) solid var(--tile-stroke-color);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  opacity: var(--tile-alpha);
  cursor: pointer;
  transform: translate(var(--snap-x), var(--snap-y));
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

button.light-switch:hover{
  border-color: rgba(255, 255, 255, 0.7);
}

span.light-switch-track{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

span.light-switch-knob{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44%;
  background: #e7d9a8;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 210, 110, 0.6);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

button.light-switch[aria-pressed="false"] .light-switch-knob{
  transform: translateY(127%);
  background: #6b6f78;
  box-shadow: none;
}

p.plate-caption{
  margin: 12px 0 0;
  color: #7c869e;
  font-family: 'inter-italic';
  font-weight: 400;
  font-size: 13px;
}


/* LINKS */

a{
    color: white;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}

a:hover{
    text-decoration-color: white;
}

section#links{
  margin-top: calc(var(--tile-pitch) * 5);
  margin-bottom: 4vh;
}

p.links-lead{
  margin: 0 0 14px;
  color: #aab4cc;
  font-size: 0.9rem;
}

/* the row itself is nudged (via --snap-x/--snap-y, set in the page
   script) so its first tile lands exactly on a grid intersection; with
   gap:0 and every tile the same width, the rest of the row then follows
   the grid automatically */
div.icon-links{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  transform: translate(var(--snap-x), var(--snap-y));
}

/* each link is sized to exactly one wall tile - the tile is the button.
   box-sizing:border-box so the border itself doesn't push the box past
   the tile pitch (an <a> isn't a <button>, so it doesn't get that for
   free from the UA stylesheet the way button.light-switch does) */
a.icon-link{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--tile-pitch);
  height: var(--tile-pitch);
  border: var(--tile-stroke-width) solid var(--tile-stroke-color);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  opacity: var(--tile-alpha);
  color: white;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

a.icon-link svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a.icon-link:hover{
  background: white;
  color: black;
}


@media (max-width: 800px){
  section.grid-container{
    grid-template-columns: 1fr;
    gap: calc(var(--tile-pitch) * 4);
  }

  section.grid-container section.portrait-frame{
    order: -1;
    max-width: 60%;
    margin: 0 auto;
  }

  section.bio{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: calc(var(--tile-pitch) * 2);
  }

  a.back-link{
    top: 3vh;
  }

  header.page-header{
    margin-top: calc(var(--tile-pitch) * 5);
  }
}