/* An Obvious Name Pvt Ltd. The stylesheet. v2: there is no page, there is a cube. This dresses what is not the cube. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italic-var.woff2') format('woff2');
}

:root {
  --paper: #FAF7F2;
  --ink: #141311;
  --red: #C63212;
  --serif: 'Newsreader', 'Iowan Old Style', 'Times New Roman', Times, serif;
  --mono: Menlo, Consolas, 'Liberation Mono', monospace;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  /* baseline offset from the top of a line box at line-height 1, as a fraction of the font size.
     Newsreader: ascent 1470 / 2000, descent 530 / 2000, no line gap, so the baseline is at .735em.
     The system mono is a guess across SF Mono, Menlo and Consolas. */
  --asc: .735;
  --asc-mono: .85;
}

html.night { --paper: #E9DFCC; }
/* after Mumbai sunset the room is lamp-lit: a pool of light behind him, not a page tint */
html.night body { background: radial-gradient(ellipse 72% 60% at 50% 47%, #F4ECDA 0%, #EDE3D1 45%, var(--paper) 100%); }

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

html, body {
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 1.2s ease;
}

/* paper has a grain. it is very quiet about it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--red); color: var(--paper); }

a { color: inherit; }

/* ---------- the stage: one canvas, made by core.js ---------- */

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 10;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

#stage:active { cursor: grabbing; }

/* ---------- header ---------- */

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  font-family: var(--mono);
  font-size: clamp(.62rem, .5rem + .35vw, .72rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.top .wordmark { pointer-events: auto; }

.top .clock { font-variant-numeric: tabular-nums; }

/* phones: two lines at a readable size rather than one line at nine pixels */
@media (max-width: 479px) {
  .top { flex-wrap: wrap; font-size: .75rem; letter-spacing: .1em; row-gap: .45rem; }
  .top .locale { flex-basis: 100%; }
}

/* ---------- the faces: crisp words laid over the labels when a face is square-on ---------- */

.faces {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.under {
  position: fixed;
  left: var(--under-x, 50%);
  top: var(--under-y, 76dvh);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
  line-height: 1;
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: none;
}

html.touched .under,
.under.off { opacity: 0; }

/* the panel IS the label rectangle. the lead sets --x --y --w --h in px and --fs = the label height in px.
   everything inside is in em, so it rides the cube. */
.panel {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  font-size: var(--fs);
  transform-origin: 0 0;
  backface-visibility: hidden;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: none;                     /* leaving is a cut: the face is already turning away, a fade would double the words */
  pointer-events: none;
}

.panel.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms ease;       /* arriving is a fade: the cube is still, the paper's words and the page's words line up */
}

/* every word sits on its texture baseline: top = baseline * label height - ascent * own font */
.panel h1,
.panel p,
.panel a,
.panel .name,
.panel .note,
.panel .facts,
.panel dt,
.panel dd {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.panel h1,
.panel p,
.panel a,
.panel .name,
.panel .note {
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 400;
}

.panel h1 { inset: 0; font-size: 1em; }

/* front */
.panel[data-face="front"] .name {
  font-size: .26em;
  top: calc(.52 * var(--fs) - var(--asc) * 1em);
}

.panel[data-face="front"] .note {
  font-style: italic;
  color: var(--red);
  font-size: .15em;
  top: calc(.80 * var(--fs) - var(--asc) * 1em);
}

body[data-page="404"] .panel[data-face="front"] .name {
  font-size: .42em;
  top: calc(.68 * var(--fs) - var(--asc) * 1em);
}

/* right */
.panel[data-face="right"] p {
  font-size: .21em;
}

.panel[data-face="right"] p:nth-child(1) { top: calc(.42 * var(--fs) - var(--asc) * 1em); }
.panel[data-face="right"] p:nth-child(2) { top: calc(.78 * var(--fs) - var(--asc) * 1em); }

/* back */
.panel[data-face="back"] .k {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .19em;
  letter-spacing: .14em;
  text-indent: .14em;
}

.panel[data-face="back"] p.k {
  text-transform: uppercase;
  top: calc(.25 * var(--fs) - var(--asc-mono) * 1em);
}

.panel[data-face="back"] .v {
  font-size: .29em;
  top: calc(.60 * var(--fs) - var(--asc) * 1em);
}

.panel[data-face="back"] a.k {
  color: var(--red);
  font-size: .22em;
  letter-spacing: 0;
  text-indent: 0;
  top: calc(.89 * var(--fs) - var(--asc-mono) * 1em);
  text-decoration: none;
  pointer-events: auto;
}

.panel[data-face="back"] a.k:hover,
.panel[data-face="back"] a.k:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .22em;
}

/* left: the index card */
.panel[data-face="left"] .facts { inset: 0; }

.panel .row:nth-child(1) { --i: 0; }
.panel .row:nth-child(2) { --i: 1; }
.panel .row:nth-child(3) { --i: 2; }
.panel .row:nth-child(4) { --i: 3; }
.panel .row:nth-child(5) { --i: 4; }
.panel .row:nth-child(6) { --i: 5; }
.panel .row:nth-child(7) { --i: 6; }
.panel .row:nth-child(8) { --i: 7; }

.panel dt {
  left: 6%;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .049em;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  top: calc((.09 + var(--i) * .113) * var(--fs) - var(--asc-mono) * 1em);
}

.panel dd {
  left: 6%;
  font-size: .058em;
  top: calc((.15 + var(--i) * .113) * var(--fs) - var(--asc) * 1em);
}

.panel .row:last-child dd { color: var(--red); }

/* top */
.panel[data-face="top"] p {
  font-size: .46em;
  top: calc(.66 * var(--fs) - var(--asc) * 1em);
}

/* bottom: the hatch. the words sit on the ink plate the texture paints. */
.hatch {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  color: var(--paper);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}

/* a button centres whatever is inside it, so the words are placed by hand, on the texture's baseline */
.hatch span {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(.56 * var(--fs) - var(--asc-mono) * 1em);
  font-family: var(--mono);
  font-weight: 500;
  font-size: .085em;
  line-height: 1;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.hatch:hover span,
.hatch:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .3em;
}

.hatch:active { transform: translateY(.04em); }

/* ---------- focus ---------- */

.panel a:focus-visible,
.hatch:focus-visible,
.flat a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- the ink: the hatch dive ---------- */

.ink {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* ---------- the flat page: the six faces as paper type, for reduced motion or no WebGL ---------- */

.flat { display: none; }

html.no3d #stage,
html.no3d .faces { display: none; }

/* on the flat page the header has type passing under it, so it gets paper of its own */
html.no3d .top {
  padding-bottom: .9rem;
  background: var(--paper);
  transition: background-color 1.2s ease;
}

html.no3d .flat {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(4rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px));
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.45;
}

.flat-in {
  max-width: 40rem;
  margin: 0 auto;
}

.flat h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.flat h1 .note {
  display: block;
  margin-top: .25em;
  font-style: italic;
  font-size: .3em;
  letter-spacing: 0;
  color: var(--red);
}

.flat .f-under {
  margin: 1.5rem 0 0;
  max-width: 30ch;
}

.flat .f-model {
  margin: clamp(3.5rem, 9vw, 6rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
  font-size: clamp(1.7rem, 1rem + 2.8vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

.flat .f-model span { display: block; }

.flat .f-own {
  margin: clamp(3rem, 8vw, 5rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}

.flat .k {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}

.flat .f-own .v {
  margin: 1rem 0 0;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.flat .f-own a {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15em;
}

.flat .f-own a:hover,
.flat .f-own a:focus-visible { color: var(--ink); }

.flat .facts {
  margin: clamp(3rem, 8vw, 5rem) 0 0;
  border-bottom: 1px solid var(--ink);
}

.flat .row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 12rem) 1fr;
  gap: .5rem 1rem;
  padding: .8rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, var(--paper));
}

.flat .row:first-child { border-top-color: var(--ink); }

.flat dt {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  padding-top: .3em;
}

.flat dd { margin: 0; }

.flat .row:last-child dd { color: var(--red); }

.flat .f-top {
  margin: clamp(3.5rem, 10vw, 7rem) 0 0;
  font-size: clamp(3rem, 11vw, 7rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
}

.flat .f-bottom {
  margin: clamp(2.5rem, 7vw, 4rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}

.flat .f-bottom a {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: .8em 1.1em .7em 1.28em;
}

.flat .f-bottom a:hover,
.flat .f-bottom a:focus-visible { background: var(--red); }

@media (max-width: 479px) {
  .flat .row { grid-template-columns: 1fr; gap: .25rem; }
  .flat dt { padding-top: 0; }
}

/* ---------- reduced motion: the same as html.no3d, in case the script is late ---------- */

@media (prefers-reduced-motion: reduce) {
  #stage,
  .faces { display: none; }

  .top { padding-bottom: .9rem; background: var(--paper); }

  .flat {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(4rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px));
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    line-height: 1.45;
  }

  body, .under, .panel, .ink, .hatch { transition: none; }
}