@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Open+Sans:wght@400;700&display=swap');

/* The look is Damla's Canva design (20 Sep 2026, DAHVvipqY8Q): the landing
   page is the design itself, embedded; everything under it borrows the same
   three things and nothing else -- the pink, a bold grotesk for headings and
   buttons, a Garamond for sentences. Black pill buttons with white type. */
:root { --paper:#f1c9d2; --paper-deep:#e9b9c4; --ink:#000000; --ink-soft:#3a2a30;
  --rule:#000000; --pill:#1f1f1f; --pill-edge:#3a3a3a; --link:#000000;
  --term-bar:#3a3a3a; --term-bg:#1c1c1c; --term-text:#d0d0d0;
  --term-bright:#ffffff; --term-muted:#8a8a8a; --term-rule:#3a3a3a;
  --term-coral:#cf8b7d; --term-lilac:#c397d8; --term-green:#7fb069;
  --light-red:#ff5f57; --light-yellow:#febc2e; --light-green:#28c840;
  --red:#b3123f; --orange:#c2571d; --ochre:#8a6a00;
  --green:#2e7d32; --blue:#1f4fb3; --violet:#6a2fa3;
  --sans:"Open Sans",Arial,Helvetica,sans-serif;
  --serif:"EB Garamond",Garamond,Georgia,serif; }
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { font-family:var(--serif); color:var(--ink); background:var(--paper);
  font-size:19px; line-height:1.45; overflow-x:hidden; }
a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
h1, h2, h3, h4, .sans { font-family:var(--sans); font-weight:bold; }
u { text-decoration-thickness:1px; text-underline-offset:2.5px; }
#why u { text-decoration-color:var(--red); }
#how u { text-decoration-color:var(--orange); }
.rb1{color:var(--red)} .rb2{color:var(--orange)} .rb3{color:var(--ochre)}
.rb4{color:var(--green)} .rb5{color:var(--blue)} .rb6{color:var(--violet)}

nav.runhead { background:var(--paper); font-family:var(--sans); font-size:14px; }
nav.runhead.over { position:absolute; top:0; left:0; right:0; z-index:3; background:transparent; }
nav.runhead.over .rh-inner { justify-content:center; padding-top:1rem; }
.rh-inner { max-width:1100px; margin:0 auto; padding:.7rem 24px .6rem 24px;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.rh-left .wordmark { font-weight:bold; font-size:16px; color:var(--ink); text-decoration:none; }
.rh-left .rh-sub { font-family:var(--serif); font-size:15px; margin-left:.7rem; }
.rh-links { display:flex; gap:1.1rem; align-items:baseline; }
.rh-links a { color:var(--ink); text-decoration:none; font-weight:bold;
  border-bottom:2px solid transparent; padding-bottom:.1rem; transition:border-color 150ms ease; }
.rh-links a:hover, .rh-links a.active { border-bottom-color:var(--ink); }
.rh-links a.rh-join { background:var(--pill); color:#fff; border-radius:999px;
  padding:.25rem .9rem .3rem .9rem; border-bottom:none; }
.rh-links a.rh-join:hover { background:#000; }

.sheet { max-width:1100px; margin:0 auto; padding:0 24px 3rem 24px; position:relative; }

/* THE LANDING PAGE IS THE CANVA DESIGN. The design has four stacked pages
   (landing / "form here" / "brief here" / examples) and the embed shows all
   four, so a fixed-ratio box crops the embed to one page: the box is one
   page tall (768/1366 = 56.223%) and the iframe inside is four pages tall
   (4 x 56.223% = 224.89%, the number Canva puts in its own snippet). The
   viewer centres the four pages vertically in whatever height it gets and
   paints its toolbar at the very bottom, so the iframe is 430% tall and
   shifted up 15%: the 15% of slack above the pages is hidden, the toolbar
   sits in the 15% below the crop.
   .hero-shield sits over the iframe so a mouse wheel or a tap cannot scroll
   the embed to its placeholder pages; the two anchors in it lie exactly over
   the design's two buttons and go to the form. */
/* Full bleed: the design runs edge to edge of the window, not the width of
   the text column, so the box is 100vw wide and its height is in vw too. */
.canva { position:relative; width:100vw; margin-left:calc(50% - 50vw); height:0; padding-top:56.223vw; overflow:hidden; }
.canva > div[style] { position:absolute !important; top:-15% !important; left:0; width:100%;
  height:430% !important; padding:0 !important; margin:0 !important;
  box-shadow:none !important; border-radius:0 !important; }
.canva.page4 > div[style] { top:-315% !important; }
.hero-shield { position:absolute; inset:0; z-index:2; }
.hero-shield a { position:absolute; display:block; text-indent:-9999px; overflow:hidden;
  top:66.79%; height:11.72%; border-radius:999px; }
.hero-shield a.b1 { left:36.27%; width:14.17%; }
.hero-shield a.b2 { left:51.87%; width:11.44%; }
.hero-shield a:focus-visible { outline:3px solid var(--ink); }
/* Page four is the last page in the viewer, so its bottom edge is the
   viewer's own border; the box stops 0.8% short of it (the page's content
   ends at 95%). */
.canva.page4 { margin-top:2.6rem; padding-top:55.4vw; }

h2.big { font-size:clamp(30px,4.6vw,56px); line-height:1.15; text-align:center; margin-bottom:.4rem; }
.sub { font-family:var(--sans); font-weight:bold; font-size:16px; letter-spacing:.02em;
  text-align:center; margin-bottom:1.6rem; }
.maketitle { text-align:center; margin:2.6rem 0 2.2rem 0; }
.maketitle h1 { font-size:clamp(30px,4.6vw,56px); line-height:1.15; margin-bottom:.5rem; }
.maketitle .author { font-size:19px; margin-bottom:.25rem; }
.maketitle .date { font-style:italic; font-size:17px; }

.pitch { font-size:21px; line-height:1.5; text-align:center; max-width:46em; margin:0 auto 2.6rem auto; }

.grid { display:grid; grid-template-columns:1fr 1fr; column-gap:3rem; row-gap:2.4rem; align-items:start; margin-bottom:2.4rem; }
.grid > section, .grid > .algo { margin-bottom:0; }
section { margin-bottom:2.4rem; }
h3.sec { font-size:24px; margin-bottom:.6rem; }
h1.page { font-size:clamp(26px,3.6vw,40px); line-height:1.15; margin:2.2rem 0 .6rem 0; }
p { margin-bottom:.7rem; }
.lede { font-size:20px; max-width:62ch; margin-bottom:2rem; }

/* THE FORM: one column, centred, as wide as the landing text; pill inputs
   in the design's own shapes. */
.algo { margin-bottom:2.4rem; }
.algo#join { max-width:640px; margin:3.2rem auto 3.4rem auto; scroll-margin-top:1.2rem; }
.algo-cap { text-align:center; margin-bottom:.4rem; }
.seatcount { font-family:var(--sans); font-weight:bold; font-size:clamp(48px,7vw,84px);
  line-height:1; text-align:center; margin-bottom:.2rem; }
.seatline { text-align:center; font-size:19px; margin-bottom:1.6rem; }
.seatline b { font-weight:600; }
.field { display:grid; grid-template-columns:1fr; gap:.25rem; margin-bottom:.9rem; }
.field label { font-family:var(--sans); font-weight:bold; font-size:14px; letter-spacing:.02em; }
.field input[type=text], .field input[type=email], .field select {
  font-family:var(--serif); font-size:18px; color:var(--ink); width:100%;
  border:1.5px solid var(--ink); border-radius:999px; background:#fff;
  padding:.5rem 1.1rem; outline:none; -webkit-appearance:none; appearance:none; }
.field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center; padding-right:2.6rem; }
.field input::placeholder { color:#6b5a60; }
.field input:focus, .field select:focus { border-width:2px; }
.field select option { font-family:var(--sans); }
.cvline { margin:.9rem 0; font-size:17px; }
/* The CV box is the same white rounded field as the form above it -- a
   16px face so iOS does not zoom the page when it is tapped, and the
   design's own radius instead of the old typewriter underline. */
#cv-input { width:100%; font-family:var(--serif); font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--ink); border-radius:18px; outline:none;
  resize:vertical; padding:.8rem 1.1rem; line-height:1.45; }
#cv-input:focus { border-width:2px; }
#cv-input::placeholder { color:#6b5a60; }
.cvline .tex, .tex { font-family:var(--sans); font-size:13px; }
.cvline input[type=file] { position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0); }
.cvline label.pick { font-family:var(--sans); font-weight:bold; font-size:14px; display:inline-block; white-space:nowrap;
  border:1.5px solid var(--ink); border-radius:999px; padding:.15rem .8rem; cursor:pointer; }
.cvline label.pick:hover { background:var(--ink); color:#fff; }
#cv-msg { font-style:italic; }
.consent { font-size:15px; margin-top:.9rem; }
.consent input { margin-right:.45rem; accent-color:#000; }
button.submit { display:block; margin:1.2rem auto 0 auto; font-family:var(--sans); font-weight:bold; font-size:19px;
  background:var(--pill); color:#fff; border:2px solid var(--pill-edge); border-radius:999px;
  padding:.75rem 2rem; cursor:pointer; transition:background 150ms ease; }
button.submit:hover { background:#000; }
button.submit:disabled { opacity:.55; cursor:default; }
.tabnote { font-size:16px; margin-top:.6rem; }
#join-msg, #reach { text-align:center; }

/* THE BRIEF: the design's page three -- sentences and numbers. Numbers are
   the biggest thing on it, in the heading grotesk, each with a Garamond
   caption; every one comes out of this morning's corpus. */
.numbers { display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 2.6rem; margin:0 0 2.6rem 0; }
.num { text-align:center; min-width:120px; }
.num b { display:block; font-family:var(--sans); font-size:clamp(34px,4.6vw,56px); line-height:1.05; }
.num span { font-size:17px; }

table { border-collapse:collapse; margin:.3rem 0 .4rem 0; font-size:18px; }
th { font-family:var(--sans); font-weight:bold; font-size:15px; }
th, td { padding:.3rem 0 .3rem 3rem; text-align:right; }
td:first-child, th:first-child { padding-left:0; text-align:left; }
thead tr { border-top:1.5px solid var(--rule); border-bottom:1px solid var(--rule); }
tbody tr:last-child { border-bottom:1.5px solid var(--rule); }

table.wide { width:100%; font-size:17px; }
table.wide th, table.wide td { padding:.3rem 1.1rem .3rem 0; text-align:left; vertical-align:baseline; }
table.wide th:last-child, table.wide td:last-child { padding-right:0; }
td.co { font-family:var(--sans); font-weight:bold; font-size:14px; white-space:nowrap; }
td.pos { font-style:italic; }
td.num { white-space:nowrap; }

/* Real output, in the chrome of the thing it comes from. Not a picture of a
   terminal: real text in real DOM, selectable and readable aloud. */
.term { background:var(--term-bg); color:var(--term-text); margin:0 0 3.4rem 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.62;
  border-radius:14px; overflow:hidden; }
.term-bar { background:var(--term-bar); padding:.42rem .7rem; display:flex;
  align-items:center; gap:.45rem; }
.term-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.term-title { color:var(--term-muted); margin-left:.6rem; font-size:11.5px; }
.term-body { padding:1rem 1.1rem 1.15rem 1.1rem; white-space:pre-wrap;
  overflow-x:auto; }
.term-body .k { color:var(--term-coral); }
.term-body .g { color:var(--term-green); }
.term-body .m { color:var(--term-muted); }
.term-body .b { color:var(--term-bright); }

.twocol { column-count:2; column-gap:3rem; margin-top:.6rem; }
.bib { list-style:none; counter-reset:bib; font-size:17px; }
.bib li { counter-increment:bib; padding-left:2.1em; text-indent:-2.1em;
  margin-bottom:.75rem; break-inside:avoid; }
.bib li::before { content:"[" counter(bib) "]"; margin-right:.7em; font-family:var(--sans); font-weight:bold; font-size:14px; }
.bib .co { font-family:var(--sans); font-weight:bold; font-size:14px; }
.bib .pos { font-style:italic; }
.bib .meta { color:var(--ink-soft); }

.scoreline { font-family:var(--sans); font-size:36px; font-weight:bold; margin-bottom:.3rem; }
.reachline { font-size:19px; font-style:italic; margin-bottom:1.2rem; }
.flagline { font-size:17px; margin-bottom:2.4rem; }
.flagline .opt { font-family:var(--sans); font-weight:bold; font-size:14px; margin-right:.6rem; color:var(--ink); display:inline-block; white-space:nowrap; line-height:1.6;
  border:1.5px solid var(--ink); border-radius:999px; padding:.15rem .8rem; cursor:pointer; }
.flagline .opt.on { background:var(--ink); color:#fff; }
.heartnote { margin-top:2.4rem; width:60%; font-size:16px; }
.heartnote .star { color:var(--red); }

.footnote { margin:3.2rem auto 0 auto; max-width:62ch; text-align:center; font-size:15px; color:var(--ink-soft); }
.pagenum { text-align:center; margin-top:2.2rem; font-size:15px; }
.version { text-align:center; font-family:var(--sans); font-size:12px; color:var(--ink-soft); margin-top:1rem; }

/* Phone re-flow of the design's two pages; shown only under 860px. */
.m-hero, .m-ex { display:none; }
.m-hero { position:relative; text-align:center; padding:4.6rem 24px 0 24px; overflow:hidden; }
/* At 320 the nav wraps to two rows and the second row sat on the wordmark.
   The hero starts below whatever the nav actually needs, not a fixed 4.6rem. */
@media (max-width:389px) {
  .m-hero { padding-top:5.2rem; }
  .m-hero .cta a { font-size:15px; padding:.7rem 1rem; }
  /* All five links fit a 320px row only at 12.5px with the reserve trimmed;
     the alternative was "join" sitting off-screen behind a scroll nobody
     can see. */
  /* An iPhone SE reports 344 CSS px here. Measured in this face: "why" 37 +
     "how" 38 + the 100px reserve + "all listings" 79 + the join pill 58 is
     312, plus four small gaps -- inside 344 with the gaps at .28rem and no
     padding on the links. The reserve itself never shrinks: the whole point
     is that toggling the label moves nothing. */
  .rh-links { gap:.28rem; font-size:13px; }
  .rh-links a { padding:0; font-size:13px; }
  .rh-links a.rh-join { padding:.5rem .65rem; font-size:13px; }
}
.m-hero > * { position:relative; z-index:1; }
.m-hero img.patch { position:absolute; z-index:0; pointer-events:none; height:auto; }
.m-hero .patch-tl { top:-2.6rem; left:-3vw; width:30vw; max-width:150px; }
.m-hero .patch-tr { top:-3.2rem; right:-8vw; width:42vw; max-width:210px; }
.m-hero .wordmark { font-family:var(--sans); font-weight:bold; font-size:clamp(44px,13vw,64px); line-height:1; letter-spacing:-.02em; margin:0; }
.m-hero .tag { font-family:var(--sans); font-weight:bold; font-size:clamp(14px,4vw,18px); margin:.35rem 0 1.6rem 0; }
.m-hero p { font-size:clamp(17px,4.6vw,21px); line-height:1.4; margin:0 auto .9rem auto; max-width:24em; }
.m-hero .cta { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin:1.4rem 0 .4rem 0; }
.m-hero .cta a { font-family:var(--sans); font-weight:bold; font-size:clamp(14px,4.1vw,17px); color:#fff; background:var(--pill);
  text-decoration:none; border-radius:999px; padding:.7rem 1.1rem; line-height:1.15; text-align:center; white-space:nowrap; }
.m-hero .cta a:hover { background:#000; }
/* The design's bottom corners: stars left, the deer right, in flow under the
   buttons so nothing lies over the words. */
.m-hero .corners { display:flex; justify-content:space-between; align-items:flex-end; margin:.2rem -24px -.4rem -24px; }
.m-hero .corners .stars { width:28vw; max-width:140px; height:auto; margin-left:-10px; margin-bottom:-4px; }
.m-hero .corners .deer { width:32vw; max-width:150px; height:auto; margin-right:-10px; margin-bottom:-4px; }
.m-ex { text-align:center; padding:1.2rem 24px 0 24px; }
.m-ex-head { margin-bottom:1rem; }
.m-ex .try { width:44vw; max-width:220px; height:auto; display:block; margin:0 auto 1.4rem auto; }
.m-ex .shots { display:flex; flex-direction:column; gap:1.2rem; align-items:center; }
.m-ex .shots img { width:100%; max-width:360px; height:auto; border-radius:14px; display:block; }
.m-ex .shots img.tilt { max-width:268px; transform:rotate(-5deg); margin:.4rem 0 1rem 0; border-radius:0; }

@media (max-width:860px) {
  body { font-size:18px; }
  /* THE PHONE. The design is a landscape page; shrunk to 390px its sentences
     are 6px tall and its buttons 30px wide, so under 860px the embed goes and
     the same page is laid out again in real HTML, portrait: the design's own
     words in the design's own two fonts, its stickers cropped out of the
     2732px export (m-*.jpg) and placed where a portrait page has room for
     them. Nothing here is new design, it is her page re-flowed. */
  .canva { height:auto; padding-top:0; overflow:hidden; }
  .canva > div[style] { display:none; }
  .canva .hero-shield { display:none; }
  .m-hero, .m-ex { display:block; }
  .canva.page4 { margin-top:1.2rem; padding-top:0; }
  .grid { grid-template-columns:1fr; }
  .twocol { column-count:1; }
  .rh-inner { flex-wrap:wrap; }
  .rh-left .rh-sub { display:none; }
  /* A finger is about 9mm across and these are the only things on the page
     you tap. Every link in the runhead and every link in a listing row gets
     a 44px-tall box around it (Apple's own floor) instead of the 21px the
     text alone gives; the nav sits in one row without wrapping because the
     gap shrinks, not the type. */
  .rh-links { gap:.5rem; font-size:14px; flex-wrap:nowrap; justify-content:flex-start; align-items:center;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding:0 24px; margin:0 -24px; scroll-padding:24px; }
  .rh-links::-webkit-scrollbar { display:none; }
  .rh-links a { flex:0 0 auto; }
  nav.runhead.over .rh-inner { display:block; padding-left:0; padding-right:0; }
  .rh-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 .25rem; border-bottom:none; }
  .rh-links a:hover, .rh-links a.active { border-bottom:none; box-shadow:inset 0 -2px 0 0 var(--ink); }
  .rh-links a.rh-join { padding:.6rem 1.1rem; min-height:0; box-shadow:none; }
  .rh-links a.rh-join:hover, .rh-links a.rh-join.active { box-shadow:none; }
  .rh-left .wordmark { display:inline-flex; align-items:center; min-height:44px; }
  .rh-inner { align-items:center; }
  .rh-inner { padding-top:.2rem; padding-bottom:.2rem; }
  .footnote, .heartnote { width:100%; }
  .algo#join { margin-top:1.8rem; }
  .consent input { width:22px; height:22px; margin-right:.6rem; vertical-align:-5px; }
  /* A link inside a sentence cannot be 44px tall without tearing the
     paragraph open, so it keeps its line and gains padding either side of
     the text -- the hit box widens, the leading does not move. */
  p a, .tabnote a, .footnote a { padding:.5rem 0; }
  .consent label { display:block; }
  .cvline label.pick { padding:.45rem 1.1rem; font-size:15px; }
  .field input[type=text], .field input[type=email], .field select { font-size:16px; padding:.7rem 1.1rem; }
  .flagline .opt { padding:.4rem 1rem; font-size:15px; }
  span.tex, .cvline .tex { font-size:14px; }
  td.pos { font-size:16px; }
  /* THE FULL LISTING on a phone. Seven columns need 1048px; the phone has
     390. Each row becomes a short paragraph: number and company, the
     position under it, then location, salary, age and the two links on one
     line. The two booktabs rules stay, the caption stays, the head row goes
     (its words are legible from the values). */
  table.wide thead { display:none; }
  table.wide, table.wide caption, table.wide tbody, table.wide tr { display:block; width:100%; }
  table.wide tbody { border-top:1.5px solid var(--rule); border-bottom:1.5px solid var(--rule); padding:.5rem 0; }
  table.wide tr { padding:.5rem 0; }
  table.wide td { display:inline; padding:0; font-size:16px; white-space:normal; }
  table.wide td:first-child { font-family:var(--sans); font-size:13px; margin-right:.5rem; }
  table.wide td.co { font-size:15px; }
  table.wide td.pos { display:block; font-size:17px; margin:.1rem 0 .2rem 0; }
  table.wide td:nth-child(4)::after, table.wide td:nth-child(5)::after, table.wide td:nth-child(6)::after { content:" · "; }
  table.wide td:last-child { display:block; margin-top:.35rem; }
  table.wide td:last-child a { display:inline-block; min-height:44px; line-height:44px; padding:0 .6rem;
    text-decoration:none; box-shadow:inset 0 -1.5px 0 0 var(--ink); margin-right:.3rem; }
  .version { font-size:14px; }
}