/* Lobster's ground: TONEHOLD's language came from here (warm paper, soft ink, hierarchy by opacity, uppercase micro
   labels, an editorial serif, registration marks). Lobster's one colour is the wall of the room: terracotta. */
@font-face { font-family: 'LB Mono'; font-weight: 400; src: url(../fonts/JetBrainsMono-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'LB Mono'; font-weight: 500; src: url(../fonts/JetBrainsMono-Medium.woff2) format('woff2'); font-display: swap; }

:root {
  --paper: #FAF8F2;
  --paper-2: #F3F0E8;
  --paper-3: #E8E5DE;
  --ink: #1A1A1A;
  --night: #120D0B;
  --terra: #C4501C;
  --terra-deep: #9E3B12;
  --terra-soft: rgba(196, 80, 28, .10);
  --red: #8E2433;
  --line: rgba(26, 26, 26, .10);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'LB Mono', ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --edge: max(20px, env(safe-area-inset-left));
  --w: 1240px;
  --g1: #683922;
  --g2: #754020;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: .005em; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
::selection { background: var(--terra); color: var(--paper); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 3px; }

.micro { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 0; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
.todo { color: var(--terra); font-style: italic; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* corner registration marks, wide screens only */
.reg { position: fixed; width: 22px; height: 22px; opacity: .14; pointer-events: none; z-index: 60; }
.reg.tl { top: 18px; left: 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.reg.tr { top: 18px; right: 18px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.reg.bl { bottom: 18px; left: 18px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.reg.br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
@media (max-width: 1100px) { .reg { display: none; } }

.proto-note { position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .45; pointer-events: none; white-space: nowrap; background: rgba(250, 248, 242, .8); padding: 3px 8px; border-radius: 99px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }