/* =================================================================
   ODE TO SHELLY · THE LOOK OF THE WEBSITE (style.css)
   =================================================================

   HOW TO USE THIS FILE (for non-programmers)

   The words of the website are in the .html files. This file only
   decides how things look: sizes, spaces, fonts, colours, positions.

   It is divided into numbered sections (see CONTENTS below). To jump
   to one, search (Cmd+F) for its number and name, e.g. "6. HOME".
   Each page has two parts:
     ON A COMPUTER  the normal rules
     ON A PHONE     the rules inside "@media (max-width: 800px) { ... }"
                    only apply on screens up to 800 pixels wide, and
                    replace the computer value for the same thing.

   A rule looks like this:
     .wordmark { font-size: 8.6vw; }
     ^ which thing   ^ what      ^ the value you can change

   Units you will see:
     vw   % of the screen width (10vw = 1/10 of the screen; on an
          iPhone 10vw is about 39 pixels, on a laptop about 140)
     em   relative to the text size (2em = twice the text size)
     px   pixels (fixed, the same on every screen)
     a number alone on line-height = space between lines (1 = tight)

   Text inside the note marks (slash-star ... star-slash, like around
   this text) is a note for people; the browser skips it.
   Change the numbers, keep the ; at the end of each line and the
   { } brackets in pairs. If something breaks: VS Code > Source
   Control > Discard Changes brings back the last save point.

   Two layers (a design rule of the site):
     "noise"  decorative fragments, may be cut off or broken
     the rest = information, always readable and black

   CONTENTS
     1. COLOURS AND FONTS          the brand colours and the 3 typefaces
     2. BASICS                     the page itself, links, helpers
     3. MENU AND LOGO              top of every page
     4. NOISE                      the decorative fragments (captions,
                                   stray numbers, the big S, page number)
     5. SHARED PIECES              text columns and labels (Bridal, About)
     6. HOME                       index.html
     7. BRIDAL                     bridal.html, with the inquiry form
     8. COLLECTION                 collection.html
     9. ABOUT                      about.html
    10. CONTACT                    contact.html
    11. FOOTER                     bottom of every page (email, instagram)
    12. CALM MODE                  for visitors who turn off animations
    13. PAGE MISSING               404.html, for addresses that do not exist
   ================================================================= */

/* =================================================================
   1. COLOURS AND FONTS
   The brand's colours and typefaces, used everywhere. Changing a
   colour here changes it on every page.
   ================================================================= */

/* Hanken Grotesk: a free look-alike of Helvetica Neue (with its thin
   weights), stored on our own site in fonts/. Only computers and phones
   WITHOUT Helvetica Neue use it (Windows, Android): Macs and iPhones
   have Helvetica Neue and never download these files. */
@font-face {
  font-family: "Hanken Grotesk OTS";
  src: url("fonts/hanken-grotesk-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk OTS";
  src: url("fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colours */
  --ink: #111;            /* the black of all text */
  --paper: #fff;          /* the white background */
  --olive: #8a8600;       /* rare accent */
  --chartreuse: #c4c200;  /* rare accent (the big S, the small captions) */
  --pink: #f28ab9;        /* only for the blinking underscore */

  /* the three typefaces. Each device takes the first one it has.
     Keep Hanken Grotesk right after Helvetica Neue: Windows and Android
     quietly answer to "Helvetica" and "Arial" with their own fonts. */
  --sans: "Helvetica Neue", "Hanken Grotesk OTS", Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Times, serif;
  --mono: "Courier New", Courier, monospace;

  --body: clamp(16px, 1.25vw, 20px);   /* normal text size: 16 to 20 px */
  --gutter: clamp(20px, 2.4vw, 40px);  /* empty margin at the screen edges */
}

/* =================================================================
   2. BASICS
   The page itself, links, keyboard focus and small helpers.
   Rarely changed.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

/* ---------- reset / paper ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

html,
body { overflow-x: hidden; }

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

::selection { background: var(--chartreuse); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 60;
  padding: 8px 10px;
  background: var(--paper);
  font: 400 13px/1 var(--mono);
}
.skip:focus { top: 8px; }
/* ---------- roughened words (hand-set or by script.js) ----------
   Times renders smaller than Helvetica at the same size, so 1.12em
   Times reads as "same size, different typeface". Body range stays
   between .86em and 1.25em so paragraphs remain easy to read. */

.r   { line-height: 1; }
.r-t { font-family: var(--serif); font-weight: 400; font-size: 1.12em; }
.r-tl { font-family: var(--serif); font-weight: 400; font-size: 1.25em; }
.r-ts { font-family: var(--serif); font-weight: 400; font-size: .86em; }
.r-ti { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.16em; }
.r-a { font-family: var(--sans); font-weight: 400; font-size: 1.04em; }
.r-c { font-family: var(--mono); font-weight: 400; font-size: .92em; }
.r-o { color: var(--olive); }
/* ---------- sheet (the torn page) ---------- */

.sheet {
  position: relative;
  display: flow-root; /* overflow: clip alone does not stop margin collapse */
  overflow: hidden;
}
@supports (overflow: clip) {
  .sheet { overflow: clip; }
}
/* ----- on a phone ------------------------------------------------ */

@media (max-width: 800px) {
  :root { --gutter: 20px; }
  body { padding-bottom: 36px; }
  .sheet { padding: 0 var(--gutter); }
}

/* =================================================================
   3. MENU AND LOGO
   "Ode to Shelly" at the top left and the menu (/ BRIDAL / COLLECTION
   / ABOUT / CONTACT), the same on every page.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  padding: 22px var(--gutter) 0;
}

.logo {
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.logo .w-ode { font-family: var(--serif); font-weight: 400; }
.logo .w-to {
  font: italic 200 .56em var(--sans);
  margin: 0 .08em;
}
.logo .w-shelly {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.9em;
  font: 400 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.menu a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}
.menu .sl {
  font-family: var(--mono);
  letter-spacing: 0;
  margin-right: .4em;
}
.menu a:hover,
.menu a:focus-visible { text-decoration: underline; }

/* the active page jumps typeface, like a word in the one-pager */
.menu a[aria-current="page"] {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .05em;
}
/* ----- on a phone ------------------------------------------------ */

@media (max-width: 800px) {
  .masthead { gap: 12px 20px; padding-top: 18px; }
  .logo { font-size: 22px; }
  .menu { gap: 0 1.4em; }
  .menu a { padding: 10px 0; }
}

/* =================================================================
   4. NOISE: THE DECORATIVE FRAGMENTS
   How the decorations look on every page: the small olive and
   chartreuse captions, the stray numbers and words, the >> and /
   marks, the half-cut page number at the bottom, and the "misprint"
   shake of the big titles when the mouse touches them.
   WHERE each one sits is set in the section of its page.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.noise {
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* credit-like caption fragments, cut at the paper edge */
.cap {
  font: 400 7px/1.42 var(--sans);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--chartreuse);
  white-space: nowrap;
}
.cap > span {
  display: block;
  min-height: 1.42em;
  transform: translateX(var(--cut, 0px));
}
.cap b { font-weight: 700; color: var(--olive); }
.cap .d { color: var(--olive); }

/* a caption set sideways, like the photo credits in the reference spread */
.cap--v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* tiny annotation, like "KL." and "Keret: 11dsell Lad" in the one-pager */
.micro { line-height: 1; color: var(--olive); }
.micro .m1 { display: block; font: 400 11px/1 var(--sans); }
.micro .m2 {
  display: block;
  margin: 18px 0 0 -3.2em;
  font: 400 5px/1.6 var(--mono);
  letter-spacing: .12em;
}

/* orphan numbers and words */
.orphans {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  color: var(--ink);
}
.orphans--c { align-items: center; }
.orphans--l { align-items: flex-start; }
.o-ti { font: italic 400 1.45vw var(--serif); }
.o-h { font: 400 .95vw var(--sans); letter-spacing: .01em; }
.o-ts { font: 400 .8vw var(--serif); }
.o-tl { font: 400 2.25vw var(--serif); letter-spacing: -.01em; }
.o-c { font: 400 1.3vw var(--mono); letter-spacing: .08em; }
.o-ho { font: 400 1.25vw var(--sans); color: var(--olive); }

.glyph { font: 400 13px/1 var(--mono); color: var(--ink); }
.glyph--o { color: var(--olive); }

/* half a page number, cut by the bottom of the sheet (the "33" on page 2) */
.folio {
  bottom: 0;
  font: 700 3.6vw/1 var(--sans);
  color: var(--olive);
  transform: translateY(56%);
}

/* ---------- two details borrowed from Broken Browser ----------
   Used sparingly: at most one or two per page. */

/* ">>" and a blinking pink underscore, a prompt left open */
.prompt {
  font: 400 13px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.caret {
  color: var(--pink);
  animation: blink 1.06s steps(1, end) infinite;
}
/* ---------- misprint on hover ---------- */

.mis { display: inline-block; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mis:hover { animation: misprint .36s steps(3, end) 1; }
}

@keyframes misprint {
  0%   { transform: translate(-2px, 1px); text-shadow: 3px -1px 0 var(--chartreuse); }
  40%  { transform: translate(1px, -1px); text-shadow: -2px 1px 0 var(--olive); }
  80%  { transform: translate(0, 1px); text-shadow: 1px 0 0 var(--chartreuse); }
  100% { transform: none; text-shadow: none; }
}
/* ----- on a phone: sizes of the stray numbers and the page number --- */

@media (max-width: 800px) {
  .o-ti { font-size: 20px; }
  .o-h { font-size: 12px; }
  .o-ts { font-size: 11px; }
  .o-tl { font-size: 30px; }
  .o-c { font-size: 17px; }
  .o-ho { font-size: 16px; }
  .folio { font-size: 12vw; }
}

/* =================================================================
   5. SHARED PIECES
   Text columns and labels used on Bridal and About.
   col--l = left column, col--r = right column, col--m = middle.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.block { position: relative; }

.col { position: relative; }
.col--l { margin-left: 6vw; width: 36vw; }
.col--r { margin-left: 52vw; width: 37vw; }
.col--m { margin-left: 19vw; width: 32vw; }

.label {
  margin-bottom: 1.05em;
  font: italic 700 14px/1.25 var(--serif);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.just {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.indent { text-indent: 3.4em; }
/* ----- on a phone: the columns become one column ----------------- */

@media (max-width: 800px) {
  .col--l,
  .col--r,
  .col--m { margin-left: 0; width: auto; }
  .just { text-align: left; }
}

/* =================================================================
   6. HOME (index.html)
   The big "Ode to SHELLY", the "Contemporary bridalwear & beyond"
   line, the intro sentence, the BRIDAL / COLLECTION links, and where
   the decorations sit.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--home { min-height: 68vw; }

.s-stack {
  left: -.9vw;
  top: 2.2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.s-stack .s { display: block; }
.s-sm {
  margin-left: 1.3vw;
  font: 400 3.4vw/.8 var(--mono);
  color: var(--olive);
}
.s-lg {
  margin-top: 3.4vw;
  font: 100 15.5vw/.78 var(--sans);
  color: var(--chartreuse);
}

.wordmark {
  margin: 9.5vw 0 0 21vw;
  font-weight: 400;
  font-size: 8.6vw;
  line-height: .92;
  letter-spacing: -.012em;
}
.wordmark .w-ode { font-family: var(--serif); }
.wordmark .w-to {
  font: italic 200 .2em var(--sans);
  letter-spacing: .02em;
  margin: 0 .12em 0 .06em;
}
.wordmark .w-shelly {
  font-family: var(--serif);
  text-transform: uppercase;
}

.tagline {
  margin: 2.2vw 0 0 29vw;
  font: 400 2.05vw/1.18 var(--serif);
}
.tagline .ti { font-style: italic; }
.tagline .tc { text-transform: uppercase; letter-spacing: .01em; }
.tagline .ai { font: italic 400 .88em var(--sans); }
.tagline .city {
  display: block;
  margin: .2em 0 0 9.4em;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lede {
  margin: 5.6vw 0 0 58vw;
  width: 26vw;
  min-width: 260px;
}

.entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 3.4vw 0 0 21vw;
  font: 400 15px/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.entry li:nth-child(2) { margin-left: 5.2em; }
.entry a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}
.entry a:hover,
.entry a:focus-visible { text-decoration: underline; }
.entry .arr { margin-left: .45em; letter-spacing: 0; }
.entry .prompt { margin-left: 2.2em; }
/* home noise positions (vw, so the composition scales like a printed page) */
.sheet--home .micro { left: 69vw; top: 2.4vw; }
.cap--home { left: 0; top: 49vw; }
.cap--home-r { left: 87vw; top: 25vw; }
.cap--home-by { left: 8vw; top: 57.2vw; }
.orphans--home-a { left: 63vw; top: 54.4vw; }
.orphans--home-b { left: 11.6vw; top: 60vw; }
.sheet--home .g-1 { left: 88vw; top: 44vw; }
.sheet--home .g-2 { left: 47vw; top: 62.4vw; }
.sheet--home .folio { left: 44vw; }
/* ----- on a phone ------------------------------------------------ */

@media (max-width: 800px) {
  /* home
     SPACING ON THE PHONE: play with these numbers (bigger = more space).
     vw = % of the screen width: 10vw is about 39px on an iPhone.
     The first one is between "Ode to Shelly" and "Contemporary...". */
  .sheet--home {
    --space-tagline: 30vw;      /* above "Contemporary bridalwear & beyond" */
    --tagline-lines: 1.18;     /* line height inside that text (1.18 = as before) */
    --space-city: .2em;        /* above "Copenhagen" (.2em = as before) */
    --space-lede: 30vw;        /* above "Contemporary bridalwear for women..." */
    --lede-lines: 1.7;         /* line height inside that sentence */
    --space-buttons: 18vw;     /* above BRIDAL -> */
    --space-between-buttons: 16vw; /* between BRIDAL -> and COLLECTION -> */
    --space-captions: 40vw;    /* above the small olive captions */
    --space-numbers: 30vw;     /* above 2027 / VEIL / 210 */
  }
  .sheet--home { min-height: 0; padding-bottom: 30vw; }
  .s-stack { left: -3vw; top: 23vw; }
  .s-sm { margin-left: 3.4vw; font-size: 7vw; }
  .s-lg { margin-top: 3vw; font-size: 31vw; }

  .wordmark { margin: 37vw 0 0 20vw; font-size: 18.5vw; line-height: .9; } /* size of "Ode to SHELLY": was 14.4vw; at 16.5vw SHELLY reaches the right margin, above about 17.5vw it runs off the screen */
  .wordmark .w-to { font-size: .26em; }
  .wordmark .w-shelly { display: block; }
  .tagline { margin: var(--space-tagline) 0 0 20vw; font-size: 5.5vw; line-height: var(--tagline-lines); }
  .tagline .city { margin: var(--space-city) 0 0 3.4em; }
  .lede { margin: var(--space-lede) 0 0; width: auto; min-width: 0; line-height: var(--lede-lines); }
  .entry { margin: var(--space-buttons) 0 0; gap: var(--space-between-buttons); font-size: 14px; }

  .sheet--home .micro { left: auto; right: 7vw; top: 4vw; }
  .cap--home {
    position: relative;
    left: auto;
    top: auto;
    margin: var(--space-captions) 0 0 calc(var(--gutter) * -1);
  }
  .orphans--home-a {
    position: relative;
    left: auto;
    top: auto;
    margin: var(--space-numbers) 0 0 50vw;
  }

  .cap--home-r,
  .cap--home-by,
  .orphans--home-b,
  .sheet--home .g-1,
  .sheet--home .g-2 { display: none; }
}

/* =================================================================
   7. BRIDAL (bridal.html)
   From top to bottom: the big "Bridal" title and intro, The Shelly
   Custom, semi-custom and the collection, the 4 process steps,
   "Getting married in 2027?", and the inquiry form.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--bridal { padding-bottom: 12vw; }
/* opener */
.opener { padding-top: 4.6vw; }

.title {
  margin-left: .35vw;
  font-weight: 400;
}
.title .t1 {
  display: block;
  font: 400 9.2vw/.9 var(--serif);
  letter-spacing: -.012em;
}
.title .t2 {
  display: block;
  margin-left: 11vw;
  font: 100 9.2vw/.98 var(--sans);
  letter-spacing: -.035em;
}
.title .t2b {
  font: italic 400 .36em var(--serif);
  letter-spacing: 0;
  margin-left: .04em;
}

/* the intro starts in the left column and "jumps" into the right one,
   like "In the first year..." on page 4 of the one-pager */
.intro { margin-top: 5vw; }
.intro p {
  text-indent: -40vw;
}

.sheet--bridal .micro { left: 74vw; top: 3vw; }
.orphans--intro { left: -24vw; top: 4.6vw; }

/* the shelly custom */
.custom { margin-top: 9vw; }

.lead-in { margin-bottom: 1em; }

.slash-list {
  margin: 0 0 1.2em;
}
.slash-list li { padding: .14em 0; }
.slash-list li:nth-child(3) { padding-left: 1.1em; }
.slash-list li:nth-child(4) { padding-left: .4em; }
.slash-list li:nth-child(5) { padding-left: 1.8em; }
.slash-list li:nth-child(6) { padding-left: .8em; }
.slash-list .sl {
  font-family: var(--mono);
  font-weight: 400;
  margin-right: .55em;
}
.small-print { font-size: .94em; }

.cap--custom { left: 76vw; top: 5.4vw; }
.orphans--custom { left: 55vw; top: 18vw; }

/* semi-custom + the collection */
.semi { margin-top: 7vw; }
.cap--semi { left: 0; top: -1.2vw; }

.collection { margin-top: 7.5vw; }
.orphans--coll { left: 67vw; top: -1.6vw; }

/* the process: steps drift diagonally down the page */
.process { margin-top: 10vw; }
.process > .label { margin-left: 6vw; }

.steps { margin-top: 1.4vw; }
.steps li { width: 19.5vw; min-width: 190px; }
.steps li:nth-child(1) { margin-left: 6vw; }
.steps li:nth-child(2) { margin-left: 27vw; margin-top: -3.4vw; }
.steps li:nth-child(3) { margin-left: 48vw; margin-top: -3.4vw; }
.steps li:nth-child(4) { margin-left: 69vw; margin-top: -3.4vw; }

.step-title {
  font: 400 13px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .7em;
}
.step-title .num {
  display: block;
  margin-bottom: .12em;
  font: 400 7.6vw/1 var(--serif);
  letter-spacing: -.02em;
  text-transform: none;
}
.steps li:nth-child(even) .num { font-style: italic; }
.step-title .sl { font-family: var(--mono); letter-spacing: 0; margin-right: .5em; }

.cap--process { left: 73vw; top: 3.6vw; }
.cap--process-v { left: 2vw; top: 20vw; }
.process .g-3 { left: 44vw; top: 13vw; }
.process .g-4 { left: 91vw; top: 50vw; }

/* getting married in 2027? */
.married { margin-top: 11vw; }
.married h2 {
  margin-left: 8vw;
  font-weight: 400;
  line-height: .96;
}
.married .g1 { font: 100 5.2vw var(--sans); letter-spacing: -.02em; }
.married .g2 { font: italic 400 7.4vw var(--serif); margin-left: .1em; }
.married .g3 { font: 400 1.6vw var(--mono); }
.married .g4 { font: 400 11vw var(--serif); letter-spacing: -.025em; }

.married .col { margin-top: 2.6vw; }
.married p { font-size: 1.1em; }

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: .7em;
  margin-top: 1.4em;
  padding: 12px 0;
  font: 400 15px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.cta .br { font: 400 1.3em/1 var(--mono); letter-spacing: 0; }
.cta .t {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
}
.cta:hover .t { text-decoration-thickness: 2px; }

.orphans--married { left: 80vw; top: -3vw; }

/* ---------- the inquiry form, printed on paper ---------- */

.inquiry {
  margin: 12vw 0 0 24vw;
  width: 50vw;
  scroll-margin-top: 3vw;
}

.form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.form-head h2 {
  font: 400 26px/1 var(--serif);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.form-ref {
  font: 400 11px/1 var(--mono);
  letter-spacing: .06em;
}
.form-note {
  margin: 12px 0 38px;
  font: italic 400 15px/1.4 var(--serif);
}

.form { --lblw: 210px; --gap: 22px; }

.field {
  display: grid;
  grid-template-columns: var(--lblw) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: 30px;
}
.field > .err { grid-column: 2; }

.field--stack { grid-template-columns: minmax(0, 1fr); }
.field--stack > .err { grid-column: 1; }
.field--stack .lbl { margin-bottom: 6px; }

.lbl {
  padding-bottom: .4em;
  font: 400 14px/1.3 var(--serif);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.lbl .opt-note {
  font-style: italic;
  letter-spacing: .01em;
  text-transform: none;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="date"],
.form textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: .3em 0 .22em;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 17px/1.4 var(--mono);
  -webkit-appearance: none;
  appearance: none;
}
.form input[type="date"] {
  max-width: 13.5em;
  min-height: 2em;
}
.form input:disabled {
  color: rgba(17, 17, 17, .4);
  border-bottom-style: dotted;
}

/* ruled lines, like the blank lines on a printed form */
.form textarea {
  min-height: 170px;
  padding: 0;
  border-bottom: 0;
  line-height: 34px;
  resize: vertical;
  background-image: linear-gradient(to bottom, transparent 33px, var(--ink) 33px);
  background-size: 100% 34px;
  background-attachment: local;
}

.date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 28px;
}

/* ( ) radio options and [ ] checkbox: real inputs, restyled */
.field--choice { display: block; }
.field--choice > legend {
  float: left;
  width: var(--lblw);
  margin-right: var(--gap);
  padding-top: 3px;
}
.opts {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 34px;
}
.field--choice > .err {
  clear: both;
  margin-left: calc(var(--lblw) + var(--gap));
}

.opt,
.tick {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  cursor: pointer;
}
.opt { font: 400 18px/1.3 var(--serif); }
.tick { font: italic 400 16px/1.3 var(--serif); padding-bottom: .3em; }

.opt input,
.tick input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.mark {
  font: 400 16px/1 var(--mono);
  font-style: normal;
  white-space: pre;
}
.opt .mark::before { content: "( )"; }
.opt input:checked + .mark::before { content: "(x)"; }
.tick .mark::before { content: "[ ]"; }
.tick input:checked + .mark::before { content: "[x]"; }

.opt input:focus-visible + .mark,
.tick input:focus-visible + .mark {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.opt:hover .mark,
.tick:hover .mark { text-decoration: underline; }

/* errors: readable, black, typewritten */
.err {
  margin-top: 8px;
  font: 400 14px/1.4 var(--mono);
  color: var(--ink);
}
.err[hidden] { display: none; }
.is-invalid input[type="text"],
.is-invalid input[type="email"],
.is-invalid input[type="date"] {
  border-bottom: 2px dashed var(--ink);
}
.is-invalid textarea {
  background-image: linear-gradient(to bottom, transparent 32px, var(--ink) 32px);
}
.is-invalid .mark { font-weight: 700; }

.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
}
.send {
  padding: 14px 24px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1 var(--mono);
  cursor: pointer;
}
.send:hover { background: var(--ink); color: var(--paper); }
.send:disabled { opacity: .5; cursor: default; }
/* a trap for spam robots: invisible to people */
.botcheck { display: none; }

.form-print {
  position: static;
  font: 400 7px/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chartreuse);
}
.form-print b { color: var(--olive); font-weight: 700; }

.received {
  padding: 3vw 0 1vw;
  font: 400 clamp(22px, 2.4vw, 34px)/1.3 var(--mono);
}
.received:focus,
.received:focus-visible { outline: none; } /* not interactive, focus only moves the reader here */
.blink { animation: blink 1.06s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.sheet--bridal .folio { left: 61vw; }
/* ----- on a small laptop (801 to 1120 pixels wide) --------------- */

@media (max-width: 1120px) and (min-width: 801px) {
  .form { --lblw: 160px; }
  .inquiry { margin-left: 16vw; width: 64vw; }
  .opts { grid-template-columns: max-content; }
  .steps li { width: 19vw; min-width: 0; }
}
/* ----- on a phone ------------------------------------------------ */

@media (max-width: 800px) {
  .opener { padding-top: 10vw; }
  .title { margin-left: -1vw; }
  .title .t1 { font-size: 15vw; }
  .title .t2 { margin-left: 10vw; font-size: 15vw; }

  .intro { margin-top: 10vw; }
  .intro .col { margin-left: 16vw; }
  .intro p { text-indent: -16vw; text-align: left; }

  .sheet--bridal .micro { left: auto; right: 6vw; top: 3vw; }

  .custom { margin-top: 16vw; }
  .semi { margin-top: 14vw; }
  .semi .col { margin-left: 16vw; }
  .collection { margin-top: 12vw; }
  .collection .col { margin-left: 6vw; }

  .cap--semi {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 7vw calc(var(--gutter) * -1);
  }

  .process { margin-top: 18vw; }
  .process > .label { margin-left: 0; }
  .steps li { width: auto; min-width: 0; margin-top: 8vw !important; }
  .steps li:nth-child(1) { margin-left: 0; margin-top: 4vw !important; }
  .steps li:nth-child(2) { margin-left: 9vw; }
  .steps li:nth-child(3) { margin-left: 18vw; }
  .steps li:nth-child(4) { margin-left: 27vw; }
  .step-title .num { font-size: 17vw; }

  .cap--process {
    position: relative;
    left: auto;
    top: auto;
    margin: 12vw 0 0 50vw;
  }

  .married { margin-top: 18vw; }
  .married h2 { margin-left: 0; }
  .married .g1 { font-size: 10vw; }
  .married .g2 { font-size: 13vw; }
  .married .g3 { font-size: 4vw; }
  .married .g4 { font-size: 21vw; }
  .married .col { margin: 5vw 0 0 6vw; }
  .cta { font-size: 13px; letter-spacing: .1em; gap: .5em; }
  .cta .t { line-height: 1.9; text-underline-offset: .4em; }
  .sheet--bridal { padding-bottom: 30vw; }

  .inquiry { margin: 22vw 0 0; width: auto; }
  .form-head h2 { font-size: 22px; }

  .field,
  .field--stack { grid-template-columns: minmax(0, 1fr); }
  .field > .err { grid-column: 1; }
  .lbl { margin-bottom: 2px; }
  .field--choice > legend { float: none; width: auto; margin: 0 0 12px; }
  .field--choice > .err { margin-left: 0; }
  .opts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .opt { font-size: 19px; }
  .form input[type="date"] { max-width: none; }
  .send { width: 100%; }

  /* hidden on a phone */
  .cap--custom,
  .orphans--custom,
  .orphans--coll,
  .orphans--intro,
  .cap--process-v,
  .process .g-3,
  .process .g-4,
  .orphans--married { display: none; }
}

/* =================================================================
   8. COLLECTION (collection.html)
   The big "Collection" title, the 20 lookbook pictures and the
   pieces' texts. The August 2026 lookbook, all 20 pages in order,
   scattered down the page (references: docs/source-images/collection
   page reference/). Each piece's text stands against its photo's edge.
   Each picture's place (--x, --w, --y) is set in collection.html.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--coll { padding-bottom: 13vw; }

.coll-open { padding-top: 4.6vw; }

.coll-title {
  margin-left: 30vw;
  font-weight: 400;
}
.coll-title .k1 {
  display: block;
  margin: 0 0 .6vw .6vw;
  font: italic 400 2.3vw/1 var(--serif);
}
.coll-title .k2 {
  font: 400 10vw/.86 var(--serif);
  letter-spacing: -.015em;
}
.coll-title .k3 {
  font: 100 .9em/1 var(--sans);
  letter-spacing: -.045em;
}

.coll-lede {
  margin: 4.2vw 0 0 8vw;
  width: 29vw;
  min-width: 260px;
  font-size: 1.3em;
  line-height: 1.42;
}

.sheet--coll .micro { left: 16vw; top: 5.6vw; }
.cap--coll-r { left: 83vw; top: 15.4vw; }
.cap--coll { left: 0; top: calc(100% + 5vw); }

/* the lookbook: each picture on its own line, placed by --x (left
   edge), --w (width) and --y (space above), in vw, set in the HTML.
   Pictures may run off the right edge, like the references. */
.look {
  display: block;
  position: relative;
  width: calc(var(--w) * 1vw);
  max-width: none;
  height: auto;
  margin: calc(var(--y, 8) * 1vw) 0 0 calc(var(--x) * 1vw);
}
.look img { display: block; width: 100%; height: auto; }

/* several pictures side by side, sharing one height */
.look--row { display: flex; gap: .5vw; }
.look--row img { flex: var(--r) 1 0; width: 0; min-width: 0; }

/* a piece: its text stands against the photo's edge, bottom-aligned,
   to the right (piece--r) or to the left (piece--l) */
.piece-text {
  position: absolute;
  bottom: 0;
  width: 21vw;
  min-width: 230px;
}
.piece--r .piece-text { left: calc(100% + 1.6vw); }
.piece--l .piece-text { right: calc(100% + 1.6vw); }
.piece-text .fig-note { margin: 0 0 1.2em; }

/* the picture's number, a note in the gutter */
.fig-note {
  margin-top: .8em;
  font: 400 11px/1.35 var(--mono);
  letter-spacing: .02em;
  color: var(--olive);
}

.piece-name {
  margin-bottom: .45em;
  font: 200 clamp(24px, 2.3vw, 38px)/1.1 var(--sans);
  letter-spacing: -.01em;
}
.piece-name .pn {
  display: block;
  margin-bottom: .55em;
  font: 400 13px/1 var(--mono);
  letter-spacing: .06em;
}
.piece-name .pn .sl { margin-left: .15em; }

.piece-detail { font: italic 400 1.04em/1.4 var(--serif); }

.piece-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6em;
  margin-top: .5em;
}
.price {
  padding: .1em 0 .5em !important;
  font-weight: 400;
}
.piece-meta .price {
  font: 400 1.5em/1.1 var(--serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.piece-meta s.price { text-decoration-thickness: 1px; }
.piece-meta .sl { font-family: var(--mono); font-weight: 400; }
.piece-meta .status {
  font: 400 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ask {
  display: inline-block;
  margin-top: .8em;
  padding: 6px 0;
  font: 400 14px/1.2 var(--mono);
  text-underline-offset: .32em;
}
.ask:hover { text-decoration-thickness: 2px; }

.orphans--coll-a { left: calc(100% + 13vw); top: .6vw; }
.orphans--coll-b { left: calc(100% + 4vw); top: 5vw; }

.webshop {
  margin: 8vw 0 0 64vw;
  font: 400 14px/1.3 var(--mono);
}

.cap--coll-v { left: 95vw; top: 64vw; }
.sheet--coll .g-5 { left: 89vw; bottom: 20vw; }
.sheet--coll .folio { left: 27vw; }

/* ----- on a phone ------------------------------------------------ */
@media (max-width: 800px) {
  .coll-open { padding-top: 10vw; }
  .coll-title { margin-left: 4vw; }
  .coll-title .k1 { margin: 0 0 1.4vw 1vw; font-size: 5.6vw; }
  .coll-title .k2 { font-size: 18vw; }
  .coll-lede { margin: 9vw 0 0; width: auto; min-width: 0; font-size: 1.2em; }

  .sheet--coll .micro { left: auto; right: 7vw; top: 4vw; }
  .cap--coll {
    position: relative;
    left: auto;
    top: auto;
    margin: 12vw 0 0 calc(var(--gutter) * -1);
  }

  /* lookbook: one picture under the other, widths taking turns;
     a piece's text sits under its photo */
  .look { width: 100%; margin: 14vw 0 0; }
  .lookbook > .look:nth-child(3n+2) { width: 76%; margin-left: 24%; }
  .lookbook > .look:nth-child(3n) { width: 88%; }
  .look--row { display: block; }
  .look--row img { width: 100%; margin-top: 3vw; }
  .look--row img:first-child { margin-top: 0; }
  .piece-text,
  .piece--r .piece-text,
  .piece--l .piece-text { position: static; width: auto; min-width: 0; margin-top: 5vw; }

  .piece-name { font-size: 27px; }

  .webshop { margin: 18vw 0 0 20vw; }

  .cap--coll-r,
  .cap--coll-v,
  .orphans--coll-a,
  .orphans--coll-b,
  .sheet--coll .g-5 { display: none; }
}

/* =================================================================
   9. ABOUT (about.html)
   The designers' mockup (docs/source-images/imagery/Screenshot
   2026-10-02 at 11.37.21.png): a big "About / US" in the right half,
   the intro under it, the left half empty but for a few stray marks.
   Below: the story of Shelly, our approach, the names (credits).
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--about { padding-bottom: 15vw; }

/* title and intro share one left edge, about half-way across;
   "About" is set exactly like "Collection" (same size, same misprint
   on hover), its big letters at the same height as "Coll" */
.about-open { padding-top: 9.2vw; }

.about-title {
  margin-left: 51vw;
  font-weight: 400;
  line-height: 1;
}
.about-title .t1 {
  font: 400 10vw/.86 var(--serif);
  letter-spacing: -.015em;
}
.about-title .t2 {
  font: 100 .9em/1 var(--sans);
  letter-spacing: -.045em;
}
.about-title .t3 {
  display: block;
  margin-top: .6vw;
  font: 100 9vw/.86 var(--sans);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.intro-text { margin: 2.9vw 0 0 51vw; width: 36vw; }
.intro-text p { font-size: 1.12em; }
.intro-text p + p { margin-top: .9em; }
.nw { white-space: nowrap; }

.about-open .micro { left: 88vw; top: calc(100% - 9.6vw); }
.glyph--c { color: var(--chartreuse); }
.about-open .g-7 { left: 24.8vw; bottom: 2.2vw; }
.about-open .g-8 { left: 14.4vw; bottom: -2vw; color: #888; }
.about-open .g-9 { left: 42.8vw; bottom: -9.7vw; }
/* the sideways olive caption down the left edge (like on Bridal) */
.cap--about-v { left: 2vw; top: 13vw; }

/* the story of shelly */
.shelly { margin-top: 9.5vw; }
.shelly .col--l { width: 30vw; }
.orphans--shelly { left: 50vw; top: 6.4vw; }

/* our approach: the lead-in starts far left and the text runs on in
   the right column, like "UPCYCLING, RETHINKING AND REPUR- POSING:"
   on page 5 of the one-pager */
.making { margin-top: 15vw; }
.making .col--r { margin-left: 57vw; width: 33vw; }
.jump { text-indent: -41vw; }
.jump .lead {
  font: italic 400 .84em var(--serif);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cap--making { left: 0; top: calc(100% + 5vw); }
.orphans--making { left: 25vw; top: 10vw; }

/* masthead credits: name, role underneath */
.credits-block { margin: 18vw 0 0 44vw; width: 48vw; }
.credits { margin: .4em 0 0; }
.credit { margin-bottom: 4.6vw; }
.credit + .credit { margin: 0 0 0 16vw; }
.credits dt {
  font: 400 clamp(24px, 2.5vw, 40px)/1.1 var(--serif);
  letter-spacing: -.005em;
}
.credits dd {
  margin: .5em 0 0;
  font: 400 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.credits dd .sl { font-family: var(--mono); letter-spacing: 0; margin: 0 .2em; }
.cap--credits { left: -30vw; top: calc(100% + 3vw); }

.sheet--about .g-6 { left: 30vw; bottom: 22vw; }
.sheet--about .folio { left: 71vw; }

/* ----- on a phone ------------------------------------------------ */
@media (max-width: 800px) {
  .about-open { padding-top: 10vw; }
  .about-title { margin-left: 30vw; }
  .about-title .t1 { font-size: 18vw; }
  .about-title .t3 { margin-top: 1.4vw; font-size: 16.2vw; }
  .intro-text { margin: 12vw 0 0 8vw; width: auto; }
  .intro-text p { font-size: 1.06em; }

  .sheet--about .just { -webkit-hyphens: manual; hyphens: manual; }

  .shelly { margin-top: 22vw; }
  .shelly .col--l { width: auto; }
  .making { margin-top: 20vw; }
  .making .col--r { margin-left: 8vw; width: auto; }
  .jump { text-indent: -8vw; }
  .cap--making {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 10vw calc(var(--gutter) * -1);
  }

  .credits-block { margin: 26vw 0 0 4vw; width: auto; }
  .credit { margin-bottom: 8vw; }
  .credit + .credit { margin-left: 10vw; }

  /* hidden on a phone */
  .about-open .micro,
  .about-open .g-7,
  .about-open .g-8,
  .about-open .g-9,
  .cap--about-v,
  .orphans--shelly,
  .orphans--making,
  .cap--credits,
  .sheet--about .g-6 { display: none; }
}

/* =================================================================
   10. CONTACT (contact.html)
   A short letter typed on a typewriter and slipped into the
   magazine: Courier throughout, one narrow left-aligned column,
   generous margins, a couple of typed corrections. The letter is
   the design; on a computer, two groups of stray numbers and words
   in the margins tie it to the other pages.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--contact { padding-bottom: 13vw; }

.letter {
  position: relative;
  /* how wide the letter is (ch = one typed letter). 37 = the longest
     typed line ("xxxxx custom look, a collaboration or"), so the line under
     the email ends exactly where the text does. Change the text, check
     that line again. */
  width: min(100%, 37ch);
  margin: 7.4vw 0 0 31vw;   /* a little left of the page centre */
  font: 400 clamp(17px, 1.3vw, 21px)/1.62 var(--mono);
  /* a little ink spread, like a ribbon pressed into paper */
  text-shadow: 0 0 .5px rgba(17, 17, 17, .55);
}
/* one blank typed line between paragraphs */
.letter > p + p,
.letter > h1 + p { margin-top: 1.62em; }

.letter-date {
  margin-bottom: 3.24em;
  text-align: right;
  /* the date is the one line not typed: Helvetica at its thinnest */
  font-family: var(--sans);
  font-weight: 100;
  letter-spacing: .02em;
}

/* the subject line: typed caps, underlined with the underscore key */
.letter-re {
  margin: 0 0 1.62em;
  font: 400 1.18em/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.letter-re .re { letter-spacing: .04em; }

/* typed corrections: the word overtyped with x's (monospace, so they
   land exactly on the letters). Hidden from screen readers in the HTML. */
.xout {
  position: relative;
  display: inline-block;
  color: rgba(17, 17, 17, .6);
  text-decoration: none;
  white-space: nowrap;
}
.xout::after {
  content: attr(data-x);
  position: absolute;
  left: .05em;
  top: -.03em;
  color: var(--ink);
}

/* information layer: the email, typed larger on a filled-in line */
.letter > .letter-mail { margin-top: 1em; }
.letter-mail a {
  display: block;
  padding: .12em 0 .16em;
  font-size: 1.6em;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ink);
  overflow-wrap: anywhere;
}
.letter-mail a:hover { box-shadow: inset 0 -2px 0 var(--ink); }

.letter > .letter-ig { margin-top: 1em; }
.letter-ig a { text-underline-offset: .2em; }
.letter-ig a:hover { text-decoration-thickness: 2px; }

.letter > .letter-ps { margin-top: 2.4em; }
.letter > .letter-cta { margin-top: .5em; }
/* the inquiry link jumps typeface to Times italic, like the signature */
.letter-cta a {
  display: inline-block;
  padding: .3em 0;
  font: italic 400 1.4em/1.2 var(--serif);
  text-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.letter-cta a:hover { text-decoration-thickness: 2px; }
.letter-cta .arr { letter-spacing: 0; }

/* sign-off: the signature jumps typeface, like the one-pager does */
.letter > .letter-close { margin-top: 3.24em; }
.letter > .letter-sign {
  margin-top: .3em;
  font: italic 400 1.9em/1.15 var(--serif);
  text-shadow: none;
}
.letter-sign .amp { font-size: .8em; }
.letter > .letter-from { margin-top: .3em; font-size: .86em; }

.letter > .letter-cc {
  position: relative;
  margin-top: 4.2em;
  font: 400 11px/1.3 var(--mono);
  letter-spacing: .04em;
  color: var(--olive);
  text-shadow: none;
}

.sheet--contact .folio { left: 64vw; }

/* the stray numbers and words: left of the letter (placed on the page)
   and right of it (placed from the letter's right edge, so it never
   touches the text) */
.orphans--contact-a { left: 12vw; top: 21vw; }
.orphans--contact-b { left: calc(100% + 9vw); top: 29vw; }

/* ----- on a phone ------------------------------------------------ */
@media (max-width: 800px) {
  .sheet--contact { padding-bottom: 28vw; }
  .letter {
    width: auto;
    margin: 13vw 0 0;
    font-size: 16px;
    line-height: 1.6;
  }
  .letter-date { margin-bottom: 2.6em; }
  .letter-re { font-size: 1.1em; }
  .letter-mail a { font-size: min(1.5em, 6vw); }
  .letter-cta a { font-size: 1.3em; }
  .letter > .letter-close { margin-top: 2.6em; }
  .sheet--contact .folio { left: 52vw; }

  /* hidden on a phone */
  .orphans--contact-a,
  .orphans--contact-b { display: none; }
}

/* =================================================================
   11. FOOTER
   The line at the bottom of every page: email / instagram / Copenhagen.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-left: 52vw;
  padding: 3.4vw var(--gutter) 70px 0;
  font-size: 15px;
}
.colophon .sep { font-family: var(--mono); font-weight: 400; }
.colophon .city { font: italic 400 1.12em var(--serif); }
/* the imprint: who made the site, a tiny typed line on its own row,
   like the printer's line at the back of a magazine */
.imprint {
  flex-basis: 100%;
  margin-top: 1.4em;
  font: 400 10px/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--olive);
}
/* ----- on a phone ------------------------------------------------ */

@media (max-width: 800px) {
  .colophon { margin-left: 0; padding: 12vw var(--gutter) 40px; }
}

/* =================================================================
   12. CALM MODE
   Visitors who switched off animations on their device (an
   accessibility setting) get no blinking, no shaking, no smooth scroll.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =================================================================
   13. PAGE MISSING (404.html)
   Shown by Cloudflare at any address that does not exist. Set like
   the other page titles (big Times, thin Helvetica), one sentence
   with links back, a few fragments.
   ================================================================= */

/* ----- on a computer ------------------------------------------- */

.sheet--lost { min-height: 46vw; padding-bottom: 12vw; }

.lost-title {
  margin: 9.2vw 0 0 30vw;
  font-weight: 400;
  line-height: 1;
}
.lost-title .t1 {
  font: 400 10vw/.86 var(--serif);
  letter-spacing: -.015em;
}
.lost-title .t2 {
  font: 100 .9em/1 var(--sans);
  letter-spacing: -.045em;
}
.lost-title .t3 {
  display: block;
  margin-top: .6vw;
  font: 100 9vw/.86 var(--sans);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.lost-text { margin: 2.9vw 0 0 30vw; width: 34vw; font-size: 1.12em; }

.cap--lost { left: 6vw; top: 14vw; }
.orphans--lost { left: 80vw; top: 12vw; }
.sheet--lost .g-lost { left: 14vw; bottom: 8vw; }
.sheet--lost .folio { left: 58vw; }

/* ----- on a phone ------------------------------------------------ */
@media (max-width: 800px) {
  .lost-title { margin: 14vw 0 0 8vw; }
  .lost-title .t1 { font-size: 18vw; }
  .lost-title .t3 { margin-top: 1.4vw; font-size: 15vw; }
  .lost-text { margin: 10vw 0 0 8vw; width: auto; }

  /* hidden on a phone */
  .cap--lost,
  .orphans--lost,
  .sheet--lost .g-lost { display: none; }
}