/* Every page that is not the broadside shares this file -- contact, donate,
   and whatever the endpoint renders after a submission.
   It is an external stylesheet rather than inline because two documents use
   it -- the static page and whatever the worker renders after a submission --
   and `style-src 'self'` already allows it. Same tokens as the holding page,
   only the ones this page needs. */

:root{
  --ink:#171E2E; --ink-2:#4B566E; --ink-3:#676E81;
  --paper:#F5F1E6; --paper-2:#ECE6D7; --line:#D3C9B2; --line-2:#E3DBC8;
  --accent:#8C2F27;
  --gutter:clamp(22px,5vw,64px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F0EADC; --ink-2:#A8A294; --ink-3:#827D6C;
    --paper:#101319; --paper-2:#171B24; --line:#2C3340; --line-2:#20262F;
    --accent:#DD8A72;
  }
}
:root[data-theme="dark"]{
  --ink:#F0EADC; --ink-2:#A8A294; --ink-3:#827D6C;
  --paper:#101319; --paper-2:#171B24; --line:#2C3340; --line-2:#20262F;
  --accent:#DD8A72;
}

/* The reader's look inside /app [H61], from the lookbook's palettes. Engraved
   is the default above, light and dark. The other three have one palette each
   -- Nocturne and Diagram dark, Press light -- so brightness does not change
   them yet, and these rules come after the brightness rules so they hold.
   Every text colour here is checked at AA (4.5:1) against both paper tones. */
:root[data-look="nocturne"]{
  --ink:#EDE4D2; --ink-2:#A89B82; --ink-3:#958A74;
  --paper:#12100E; --paper-2:#1C1916; --line:#3A332A; --line-2:#2A251E;
  --accent:#C9A227;
}
:root[data-look="press"]{
  --ink:#111111; --ink-2:#5E5E5E; --ink-3:#6B6B6B;
  --paper:#FFFFFF; --paper-2:#F5F4F1; --line:#E2E0DB; --line-2:#EDEBE6;
  --accent:#B3261E;
}
:root[data-look="diagram"]{
  --ink:#D6E4F0; --ink-2:#94A5BB; --ink-3:#8597AE;
  --paper:#0E1420; --paper-2:#161E2E; --line:#27364B; --line-2:#1D2839;
  --accent:#4FD1C5;
}
/* The mark is drawn in ink on nothing, so on a dark look it inverts, as it
   does in dark mode. */
:root[data-look="nocturne"] .app-header .mk img,
:root[data-look="diagram"] .app-header .mk img{ filter:invert(1) brightness(1.08) }

@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('fonts/eb-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:400 800;
  font-display:swap; src:url('fonts/eb-garamond-italic.woff2') format('woff2');
}
/* An engraver's copperplate, for the signature on the donate page and nothing
   else. Period-correct for the nineteenth-century plates this product takes
   its name from, which carried the engraver's own signed name. SIL Open Font
   License; the licence ships beside it. */
@font-face{
  font-family:'Pinyon Script'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/pinyon-script.woff2') format('woff2');
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:"EB Garamond",Georgia,serif; font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* padding-inline, never the shorthand -- the holding page lost every section's
   vertical spacing to exactly that mistake. */
.sheet{ max-width:38rem; margin:0 auto; padding-block:clamp(48px,9vh,96px); padding-inline:var(--gutter) }

h1{
  margin:0 0 28px; color:var(--ink); font-weight:500;
  font-size:clamp(30px,5vw,44px); line-height:1.1; letter-spacing:-.004em;
}
p{ margin:0 0 16px }
a{ color:var(--accent) }

form{ margin:28px 0 0; display:flex; flex-direction:column }
label{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin:20px 0 7px;
}
label .opt{ letter-spacing:.1em; text-transform:none; font-style:italic }
input,textarea{
  font:inherit; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:2px; padding:11px 13px; width:100%;
}
input:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:1px }
/* The show-password control [H55]: an eye inside the right edge of the field,
   added by /password.js. The text is padded clear of it, and the site's general
   button style (fill, padding, margin) is undone here. */
.reveal-wrap{ position:relative; display:block }
.reveal-wrap input{ padding-right:46px }
.reveal{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  margin:0; padding:0; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); background:none; border:0; border-radius:2px; cursor:pointer;
}
.reveal:hover{ color:var(--ink) }
.reveal[aria-pressed="true"]{ color:var(--accent) }
.reveal:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
textarea{ resize:vertical; min-height:9em; line-height:1.55 }

button{
  font:inherit; font-weight:600; margin:28px 0 0; align-self:flex-start;
  color:var(--paper); background:var(--accent);
  border:0; border-radius:2px; padding:12px 30px; cursor:pointer;
}
button:hover{ filter:brightness(1.08) }

/* The honeypot. Hidden from people without display:none, which some bots read
   as a signal to skip the field -- the point is that they fill it in. */
.hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.err{
  margin:0 0 4px; padding:13px 16px; color:var(--ink);
  background:var(--paper-2); border-left:3px solid var(--accent);
}
.note{ margin:32px 0 0; font-size:15px; color:var(--ink-3) }
.back{ margin:32px 0 0; font-size:15px }
.nowrap{ white-space:nowrap }

/* A form button that reads as a link: sign-out and ending a session are POSTs,
   so they cannot be anchors, but they sit in running text and menus [H50]. */
.linkish{
  font:inherit; color:var(--accent); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
form.inline{ display:inline }

/* The application's own header [H59], in place of the public rail inside /app. */
.app-header{
  position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px);
}
.app-header-in{
  max-width:1180px; margin:0 auto; padding:10px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.app-header .mk{ line-height:0 }
.app-header .mk img{ height:30px; width:auto }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .app-header .mk img{ filter:invert(1) brightness(1.08) }
}
.app-header-actions{ display:flex; align-items:center; gap:10px }
.app-header form{ margin:0; display:inline }
.avatar, .icon-button{
  width:36px; height:36px; border-radius:50%; margin:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line);
  text-decoration:none; cursor:pointer;
}
.avatar:hover, .icon-button:hover{ color:var(--accent); border-color:var(--accent); filter:none }
.avatar .initials{ font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--ink) }

/* The account: two panes, one card per section [H59]. The sheet is widened
   for it; everything else keeps the reading measure. */
.sheet:has(.account){ max-width:1080px }
.account h1{ margin-bottom:24px }
.account-panes{ display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start }
.account-nav{ position:sticky; top:76px; display:flex; flex-direction:column; gap:2px }
.account-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
  color:var(--ink-2); text-decoration:none; font-size:16px;
}
.account-nav a:hover{ background:var(--paper-2); color:var(--ink) }
.account-nav .glyph{ display:inline-flex; color:var(--ink-3) }
.account-cards{ display:flex; flex-direction:column; gap:20px; min-width:0 }
.card{
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  scroll-margin-top:80px;
}
.card > header{ padding:16px 20px 12px; border-bottom:1px solid var(--line-2) }
.card > header h2{ margin:0; font-size:21px; font-weight:600; color:var(--ink) }
.card > header p{ margin:2px 0 0; font-size:14px; color:var(--ink-3) }
.card-body{ padding:16px 20px 18px; display:flex; flex-direction:column; gap:12px }
.card-body p{ margin:0 }
.fields{ margin:0 }
.field{ display:grid; grid-template-columns:160px 1fr; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--line-2) }
.field:last-child{ border-bottom:0 }
.field dt{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:3px }
.field dd{ margin:0; color:var(--ink) }
.aside{ margin-left:10px; font-size:15px }
.card-form{ margin:0 }
.card-form select{ font:inherit; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:2px; padding:10px 12px; width:100% }
.card-actions{ display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:6px }
.card-actions button{ margin:0 }
.button-quiet{ font-size:16px; padding:8px 16px; border:1px solid var(--line); border-radius:2px;
  color:var(--ink); text-decoration:none }
.button-quiet:hover{ border-color:var(--accent); color:var(--accent) }
.button-danger{ font-size:16px; padding:9px 18px; border-radius:2px; text-decoration:none;
  color:var(--paper); background:var(--accent) }
@media (max-width:760px){
  .account-panes{ grid-template-columns:1fr; gap:16px }
  .account-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px }
  .account-nav a{ padding:9px; border:1px solid var(--line); border-radius:50% }
  .account-nav .label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .field{ grid-template-columns:1fr; gap:2px }
}

/* Choosing a look or a brightness: each option is a small card. */
/* Continue with Google, in Google's light style: a block box, so its padding
   takes space instead of riding up over the button above it. */
.provider{ margin:20px 0 0 }
.google-button{ display:inline-flex; align-items:center; gap:12px; padding:10px 16px;
  background:#fff; border:1px solid #747775; border-radius:4px; color:#1f1f1f;
  font:500 15px/1.2 Roboto, Arial, sans-serif; text-decoration:none }
.google-button:hover{ background:#f8f9fa; border-color:#5f6368 }
.google-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Keep me signed in [H63]: a checkbox and its sentence on one line, not the
   uppercase field-label style, and not a full-width input. */
label.keep{ display:flex; align-items:center; gap:10px; margin:18px 0 0;
  font-size:16px; letter-spacing:0; text-transform:none; color:var(--ink-2); cursor:pointer }
label.keep input{ width:auto; margin:0; accent-color:var(--accent) }

.card-form fieldset{ border:0; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:8px }
.card-form legend{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px }
.choice{
  display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; cursor:pointer;
  font-size:16px; letter-spacing:0; text-transform:none; color:var(--ink-2);
}
.choice:has(input:checked){ border-color:var(--accent) }
.choice input{ width:auto; margin-top:5px; accent-color:var(--accent) }
.choice strong{ color:var(--ink); font-weight:600 }