/* George Patin — the public site (the Manuscript design, adopted 27 Oct 2026). Source file: build.py copies it to dist/assets/.
   Layout: a clean manuscript. Typescript's single quiet column, without the terminal: the typewriter is a voice (headings, labels, numbers),
   an editorial serif does the reading. Hairline rules, generous space, the live interference plate as the one picture.
   Paper by default, graphite on request (George, 27 Oct). Ochre is the one accent. */
:root {
  --ground: #F2F0EA; --sheet: #EAE7DF; --ink: #1C1B19; --muted: #5A5750; --dim: #7A7770; --line: #D6D2C8; --ochre: #A45417; --on-ochre: #F2F0EA; --fig: #3B3A37;
  --f-type: "Courier Prime", "Courier New", monospace; --f-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
:root[data-theme="dark"] { --ground: #212120; --sheet: #282826; --ink: #ECEAE3; --muted: #A9A69D; --dim: #807E76; --line: #3A3936; --ochre: #D08A45; --on-ochre: #212120; --fig: #C4C1B8; color-scheme: dark }
* { box-sizing: border-box }
[hidden] { display: none !important }
img, svg { max-width: 100% }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: var(--ink); color: var(--ground); padding: 8px 12px; font: 14px var(--f-type) }
.skip:focus { left: 16px }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.6 var(--f-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 1px solid var(--ochre); outline-offset: 3px }
::selection { background: var(--ochre); color: var(--on-ochre) }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0 }
h1, h2, h3, h4 { font-weight: 400; font-family: var(--f-type); text-wrap: balance }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
@media (min-width: 900px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)) } }
.t { font-family: var(--f-type) }
.lab { font: 400 12px/1.4 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.muted { color: var(--muted) } .dim { color: var(--dim) }
.u { border-bottom: 1px solid var(--line); transition: border-color .2s } .u:hover { border-color: var(--ochre) }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); margin-right: 7px; vertical-align: 1px }

/* masthead */
.mast { border-bottom: 1px solid var(--line) }
.mast .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; padding-block: 26px 22px }
.mast .nm { font: 400 19px var(--f-type); letter-spacing: -.02em }
.mast nav { display: flex; gap: 6px 30px; flex-wrap: wrap; font: 400 14.5px var(--f-type) }
.mast nav a { color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent }
.mast nav a:hover { color: var(--ink) }
.mast nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ochre) }
.tgl { all: unset; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--muted); background: linear-gradient(90deg, var(--muted) 50%, transparent 50%); align-self: center }

/* sections */
.sec { padding-top: 84px } .sec.close { padding-top: 56px } .sec.closer { padding-top: 48px }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.sec-h .lab { flex-basis: 100% }
.sec-h h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; line-height: 1.2 }
.sec-h .more { margin-left: auto }
.row-g { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px }

/* hero */
.hero { padding-top: 64px }
.hero-top { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap }
.hero-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-top: 30px }
.hero h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.045em }
.hero .say { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 30em; text-align: right; justify-self: end }
.plate { position: relative; margin: 56px 0 0; --ph: clamp(200px, 30vh, 320px); --lab: 96px; padding-top: var(--lab) }
.plate-lines { display: block; width: 100%; height: var(--ph); margin-bottom: 14px; color: var(--fig) }
.plate-lines polyline { vector-effect: non-scaling-stroke }
.plate-doors a { position: absolute; top: 0; left: var(--x); width: 20%; height: calc(var(--lab) + var(--ph) * var(--d)); border-left: 1px solid var(--dim); padding-left: 14px; transition: border-color .15s }
.plate-doors a::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink) }
.plate-doors .n { display: block; font: 12px var(--f-type); color: var(--dim) }
.plate-doors b { display: block; font: 400 21px/1.3 var(--f-type); letter-spacing: -.03em; margin-top: 2px; transition: color .15s }
.plate-doors .c { display: block; font-size: 15px; color: var(--muted); font-style: italic }
.plate-doors a:nth-child(1) { --x: 4%; --d: .46 } .plate-doors a:nth-child(2) { --x: 29%; --d: .7 } .plate-doors a:nth-child(3) { --x: 54%; --d: .36 } .plate-doors a:nth-child(4) { --x: 79%; --d: .6 }
.plate-doors a:hover { border-color: var(--ochre) } .plate-doors a:hover b { color: var(--ochre) } .plate-doors a:hover::after { background: var(--ochre) }
.cap { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px }
.cap .motto { font-style: italic; color: var(--muted); font-size: 15px }

/* now, questions */
.nowr { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.4fr) 24px; gap: 4px 32px; padding-block: 18px; border-bottom: 1px solid var(--line); align-items: baseline }
.nowr b { font: 400 17px var(--f-type); letter-spacing: -.02em }
.nowr .r { color: var(--muted); font-style: italic } .nowr .x { color: var(--muted); font-size: 16px } .nowr .go { color: var(--dim); text-align: right; font-family: var(--f-type) }
a.nowr:hover b, a.nowr:hover .go { color: var(--ochre) }
.qs details { border-bottom: 1px solid var(--line) }
.qs summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 200px minmax(0, 1fr) 24px; gap: 8px 32px; padding-block: 18px; align-items: baseline }
.qs summary::-webkit-details-marker { display: none }
.qs .n { font: 13px var(--f-type); color: var(--dim) }
.qs summary h3 { font-size: clamp(19px, 1.9vw, 23px); letter-spacing: -.025em; line-height: 1.3 }
.qs .pm { font-family: var(--f-type); color: var(--dim); text-align: right }
.qs summary:hover h3, .qs details[open] .n, .qs details[open] .pm { color: var(--ochre) }
.qs details[open] .pm { font-size: 0 } .qs details[open] .pm::after { content: "−"; font-size: 18px }
.qs .in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; padding-bottom: 28px }
.qs .in > div { grid-column: 2 }
.qs .in p { color: var(--muted); max-width: 40em; margin-bottom: 18px }
.qs .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; font-size: 16px }
.qs .cols a { display: block; padding-block: 3px; color: var(--muted) } .qs .cols a:hover { color: var(--ink) }

/* writing rows */
.wr { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 4px 32px; padding-block: 20px; border-bottom: 1px solid var(--line); align-items: baseline }
.wr .d { font: 13px var(--f-type); color: var(--dim) }
.wr b { display: block; font: 400 21px/1.3 var(--f-type); letter-spacing: -.025em }
.wr .dk { display: block; color: var(--muted); font-size: 16.5px; margin-top: 4px; max-width: 40em }
.feat { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 32px; padding-block: 40px 44px; border-bottom: 1px solid var(--line) }
.feat h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.04em }
.feat .dk { font-size: 21px; line-height: 1.45; font-style: italic; color: var(--muted); margin-top: 14px; max-width: 34em }
.feat .ex { font-size: 18.5px; line-height: 1.65; margin-top: 18px; max-width: 36em }
.feat .meta-l { display: grid; gap: 4px; font: 13px/1.5 var(--f-type); color: var(--dim); align-content: start; padding-top: 10px }
.feat .go { display: inline-block; margin-top: 20px; font: 15px var(--f-type) }
a.feat:hover h2 { color: var(--ochre) }
.wr .p { font: 12px var(--f-type); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
a.wr:hover b { color: var(--ochre) }
.desk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 22px }
.desk3 > * { border-top: 1px solid var(--ink); padding-top: 14px; display: grid; gap: 4px; align-content: start }
.desk3 b { font: 400 20px/1.25 var(--f-type); letter-spacing: -.025em }
.desk3 .a { font-style: italic; color: var(--muted) }
.desk3 p { color: var(--muted); font-size: 16px; margin-top: 6px }

/* page heads */
.ph { padding-top: 64px; padding-bottom: 28px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 64px; align-items: end }
.ph h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.045em; margin-top: 14px }
.ph p { color: var(--muted); font-size: 19px; max-width: 30em } .ph p + p { margin-top: .7em } .ph .say p:first-child { color: var(--ink) }
/* a longer intro reads as a standfirst under the heading, not a column beside it */
.ph.stack { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 26px } .ph.stack .say { max-width: 40em } .ph.stack .say p { max-width: none }
.filters { display: flex; gap: 6px 22px; flex-wrap: wrap; padding-block: 20px 0; font: 14px var(--f-type) }
.f { all: unset; cursor: pointer; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent }
.f[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ochre) } .f:hover { color: var(--ink) } .f:focus-visible, .tgl:focus-visible { outline: 1px solid var(--ochre); outline-offset: 3px }
.f .c { color: var(--dim); margin-left: 6px }

/* projects by cluster */
.cl { display: grid; grid-template-columns: 200px minmax(0, .8fr) minmax(0, 1.5fr); gap: 10px 32px; padding-block: 34px; border-bottom: 1px solid var(--line) }
.cl .n { font: 13px var(--f-type); color: var(--dim) }
.cl h2 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.035em; line-height: 1.1 }
.cl .k { margin-top: 10px; font-size: 15.5px; font-style: italic; color: var(--muted) }
.sub p { color: var(--muted); font-size: 17px; max-width: 36em } .sub p + p { margin-top: .75em }
.sub p:first-child { color: var(--ink); font-size: 19px; line-height: 1.45 }
.cl ul { list-style: none; padding: 0; margin-top: 16px; font: 13.5px/1.9 var(--f-type); color: var(--muted); columns: 2; column-gap: 24px }
.cl ul li { break-inside: avoid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cl .open { display: inline-block; margin-top: 16px; font: 14px var(--f-type) }
a.cl:hover h2 { color: var(--ochre) }

/* cluster page */
.clh { padding-top: 64px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px 32px }
.clh h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.045em }
.clh .sub { margin-top: 22px } .clh .sub p { font-size: 18px }
.clh .sub p:first-child { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.4; max-width: 30em }
.meta { display: grid; gap: 12px; align-content: start; font: 13.5px/1.5 var(--f-type); color: var(--muted); padding-top: 12px }
.meta .lab { display: block; margin-bottom: 2px }
.ent { display: grid; grid-template-columns: 200px minmax(0, 1fr) 90px; gap: 4px 32px; padding-block: 18px; border-bottom: 1px solid var(--line); align-items: baseline }
.ent .g { font: 12px var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.ent b { font: 400 19px/1.3 var(--f-type); letter-spacing: -.02em; display: block }
.ent .l { color: var(--muted); font-size: 16.5px; display: block; margin-top: 3px }
.ent .y { font: 13px var(--f-type); color: var(--dim); text-align: right }
.pager { display: flex; justify-content: space-between; gap: 20px; padding-top: 40px; font: 14px var(--f-type); color: var(--muted); flex-wrap: wrap }
.pager a:hover { color: var(--ochre) }

/* reader */
.rd { max-width: 720px; margin: 0 auto; padding-top: 72px }
.rd .meta-l { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 13px var(--f-type); color: var(--dim) }
.rd h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.06; letter-spacing: -.045em; margin-top: 20px }
.rd .dek { font-size: 23px; line-height: 1.4; font-style: italic; color: var(--muted); margin: 18px 0 44px }
.prose { font-size: 19.5px; line-height: 1.65 }
.prose p, .prose ol { margin: 0 0 1.1em } .prose ol { padding-left: 1.3em } .prose li { margin-bottom: .5em }
.prose a, .absent a { border-bottom: 1px solid var(--line) }
.prose > p:first-child::first-line { font-variant: small-caps; letter-spacing: .03em }
.absent { border: 1px dashed var(--line); padding: 20px; color: var(--muted); font-size: 17px }
.dinkus { text-align: center; font-family: var(--f-type); letter-spacing: .8em; color: var(--ochre); margin: 2em 0 1em }
.rd .origin { font: 14px var(--f-type); color: var(--muted); margin-top: 30px } .rd .origin a { border-bottom: 1px solid var(--line) }
.rd .q-link { font: 14px var(--f-type); color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px }

/* reading room */
.shelf { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 32px; padding-block: 28px; border-bottom: 1px solid var(--line) }
.shelf h3 { font-size: 17px; letter-spacing: -.02em } .shelf .c { font: 13px var(--f-type); color: var(--dim); margin-top: 4px }
.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px }
.bk { display: block; padding-block: 8px; border-bottom: 1px solid var(--line) }
.bk summary { list-style: none; cursor: pointer } .bk summary::-webkit-details-marker { display: none }
.bk .ti { font-size: 17.5px } .bk .au { color: var(--muted); font-style: italic; font-size: 16px } .bk .yr { font: 12.5px var(--f-type); color: var(--dim); margin-left: 6px }
.bk .st { font-family: var(--f-type); color: var(--ink); margin-right: 4px }
.bk .nt { display: block; color: var(--muted); font-size: 15.5px; padding-top: 4px; margin: 0 } .bk .nt a { border-bottom: 1px solid var(--line) }
details.bk:hover .ti, details.bk[open] .ti { color: var(--ochre) }

/* about */
.ph .dek { font-style: italic; font-size: 21px; margin-top: 12px; max-width: none }
.ph .body .ct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 1.4em; font: 15px var(--f-type) }
.cp { all: unset; cursor: pointer; font: 11.5px var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) } .cp:hover { color: var(--ink) } .cp:focus-visible { outline: 1px solid var(--ochre); outline-offset: 3px }
.ph .body { max-width: 40em } .ph .body p { color: var(--ink); max-width: none } .ph .body p + p { margin-top: .8em }
.ch { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; padding-block: 34px; border-bottom: 1px solid var(--line) }
.ch .when { font: 13px/1.6 var(--f-type); color: var(--dim) } .ch .when b { display: block; font-weight: 400; color: var(--ink) }
.ch h3 { font-size: 23px; letter-spacing: -.03em; margin-bottom: 14px }
.ch p { max-width: 36em; margin-bottom: 1em; color: var(--muted) } .ch p:first-of-type { color: var(--ink) }
.ch.lead-in { border: 0 } .more-link { font-size: 15px } .edu-i { font-size: 16px }
.ch .rc { font: 13px/1.6 var(--f-type); color: var(--dim) }
.ch .lk { font: 14px/1.6 var(--f-type) } .ch .lk a { color: var(--ink) } .ch .lk a:hover { color: var(--ochre) }

footer { margin-top: 110px; border-top: 1px solid var(--line) }
footer .wrap { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 22px 50px; font: 13.5px var(--f-type); color: var(--dim) }
footer a:hover { color: var(--ochre) }
footer .colo { flex-basis: 100%; font-size: 12.5px }

@media (max-width: 900px) {
  .sec-h, .row-g, .nowr, .qs summary, .qs .in, .wr, .cl, .clh, .ent, .shelf, .ch, .hero-main, .ph { grid-template-columns: minmax(0, 1fr) }
  .qs .in > div { grid-column: 1 } .sec-h .more { grid-column: 1; justify-self: start }
  .qs summary { grid-template-columns: 34px minmax(0, 1fr) 20px } .nowr .go { display: none }
  .ent .y { text-align: left }
  .plate { padding-top: 0; --ph: 190px } .plate-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px }
  .plate-doors a { position: static; width: auto; height: auto } .plate-doors a::after { display: none }
  .desk3 { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 900px) { .hero .say { text-align: left; justify-self: start } .feat { grid-template-columns: minmax(0, 1fr) } .feat .meta-l { grid-auto-flow: column; justify-content: start; gap: 4px 14px } }
@media (max-width: 600px) { body { font-size: 17px } .books, .qs .cols { grid-template-columns: minmax(0, 1fr) } .cl ul { columns: 1 } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
/* highlights, at a glance and the record */
.sec-h .more { font: 14px var(--f-type) }
.hl3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 32px; padding-top: 24px }
.hc { border-top: 1px solid var(--ink); padding-top: 14px; display: grid; gap: 6px; align-content: start }
.hc b { font: 400 21px/1.25 var(--f-type); letter-spacing: -.025em; transition: color .15s }
.hc .ln { color: var(--muted); font-size: 16.5px; line-height: 1.5 }
.hc .yr { font: 12.5px var(--f-type); color: var(--dim); margin-top: 2px }
a.hc:hover b { color: var(--ochre) }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 64px; padding-top: 24px }
.glance > div { display: grid; align-content: start }
.glance .lab { padding-bottom: 10px; border-bottom: 1px solid var(--ink) }
.gl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding-block: 13px; border-bottom: 1px solid var(--line); align-items: baseline }
.gl b { font: 400 17px var(--f-type); letter-spacing: -.02em; transition: color .15s }
.gl span { color: var(--muted); font-style: italic; font-size: 16px; text-align: right }
a.gl:hover b { color: var(--ochre) }
.rg ul, .marks { list-style: none; padding: 0; margin: 0 }
.recA { columns: 3; column-gap: 32px; padding-top: 24px }
.rg { break-inside: avoid; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 30px }
.rg li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-block: 9px; border-bottom: 1px solid var(--line) }
.rg li b { font-weight: 400; font-size: 17px; line-height: 1.35 }
.rg li .o { grid-column: 1; color: var(--muted); font-style: italic; font-size: 15.5px; line-height: 1.4 }
.rg li .y { grid-column: 2; grid-row: 1; font: 12.5px/1.9 var(--f-type); color: var(--dim) }
/* education: two short cards on the same three-column grid as the record below */
.edu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; padding-top: 24px } .edu .rg { margin-bottom: 0 }
.marks { margin-top: 18px; display: grid; gap: 10px; max-width: 190px }
.marks li { position: relative; padding-left: 14px; font: 14.5px/1.4 var(--f-text); color: var(--ink) }
.marks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ochre) }
.marks li span { display: block; font: 12px var(--f-type); color: var(--dim); margin-top: 1px }
@media (max-width: 1100px) { .recA { columns: 2 } .edu { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 900px) { .hl3, .glance { grid-template-columns: minmax(0, 1fr) } .marks { max-width: none } }
@media (max-width: 600px) { .recA { columns: 1 } .edu { grid-template-columns: minmax(0, 1fr); gap: 24px } }