/* ==========================================================================
   Field note stylesheet.

   A deliberate deviation from the "copy, do not import" rule in the design
   system README, and the reason is scale rather than taste. That rule exists so
   one property cannot break because a shared dependency changed underneath it;
   it is about sharing markup ACROSS properties. This file is shared by a set of
   same-shaped pages WITHIN one property, where the alternative is carrying an
   identical two-hundred-line style block in fifteen files and fixing every bug
   fifteen times. index.html, cv.html and the long-form essay stay self-contained,
   because each of those is one of a kind.

   It is still a local file. No network request, works from disk, and the deploy
   gate's external-subresource check passes because nothing here reaches a host.

   Values are copied verbatim from the reference pages. Nothing is rounded and
   nothing is renamed; tokens.css in _shared remains the source of truth.
   ========================================================================== */

:root{
  --paper:#F1F0EB; --paper-top:#F3F1EB; --paper-bot:#EEEEEA;
  --ink:#14191F; --slate:#5C6672; --marine:#16565C; --amber:#8B6010;
  --line:#D3D2CB; --wash:#E9E8E1;
  --on-marine:#F3F2ED;

  --radius:4px;
  --radius-sm:3px;
  --hair:1px;
  --unit:0.4rem;

  --fs-3xs:0.6875rem;
  --fs-2xs:0.75rem;
  --fs-xs:0.8125rem;
  --fs-sm:0.9375rem;
  --fs-base:1rem;
  --fs-lg:1.0625rem;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
}
@media (min-resolution:2dppx){ :root{ --hair:0.75px } }

@media (prefers-color-scheme: dark){
  :root{
    --paper:#111519; --paper-top:#131820; --paper-bot:#0E1216;
    --ink:#E8E7E1; --slate:#96A1AC; --marine:#6FC0C1; --amber:#D5A23F;
    --line:#29303A; --wash:#171D23;
    --on-marine:#0E1216;
  }
}
:root[data-theme="dark"]{
  --paper:#111519; --paper-top:#131820; --paper-bot:#0E1216;
  --ink:#E8E7E1; --slate:#96A1AC; --marine:#6FC0C1; --amber:#D5A23F;
  --line:#29303A; --wash:#171D23;
  --on-marine:#0E1216;
}
:root[data-theme="light"]{
  --paper:#F1F0EB; --paper-top:#F3F1EB; --paper-bot:#EEEEEA;
  --ink:#14191F; --slate:#5C6672; --marine:#16565C; --amber:#8B6010;
  --line:#D3D2CB; --wash:#E9E8E1;
  --on-marine:#F3F2ED;
}

*{box-sizing:border-box}

html{background:var(--paper)}
body{
  margin:0; min-height:100vh;
  color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(180deg, var(--paper-top) 0%, var(--paper-bot) 100%);
  background-size:100% 100vh;
  background-repeat:no-repeat;
  font-family:var(--serif); font-size:17px; line-height:1.62;
  font-kerning:normal; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
.page{max-width:46rem; margin:0 auto; padding:calc(var(--unit)*6) 1.15rem calc(var(--unit)*12)}

h1{
  font-size:clamp(1.7rem,6.2vw,2.4rem); line-height:1.18; font-weight:600;
  letter-spacing:-.012em; margin:calc(var(--unit)*0.5) 0 calc(var(--unit)*2.25);
  max-width:24ch;
}
h2{
  font-size:clamp(1.1rem,4vw,1.3rem); line-height:1.3; font-weight:600;
  letter-spacing:-.006em; margin:calc(var(--unit)*6) 0 calc(var(--unit)*2); max-width:30ch;
}
h3{
  font-size:var(--fs-base); font-weight:600; line-height:1.35;
  margin:0 0 calc(var(--unit)*1.5); letter-spacing:-.003em;
}
/* The spine notes number their sections and give each a second, plainer name.
   In the source build the number sat inside the heading in a sans face; here it
   is the same eyebrow the masthead and the sources use, set on its own line, so
   the heading itself stays one line of type. */
h2 .n{
  display:block;
  font-family:var(--serif); font-size:var(--fs-3xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  font-weight:400; margin-bottom:calc(var(--unit)*1);
}
p{margin:0 0 calc(var(--unit)*2.5); max-width:38rem}
p:last-child{margin-bottom:0}
.lede{font-size:var(--fs-lg)}
.meta{
  display:inline-block;
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; margin-right:-.08em;
  text-transform:uppercase; color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.rule{height:var(--hair); background:var(--line); border:0; margin:calc(var(--unit)*4) 0}

header.masthead{padding-bottom:calc(var(--unit)*1.5)}
header.masthead .meta{display:block; margin-bottom:calc(var(--unit)*3.5)}
.standfirst{
  font-size:var(--fs-lg); color:var(--slate); max-width:34rem;
  margin:0 0 calc(var(--unit)*4);
}

/* The series line on the index; a colophon, not a second standfirst. Set below the
   standfirst in the smaller size so it reads as imprint information rather than as a
   competing lede. The hairline above it does the separating, so no colour is needed. */
.seriesline{
  font-size:var(--fs-sm); color:var(--slate); max-width:34rem;
  margin:0 0 calc(var(--unit)*4);
  padding-top:calc(var(--unit)*2);
  border-top:var(--hair) solid var(--line);
}

a{
  color:var(--ink); text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-color:var(--marine); text-decoration-thickness:var(--hair);
  transition:text-decoration-thickness 120ms ease, text-decoration-color 120ms ease;
}
a:hover{text-decoration-thickness:2px}
:focus-visible{
  outline:2px solid var(--marine); outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* The set-off line. In the source build this was a filled card; here it is a rule and
   a measure, because the page's whole visual argument is set type rather than boxes. */
blockquote.carry{
  margin:calc(var(--unit)*4) 0; padding-left:calc(var(--unit)*3);
  border-left:2px solid var(--marine);
  font-size:var(--fs-lg); line-height:1.5; color:var(--ink);
  max-width:34rem;
}
blockquote.carry p{margin:0}

/* Sources. Every note carries them and they are the point, so they are set as
   readable lines rather than shrunk into a footnote the eye skips. */
.sourcelist{
  margin:calc(var(--unit)*6) 0 0;
  border-top:var(--hair) solid var(--line);
  padding-top:calc(var(--unit)*2.5);
}
.sourcelist h3{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  font-weight:400; margin-bottom:calc(var(--unit)*2);
}
.sourcelist div, .sourcelist p{
  font-size:var(--fs-sm); line-height:1.5;
  margin-bottom:calc(var(--unit)*1.75); max-width:38rem;
}
.sourcelist div:last-child, .sourcelist p:last-child{margin-bottom:0}
/* Some notes carry a method paragraph above the list rather than a list of links;
   it is the same voice at the same size, so it takes the same treatment. */
.sourcelist .note{color:var(--slate)}
/* An individual source entry. Hung so the author's name starts the line and the
   wrapped title sits under the title, which is how a reference list is read. */
.sourcelist .src{padding-left:1.2rem; text-indent:-1.2rem}

ul, ol{margin:0 0 calc(var(--unit)*2.5); padding-left:1.1rem; max-width:38rem}
li{margin-bottom:calc(var(--unit)*1.25); line-height:1.55}
li:last-child{margin-bottom:0}

/* the publication block; identical treatment to the long-form essay so an article
   is recognisably an article whatever its length */
.pubinfo{
  border-top:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  padding:calc(var(--unit)*2.5) 0;
  margin:calc(var(--unit)*6) 0 0;
}
.pubinfo dl{margin:0; display:grid; grid-template-columns:9.5rem 1fr; gap:calc(var(--unit)*1.25) 1rem}
.pubinfo dt{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
}
.pubinfo dd{
  margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@media (max-width:30rem){
  .pubinfo dl{grid-template-columns:1fr; gap:calc(var(--unit)*0.5) 0}
  .pubinfo dd{margin-bottom:calc(var(--unit)*1.5)}
  .pubinfo dd:last-child{margin-bottom:0}
}

footer{
  margin-top:calc(var(--unit)*7.5); color:var(--slate);
  text-align:center;
}
.sonny{
  display:inline-block; vertical-align:-.18em; margin-left:.45em;
  color:var(--slate); opacity:.7;
}
footer p{
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1.55; letter-spacing:.03em;
  margin-inline:0; text-wrap:initial;
}

#themeToggle{
  position:fixed; top:.7rem; right:.7rem; z-index:5;
  font-family:var(--serif); font-size:var(--fs-2xs); line-height:1;
  letter-spacing:.08em; text-transform:uppercase; text-indent:.08em;
  background:var(--wash); color:var(--slate);
  border:var(--hair) solid var(--line);
  padding:calc(var(--unit)*1) calc(var(--unit)*1.375);
  cursor:pointer; border-radius:var(--radius-sm);
  transition:color 120ms ease, border-color 120ms ease;
}
#themeToggle:hover{color:var(--ink); border-color:var(--slate)}

/* the writing index */
ol.notes{list-style:none; margin:0; padding:0}
ol.notes li{
  border-top:var(--hair) solid var(--line);
  padding:calc(var(--unit)*2.5) 0;
}
ol.notes li:last-child{border-bottom:var(--hair) solid var(--line)}
.notetitle{font-size:var(--fs-lg); line-height:1.35; display:block}
.notedek{display:block; margin-top:calc(var(--unit)*1); font-size:var(--fs-sm); line-height:1.5; color:var(--slate)}

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