/* Corinna La Studio
   Layout is a fixed-proportion canvas (792 x 612pt, the mockup's page box)
   scaled to fit the viewport. Every position below is a percentage of that
   canvas, read straight off the mockup's own text coordinates, so the
   composition matches it exactly at any window size.

   Text sits by its baseline in the mockup but by its box top in CSS, so each
   `top` here is the baseline less 0.8375em (line-height 1) or 0.9375em
   (line-height 1.2) -- the baseline's offset inside a Times line box. */

:root {
  --vh: 100vh;
  --ratio: 1.294118;                            /* 792 / 612 */
  --ch: min(var(--vh), 100vw / 1.294118);       /* canvas height */
  --cw: calc(var(--ch) * var(--ratio));         /* canvas width  */

  /* Mockup point sizes over the 612pt canvas height. */
  --fs-la: calc(var(--ch) * 0.0816993);         /* 50pt */
  --fs-studio: calc(var(--ch) * 0.0490196);     /* 30pt */
  --fs-head: calc(var(--ch) * 0.0408497);       /* 25pt */
  --fs-year: calc(var(--ch) * 0.0196078);       /* 12pt */
  --fs-body: calc(var(--ch) * 0.0163399);       /* 10pt */

  --ink: #000;
  --paper: #fff;
}

@supports (height: 100svh) {
  :root { --vh: 100svh; }
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  font-weight: 400;
}

[hidden] { display: none !important; }

#scroll { width: 100%; }

#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--cw);
  height: var(--ch);
  transform: translate(-50%, -50%);
  margin: 0;
}

/* --- title: eight LAs on fixed x-slots, free to travel on y ------------- */

#title {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-la);
  line-height: 1;
}

.la {
  position: absolute;
  z-index: 2;              /* the LAs travel over the image, not behind it */
  top: 4.6857%;
  left: calc(4.9168% + var(--i) * 11.4394%);
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* --- the name, reading bottom-to-top up the left edge ------------------- */

#corinna {
  position: absolute;
  z-index: 2;
  left: 3.8502%;
  top: 52.5044%;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  font-size: var(--fs-la);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

#studio {
  position: absolute;
  z-index: 2;
  left: 71.1870%;
  top: 85.6983%;
  font-size: var(--fs-studio);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* --- the flipping card -------------------------------------------------- */

#card-wrap {
  position: absolute;
  z-index: 1;
  left: 13.8051%;
  top: 15.4504%;
  width: 71.1932%;
  height: 69.0993%;
  perspective: calc(var(--cw) * 1.8);
}

#card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.face[data-side="1"] { transform: rotateX(180deg); }

.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
}

/* --- the text faces ----------------------------------------------------- */
/* Offsets are percentages of the card, which is the box each panel fills. */

.panel {
  position: absolute;
  inset: 0;
}

.panel > * {
  position: absolute;
  margin: 0;
}

.panel h2 {
  left: 1.664%;
  top: 2.669%;
  font-size: var(--fs-head);
  font-weight: 400;
  line-height: 1;
}

#about .body {
  left: 2.691%;
  top: 11.287%;
  font-size: var(--fs-body);
  line-height: 1.2;
}

.panel .body p { margin: 0 0 1.2em; }   /* one blank line between paragraphs */
.panel .body p:last-child { margin-bottom: 0; }

#about .contact {
  left: 2.691%;
  top: 50.590%;
  font-size: var(--fs-body);
  line-height: 1;
}

#about .contact a {
  color: inherit;
  text-decoration: none;
}

#about .contact a:hover,
#about .contact a:focus-visible { text-decoration: underline; }

#work .year {
  left: 2.691%;
  top: 11.127%;
  font-size: var(--fs-year);
  line-height: 1;
}

#work .spec {
  left: 2.691%;
  top: 17.288%;
  font-size: var(--fs-body);
  line-height: 1.2;
}

#work .body {
  left: 2.691%;
  top: 28.700%;            /* one blank line under the spec's three */
  font-size: var(--fs-body);
  line-height: 1.2;
}

#work .credits {
  left: 2.691%;
  top: 96.770%;            /* one blank line under the description */
  font-size: var(--fs-body);
  line-height: 1.2;
}

/* --- copyright: pinned to the bottom middle of the viewport, not the canvas */

#copyright {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ch) * 0.0163399 + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: max(var(--fs-body), 11px);   /* stays legible on phones */
  line-height: 1;
  color: #555;
  white-space: nowrap;
}