/* TOILE web: toile.style pages (/, /privacy, /delete-account, 404).
   Section 2 is copied byte for byte from design/locked/prototype/toile-locked.css (sha256 e9b826e6...);
   positioning changes for the web column are made only as later overrides in section 3. */

/* ===== 1. self-hosted OFL fonts (google/fonts @ 23e54b51; sha256 pins in /fonts/FONTS-SHA256.txt) ===== */
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/BodoniModa-VF.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/fonts/BodoniModa-Italic-VF.ttf') format('truetype'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/Newsreader-VF.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/Newsreader-Italic-VF.ttf') format('truetype'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-VF.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ===== 2. golden brand rules, byte-identical to toile-locked.css ===== */
/* toile-locked.css lines 3-49: :root tokens incl. --weave (line 46) */
:root {
  /* grounds */
  --calico: #ECE5D5;        /* unbleached muslin: the house ground */
  --calico-2: #E4DBC8;      /* calico in shade: fields, insets */
  --calico-3: #D8CDB7;      /* deeper shade, pressed states */
  --paper: #F6F2E9;         /* printed stock: spreads, archive covers, the fiche */
  --paper-2: #EFE9DC;
  --muslin: #EEE5D1;        /* the toile and the veil */
  --night: #181613;         /* the atelier at night: the light-table surround */
  --lightbox: #FAF8F2;      /* the lit table */
  /* ink */
  --ink: #1C1A17;           /* type, primary buttons  (13.8:1 on calico) */
  --ink-2: #463F37;         /* secondary type         (8.3:1 on calico, 6.1:1 on the ledge) */
  --ink-3: #5A5145;         /* tertiary caps, codes, inactive tabs (6.2:1 calico, 5.2:1 darkest weave, 4.6:1 ledge) */
  --hair: rgba(28, 26, 23, .16);
  --line: rgba(28, 26, 23, .52);   /* control boundaries: chips, fields, segmented, switch (>= 3:1 on every ground) */
  --hair-2: rgba(28, 26, 23, .09);
  --graphite: #8A8174;      /* pattern-draft lines (decorative only) */
  --bone: #EFE9DE;          /* type on night (14.9:1) */
  --bone-2: #B9B0A2;        /* secondary on night (8.4:1) */
  /* the pin — the only accent. It marks what is pinned, chosen, numbered. */
  --vermilion: #D23B1F;     /* pinheads, basting thread, folios, grease pencil (non-text or >= 24px) */
  --vermilion-ink: #A62C15; /* vermilion for small text (5.6:1 calico, 4.7:1 darkest weave, 6.3:1 paper) */
  --grease: #E0341C;        /* grease pencil on the lit table */
  --grease-night: #F0775C;  /* vermilion on night (6.5:1) */
  /* stone: the shelf a piece stands on (closet + rails) */
  --ledge-top: #D2C8B6; --ledge-lip: #C8BEAA; --ledge-face: #D6CDBC;
  /* type */
  --f-display: 'Bodoni Moda', 'Didot', serif;
  --f-text: 'Newsreader', Georgia, serif;
  --f-caps: 'Jost', 'Futura', sans-serif;
  /* space: 4pt grid, 8pt rhythm */
  --g: 20px;
  /* motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-lift: cubic-bezier(.45, 0, .2, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
  --spring-pin: cubic-bezier(.34, 1.56, .64, 1);
  /* garment elevation (garments are the only things with depth); warm umber, never grey */
  --lift: drop-shadow(0 1px 1px rgba(64, 46, 28, .24)) drop-shadow(0 7px 9px rgba(64, 46, 28, .12));
  --lift-hi: drop-shadow(0 2px 2px rgba(64, 46, 28, .26)) drop-shadow(0 16px 16px rgba(64, 46, 28, .20));
  --lift-layer: drop-shadow(0 1.5px 1.5px rgba(52, 36, 20, .34)) drop-shadow(0 6px 8px rgba(52, 36, 20, .20));
  /* the calico weave: one 412 x 916 tile, as wide and as tall as the phone, so no tile seam ever falls on a screen */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='916'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .25 0 0 0 0 .17 0 0 0 1.3 -.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .006' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .96 0 0 0 1.3 -.64'/%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .14 0 0 0 9 -7.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.34'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.30'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='.5'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, rgba(70, 60, 48, .20) .8px, transparent 1.2px);
  --muslin-weave: repeating-linear-gradient(0deg, rgba(110, 90, 60, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .30) 0 1px, transparent 1px 3px);
}
/* toile-locked.css lines 57-57: .sr (the wordmark's hidden text) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
/* toile-locked.css lines 78-78: .kicker */
.kicker { font: 500 10.5px/1.2 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
/* toile-locked.css lines 93-101: .btn .btn:active .btn-ink .btn-line .btn-block .btn-text .btn-text u/.ul .btn[aria-disabled] */
.btn { height: 52px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 2px; font: 500 11.5px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: transform .16s var(--ease), background .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--calico); }
.btn-line { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn-block { width: 100%; }
.btn-text { min-height: 48px; min-width: 48px; padding: 0 4px; font: 500 11px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; }
.btn-text u, .ul { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
/* a disabled control stays legible (text 6.2:1, outline 6.2:1): dashed outline + padlock + a helper line saying why */
.btn[aria-disabled="true"] { box-shadow: none; outline: 1px dashed var(--ink-3); outline-offset: -1px; color: var(--ink-3); cursor: default; }
/* toile-locked.css lines 123-126: .wordmark .ipin .ipin svg .wordmark.sm */
.wordmark { display: inline-flex; align-items: flex-end; font: 500 64px/.8 var(--f-display); letter-spacing: .16em; color: var(--ink); padding-left: .16em; position: relative; }
.wordmark .ipin { position: relative; display: inline-block; width: .30em; height: .72em; margin: 0 .16em 0 0; align-self: flex-end; }
.wordmark .ipin svg { position: absolute; left: 50%; bottom: -.13em; width: .30em; height: 1.02em; transform: translateX(-50%); overflow: visible; filter: drop-shadow(.5px 1.5px 1px rgba(40, 24, 12, .28)); }
.wordmark.sm { font-size: 22px; letter-spacing: .2em; padding-left: 0; }
/* toile-locked.css lines 233-235: .selvedge .selvedge span .selvedge i */
.selvedge { position: absolute; left: 0; right: 0; bottom: 22px; height: 26px; display: flex; align-items: center; gap: 14px; padding: 0 var(--g); overflow: hidden; background: var(--paper-2); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair-2); white-space: nowrap; }
.selvedge span { font: 500 7.5px/1 var(--f-caps); letter-spacing: .34em; text-transform: uppercase; color: var(--ink-3); }
.selvedge i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* toile-locked.css lines 395-396: .fiche .fiche-wrap */
.fiche { position: relative; padding: 16px 16px 20px; background: var(--paper); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.fiche-wrap { filter: drop-shadow(0 12px 16px rgba(60, 44, 26, .16)) drop-shadow(0 0 .6px rgba(28, 26, 23, .35)); margin-top: 20px; }

/* ===== 3. web column positioning overrides =====
   The golden rules above are byte-identical to toile-locked.css. The ONLY declarations the web column
   changes are positioning ones, and they are made here, as later rules, so the golden bytes stay intact:
     .selvedge    position: absolute -> static (left/right/bottom then inert); margin-top: 24px (sits at the column foot)
     .fiche-wrap  margin-top: 20px -> 32px; horizontal margins 0 -> 20px (the column gutter) */
.selvedge { position: static; margin-top: 24px; }
.fiche-wrap { margin-top: 32px; margin-left: var(--g); margin-right: var(--g); }

/* ===== 4. the web pages (Design System values re-expressed as CSS; every number unchanged) ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--f-text); color: var(--ink); -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto; font-variant-numeric: lining-nums;
  /* the house ground: calico + the 412 x 916 weave tile, fixed at the viewport origin (Design System §7.1) */
  background-color: var(--calico); background-image: var(--weave);
  background-position: 0 0; background-repeat: repeat; background-attachment: fixed;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
p, h1, h2, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
/* focus (Design System §11): 1.5 px vermilion at a 2 px offset; the browser default outline never renders */
:focus-visible { outline: 1.5px solid #D23B1F; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* the page column: 412 max, centred; the weave alone fills both sides above 412 */
.column { max-width: 412px; margin: 0 auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* kickers row (y 24 to 37) */
.kick-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px var(--g) 0; }

/* the primary lockup, centred; top y = 96 */
.mark-row { display: flex; justify-content: center; margin-top: 59.4px; font-size: 16px; }
.mark-row a { text-decoration: none; }
.mark-row .wordmark .l, .home .wordmark .l { display: inline-block; }

/* the promise: Newsreader italic 19/25.6, ink-2, a 300 wide box centred */
.promise { width: 300px; max-width: calc(100% - 40px); margin: 24px auto 0; font: italic 400 19px/25.6px var(--f-text); color: var(--ink-2); text-align: center; }

/* download button: the §11 ink primary, 372 x 52 at x = 20 */
.dl { display: flex; margin: 36px var(--g) 0; text-decoration: none; }
.dl .lk-ic { flex: none; width: 12px; height: 15px; }
.odile-line { margin: 5px var(--g) 0; text-align: center; font: 500 8px/1.2 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.meta { height: 48px; margin: 0 var(--g); display: flex; align-items: center; justify-content: center; font: 500 9.5px/1.2 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* WHAT TOILE DOES: on calico, no card */
.what { margin: 40px var(--g) 0; }
.what-rule { height: 1px; margin-top: 10px; background: var(--hair); }
.what-row { position: relative; margin-top: 14px; padding-left: 16px; }
.what-row .dot { position: absolute; left: -1.07px; top: 5.93px; width: 9.13px; height: 9.13px; }
.what-row .dot svg { display: block; width: 9.13px; height: 9.13px; }
.what-row .dot circle { fill: url(#pinhead-dot); }
.what-text { font: 400 15px/21px var(--f-text); color: var(--ink-2); }
.what-text b, .fiche-step b { font-weight: 500; color: var(--ink); }

/* HOW TO INSTALL: the §11 fiche */
.fiche-pinked { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; pointer-events: none; }
.fiche-step { display: grid; grid-template-columns: 24px 1fr; margin-top: 12px; font: 400 15px/21px var(--f-text); color: var(--ink); }
.fiche-step .n { font: italic 400 16px/21px var(--f-display); color: var(--vermilion-ink); }

/* the note */
.note { margin: 24px var(--g) 0; font: italic 400 15px/21px var(--f-text); color: var(--ink-3); }

/* foot links: two §11 text buttons, 24 apart, in a 48 row */
.foot-links { display: flex; justify-content: center; align-items: center; gap: 24px; height: 48px; margin-top: 24px; }
.foot-links a, .btn-text { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }

/* ---------- /privacy and /delete-account ---------- */
.topbar-web { height: 56px; padding: 0 8px; display: flex; align-items: center; justify-content: center; }
.home { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; text-decoration: none; }
.page-kicker { margin: 24px var(--g) 0; }
.title { margin: 7.4px var(--g) 0; font: 400 44px/44px var(--f-display); letter-spacing: -.018em; color: var(--ink); }
.title .it { font-style: italic; }
.section { margin: 24px var(--g) 0; }
.section p { margin-top: 8px; font: 400 15px/21px var(--f-text); color: var(--ink-2); }
.section p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.del .title { margin-top: 42px; }
.lede { margin: 10px var(--g) 0; font: italic 400 17px/24.1px var(--f-text); color: var(--ink-2); }
.fields { margin: 0 var(--g); }
.field-web { margin-top: 22px; }
.field-web:first-child { margin-top: 29.9px; }
.field-web label { display: block; font: 500 9.5px/1.2 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.field-web .row { position: relative; box-shadow: inset 0 -1px 0 var(--line); }
.field-web input { display: block; width: 100%; height: 48px; border: 0; border-radius: 0; background: transparent; font: 400 18px var(--f-text); color: var(--ink); padding: 0; margin: 0; }
.field-web input[type=password], .field-web input.pw { letter-spacing: .18em; padding-right: 60px; }
.field-web .pw-show { position: absolute; right: 0; top: 0; width: 56px; height: 48px; padding: 0 2px 0 12px; font: 500 9.5px/1.2 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.submit { display: flex; width: 100%; margin-top: 32px; }
.say { margin: 12px var(--g) 0; font: italic 400 15px/21px var(--f-text); color: var(--vermilion-ink); }
.fine { margin: 24px var(--g) 0; font: italic 400 15px/21px var(--f-text); color: var(--ink-3); }

/* STEP 2: the §6 paper card */
.card { margin: 30px var(--g) 0; padding: 16px; background: var(--paper); box-shadow: 0 12px 22px -18px rgba(64, 46, 28, .55), 0 0 0 1px var(--hair-2); }
.card .confirm-line { margin-top: 10px; font: 400 18px/1.3 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.card .btn { display: flex; width: 100%; margin-top: 16px; }
.card .cancel { display: flex; margin: 8px auto 0; }

/* STEP 3 */
.done { margin: 30px var(--g) 0; }
.done .voice-line { font: italic 400 17px/24.1px var(--f-text); color: var(--ink-2); }
.done .sig { display: block; margin-top: 8px; font: italic 400 15px/1 var(--f-display); color: var(--vermilion-ink); }
.done .back { display: flex; margin: 16px auto 0; }

/* ---------- 404 ---------- */
.lost .mark-row { margin-top: 96px; }
.lost .selvedge { margin-top: 48px; }