/* PROTOTYPE, throwaway. Direction A: a Finder screen in the grammar of System 6, pure 1 bit.
   Every measure of the chrome is in Mac pixels (--px): the original sizes at 1x (20 px menu bar, 19 px title
   bar with six stripes, 16 px scroll bars, 32 px icons), drawn at whole device pixels so they stay sharp:
   3 device pixels per Mac pixel on a retina screen (1.5 CSS px), 2 on a normal one. Reading text scales with
   the chrome through --k. */
@font-face{font-family:Scambio;src:url(fonts/scambio.woff2) format("woff2");font-display:block}
@font-face{font-family:Overpass;src:url(fonts/overpass.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{--ink:#000;--paper:#F8F5EC;--px:2px;color-scheme:light;
  /* one accent, one meaning: the window you are working in, and what leaves this machine (links out, selection) */
  --accent:#E0007A;--on-accent:#fff;--detail:#2B50FF;--stripe:var(--accent);--detail-fg:var(--detail)}
/* on white the 1-pixel stripes read paler than the colour: the magenta goes one step hotter there (not text, 3.8:1) */
:root[data-accent="magenta"]:not([data-theme="dark"]){--stripe:#FF0080}
:root[data-theme="dark"]{--ink:#fff;--paper:#000;color-scheme:dark}
:root{--k:1}
/* retina screens: 3 device pixels per Mac pixel */
@media (min-resolution:1.5dppx){:root{--px:1.5px;--k:.84}}
/* phones: 3 device pixels per Mac pixel at 2x, 4 at 3x, so the chrome stays sharp and fits */
@media (max-width:860px){:root{--px:1.5px;--k:.9}}
@media (max-width:860px) and (min-resolution:2.5dppx){:root{--px:calc(4px/3)}}
:root{
  --u:var(--px);
  /* the System 6 grey: one ink pixel in every 2 x 2 */
  --grey:conic-gradient(at var(--u) var(--u),#0000 75%,var(--ink) 0) 0 0/calc(2*var(--u)) calc(2*var(--u));
  --chrome:calc(12*var(--u))/calc(16*var(--u)) Scambio,monospace;
  --read:400 max(15px,calc(17px*var(--k)))/1.55 Overpass,system-ui,sans-serif;
  /* motion: one curve, short; the Mac never eased, we ease only what moves far */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:var(--chrome);-webkit-font-smoothing:none;font-smooth:never}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default}
:focus-visible{outline:var(--u) dotted var(--ink);outline-offset:var(--u)}
svg .i{fill:var(--ink)} svg .p{fill:var(--paper)}
.ic,.ic16,.arw,.sarw,.mark,.mark-big{display:block;flex:none}
.ic{width:calc(32*var(--u));height:calc(32*var(--u))}
.ic16{width:calc(16*var(--u));height:calc(16*var(--u))}
.arw{width:calc(9*var(--u));height:calc(8*var(--u))}
.sarw{width:calc(8*var(--u));height:calc(7*var(--u))}
.mark{width:calc(17*var(--u));height:calc(12*var(--u))}
.mark-big{width:calc(34*var(--u));height:calc(24*var(--u))}
code{font:500 .92em/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em}

/* ---------- menu bar ---------- */
.menubar{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;height:calc(20*var(--u));background:var(--paper);border-bottom:var(--u) solid var(--ink)}
.menus{display:flex;height:calc(19*var(--u));padding-left:calc(10*var(--u))}
.menus>li{position:relative}
.menus summary{list-style:none;display:flex;align-items:center;height:calc(19*var(--u));padding:0 calc(9*var(--u));user-select:none}
.menus summary::-webkit-details-marker{display:none}
.menus details[open]>summary{background:var(--ink);color:var(--paper)}
.menus details[open]>summary .i{fill:var(--paper)}
.menus details[open] ul{animation:drop .09s var(--ease)}
@keyframes drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -8px 0)}}
.menus details li>.blink{animation:blink .19s steps(1) both}
@keyframes blink{0%,50%{background:var(--paper);color:var(--ink)}25%,75%{background:var(--ink);color:var(--paper)}}
.menus details ul{position:absolute;left:0;top:calc(19*var(--u));min-width:calc(170*var(--u));padding:var(--u) 0;background:var(--paper);border:var(--u) solid var(--ink);box-shadow:var(--u) var(--u) 0 var(--ink)}
.menus details li>*{position:relative;display:block;width:100%;text-align:left;padding:0 calc(16*var(--u)) 0 calc(17*var(--u));line-height:calc(16*var(--u));white-space:nowrap}
.menus details li>a:hover,.menus details li>button:hover,.menus details li>:focus-visible{background:var(--ink);color:var(--paper);outline:0}
.menus [aria-disabled]{color:transparent;background:var(--grey);-webkit-background-clip:text;background-clip:text}
.menus [aria-checked="true"]::before{content:"";position:absolute;left:calc(6*var(--u));top:calc(4*var(--u));width:calc(7*var(--u));height:calc(8*var(--u));background:currentColor;-webkit-mask:url(check.svg) 0 0/100% 100%;mask:url(check.svg) 0 0/100% 100%}
.menus>li:last-child details ul{left:auto;right:0}
.menus .sep{height:0;border-top:var(--u) dotted var(--ink);margin:var(--u) 0}
/* the toast floats over the right of the menu bar, so a long word in the menu can never push the page wider */
.toast{position:absolute;right:0;top:0;height:calc(19*var(--u));display:flex;align-items:center;padding:0 calc(10*var(--u));background:var(--paper);white-space:nowrap}
.toast:empty{display:none}
@media (max-width:480px){.menus summary{padding:0 calc(5*var(--u))}}

/* ---------- windows ---------- */
.win{display:grid;grid-template:"bar bar" calc(19*var(--u)) "info info" auto "pane v" 1fr "h grow" calc(16*var(--u))/1fr calc(16*var(--u));
  background:var(--paper);border:var(--u) solid var(--ink);box-shadow:var(--u) var(--u) 0 var(--ink);min-width:0}
.win.plain{grid-template:"bar" calc(19*var(--u)) "info" auto "pane" auto/1fr}
.bar{grid-area:bar;position:relative;display:flex;justify-content:center;align-items:center;border-bottom:var(--u) solid var(--ink);user-select:none;touch-action:none;min-width:0}
.bar::before{content:"";position:absolute;left:var(--u);right:var(--u);top:calc(3*var(--u));height:calc(11*var(--u));
  background:repeating-linear-gradient(var(--stripe) 0 var(--u),#0000 var(--u) calc(2*var(--u)));transform:scaleX(0);transition:transform .16s var(--ease)}
.front .bar::before{transform:none}
/* depth in one bit: the window in front throws a deep hard shadow and sits in a 2 px moat of paper, so it never merges with the
   windows behind; those lie flat, without a shadow, and lose their stripes */
.desk .win{box-shadow:none;transition:box-shadow .16s var(--ease)}
.desk .win.front{box-shadow:0 0 0 calc(2*var(--u)) var(--paper),calc(5*var(--u)) calc(5*var(--u)) 0 var(--ink)}
.desk .win.shaded.front{box-shadow:0 0 0 calc(2*var(--u)) var(--paper),calc(3*var(--u)) calc(3*var(--u)) 0 var(--ink)}
.bar h2,.close,.zoom{position:relative;z-index:1}
.close,.zoom{position:absolute}
.bar h2{position:relative;z-index:1;font:inherit;min-width:0;max-width:calc(100% - 64*var(--u))}
.bar h2 span{display:block;background:var(--paper);padding:0 calc(6*var(--u));line-height:calc(16*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.close,.zoom{position:absolute;top:calc(3*var(--u));width:calc(13*var(--u));height:calc(13*var(--u));border:var(--u) solid var(--ink);background:var(--paper);box-shadow:0 0 0 var(--u) var(--paper)}
.close{left:calc(8*var(--u))} .zoom{right:calc(8*var(--u))}
.close,.zoom{display:grid;place-items:center;cursor:pointer;transition:background-color .12s var(--ease)}
.gx{width:calc(7*var(--u));height:calc(7*var(--u))}
.gx .i{fill:var(--ink);transition:fill .12s var(--ease)}
@media (hover:hover){.close:hover,.zoom:hover{background:var(--detail)} .close:hover .gx .i,.zoom:hover .gx .i{fill:var(--paper)}}
.close:active,.zoom:active{background:var(--ink)} .close:active .gx .i,.zoom:active .gx .i{fill:var(--paper)}
/* collapsed: the window rolls up to its title bar */
.win.shaded{height:auto!important;grid-template:"bar" calc(19*var(--u))/1fr!important}
.win.shaded>:not(.bar){display:none!important}
.win.shaded .bar{border-bottom:0}
.win:not(.front) :is(.close,.zoom){visibility:hidden}
.info{grid-area:info;display:flex;justify-content:space-between;gap:calc(12*var(--u));padding:var(--u) calc(10*var(--u)) calc(2*var(--u));border-bottom:var(--u) solid var(--ink);
  box-shadow:0 calc(2*var(--u)) 0 var(--paper),0 calc(3*var(--u)) 0 var(--ink);margin-bottom:calc(3*var(--u));white-space:nowrap;overflow:hidden}
.pane{grid-area:pane;overflow:auto;scrollbar-width:none;min-height:0;overscroll-behavior:contain}
.pane::-webkit-scrollbar{display:none}

/* scroll bars and grow box: white when there is nothing to scroll or the window is behind, grey when it can scroll */
.sb{background:var(--paper);display:flex}
.sb.v{grid-area:v;flex-direction:column;border-left:var(--u) solid var(--ink)}
.sb.h{grid-area:h;border-top:var(--u) solid var(--ink)}
.ar{flex:none;display:grid;place-items:center;height:calc(16*var(--u));border-bottom:var(--u) solid var(--ink)}
.ar.dn{border-bottom:0;border-top:var(--u) solid var(--ink)}
.tr{flex:1;position:relative}
.tr i{display:none;position:absolute;left:0;right:0;height:calc(16*var(--u));background:var(--paper);border:solid var(--ink);border-width:var(--u) 0}
.front.vs .tr{background:var(--grey)}
.front.vs .tr i{display:block}
.win:not(.front) .ar,.win:not(.vs) .ar svg{visibility:hidden}
.grow{grid-area:grow;border:solid var(--ink);border-width:var(--u) 0 0 var(--u);position:relative}
.front .grow i{position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));width:calc(7*var(--u));height:calc(7*var(--u));border:var(--u) solid var(--ink)}
.front .grow i::after{content:"";position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));width:calc(7*var(--u));height:calc(7*var(--u));border:var(--u) solid var(--ink);background:var(--paper)}
.front .grow{cursor:nwse-resize;touch-action:none}

/* icon view */
.grid{display:grid;grid-template-columns:repeat(auto-fill,calc(80*var(--u)));row-gap:calc(10*var(--u));padding:calc(10*var(--u)) calc(4*var(--u)) calc(12*var(--u))}
.wide-icons .grid{grid-template-columns:repeat(auto-fill,calc(104*var(--u)))}
.icon{-webkit-user-drag:none;display:flex;flex-direction:column;align-items:center;gap:var(--u);outline:0;user-select:none;text-align:center}
.icon span{padding:0 calc(2*var(--u));max-width:100%}
.icon .ic{transition:translate .12s var(--ease);transform-origin:50% 100%}
@media (hover:hover){.icon:hover .ic{translate:0 calc(-2*var(--u))}}
.icon:active .ic{translate:0 0;transition-duration:0s}
.icon.sel span,.icon:focus-visible span{background:var(--ink);color:var(--paper)}
.icon.sel .i,.icon:focus-visible .i{fill:var(--paper)} .icon.sel .p,.icon:focus-visible .p{fill:var(--ink)}
.by-name{display:none}
.win[data-view="list"] .by-icon{display:none} .win[data-view="list"] .by-name{display:block}

/* list view */
.list{width:100%;border-collapse:collapse}
.list th,.list td{text-align:left;font-weight:400;padding:0 calc(10*var(--u)) 0 0;white-space:nowrap;vertical-align:middle}
.list thead th{padding:calc(2*var(--u)) calc(10*var(--u)) calc(2*var(--u)) 0;border-bottom:var(--u) solid var(--ink)}
.list :is(th,td):first-child{padding-left:calc(6*var(--u))} .list :is(th,td):last-child{padding-right:calc(6*var(--u))}
.list tbody tr:first-child>*{padding-top:calc(3*var(--u))}
.list tbody a{display:flex;align-items:center;gap:calc(4*var(--u))}
.list tbody tr:hover>*,.list tbody tr:focus-within>*{background:var(--ink);color:var(--paper)}
.list tbody tr:hover .i,.list tbody tr:focus-within .i{fill:var(--paper)} .list tbody tr:hover .p,.list tbody tr:focus-within .p{fill:var(--ink)}

/* ---------- documents: set in a reading face ---------- */
.doc .pane,.viewer-w .pane,.info-w .pane,.dialog-w .pane{font:var(--read);-webkit-font-smoothing:antialiased}
.doc .pane{padding:calc(15*var(--u)) calc(18*var(--u)) calc(17*var(--u))}
.name{width:fit-content;font-size:calc(52px*var(--k));line-height:1;font-weight:850;letter-spacing:-.035em;margin:0 0 calc(9*var(--u)) -.03em;white-space:nowrap}
.name>span{display:inline-block;white-space:pre-wrap}
/* for a moment the name gives way to the username, set in the system face at 4x */
/* the word glitch (the Calabrute principle, our own face): one word, for a moment, changes texture, not size */
.unstable{position:relative;-webkit-text-fill-color:transparent}
.unstable::after{content:attr(data-w);position:absolute;inset:0 auto auto 50%;translate:-50% 0;width:max-content;-webkit-text-fill-color:currentColor;
  font-family:Scambio,monospace;font-weight:400;font-size:1em;font-size-adjust:ch-width .5;letter-spacing:0;-webkit-font-smoothing:none;pointer-events:none}
.unstable.c::after{font:700 1em/inherit Overpass,sans-serif;font-size-adjust:none;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.bar h2 span.unstable,.icon span.unstable{overflow:visible}
.caret{display:inline-block;width:calc(2*var(--u));height:.82em;margin-left:calc(1*var(--u));background:var(--detail-fg);vertical-align:-.04em}
.caret.blink{animation:caret 1.06s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.name span span.px{font:400 1em/1 Scambio,monospace;font-size-adjust:ch-width .5;-webkit-font-smoothing:none;letter-spacing:0}
.name.alt span{font:calc(24*var(--u))/1 Scambio,monospace;-webkit-font-smoothing:none;letter-spacing:0;padding:calc(2*var(--u)) 0}
.about-grid{display:grid;grid-template-columns:1fr auto;gap:calc(12*var(--u));align-items:start}
.me{margin:calc(2*var(--u)) 0 0}
.me img{display:block;width:calc(104*var(--u));height:calc(130*var(--u));border:var(--u) solid var(--ink);box-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 var(--ink);background:#fff}
:root:not([data-theme="dark"]) .me img{mix-blend-mode:multiply;background:var(--paper)}
/* the portrait stays a print on white paper, in every theme */
.me figcaption{font:var(--chrome);-webkit-font-smoothing:none;text-align:center;margin-top:calc(4*var(--u))}
.bio{font-size:calc(24px*var(--k));line-height:1.36;font-weight:500;letter-spacing:-.01em;max-width:30ch}
.bio-2{margin-top:calc(8*var(--u));max-width:52ch}
/* the bio keywords carry the marks of the lines: study solid, competition hollow, Calabrute (both) selected */
em{font-style:normal;padding-bottom:3px}
em.s{background:var(--detail);color:#fff;padding:0 .14em}
em.c{background:linear-gradient(var(--ink) 0 1px,#0000 1px 3px,var(--ink) 3px 4px) 0 100%/100% 4px no-repeat}
em.x,a.x{background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 4px no-repeat}
a.x{display:inline-block;color:inherit;text-decoration:none;cursor:pointer}
@media (hover:hover){a.x:hover,a.x:focus-visible{translate:0 calc(-2*var(--u))}}
@media (prefers-reduced-motion:no-preference){a.x{transition:translate .12s steps(2)}}
.buttons{display:flex;flex-wrap:wrap;gap:calc(8*var(--u));margin-top:calc(13*var(--u));font:var(--chrome);-webkit-font-smoothing:none}
.buttons a,.btn{display:block;min-width:calc(58*var(--u));text-align:center;padding:var(--u) calc(10*var(--u));border:var(--u) solid var(--ink);border-radius:calc(8*var(--u));font:var(--chrome);-webkit-font-smoothing:none}
.buttons a{background:var(--accent);color:var(--on-accent);box-shadow:var(--u) var(--u) 0 var(--ink);cursor:pointer;transition:translate .08s var(--ease),box-shadow .08s var(--ease),background-color .12s,color .12s}
@media (hover:hover){.buttons a:hover{background:var(--ink);color:var(--paper)}}
.buttons a:active{translate:var(--u) var(--u);box-shadow:0 0 0 var(--ink)}
.btn:hover,.btn:active{background:var(--ink);color:var(--paper)}
::selection{background:var(--detail);color:#fff}

/* the default button and the alert box */
.ok{min-width:calc(58*var(--u));text-align:center;padding:var(--u) 0;border:var(--u) solid var(--ink);border-radius:calc(8*var(--u));
  box-shadow:0 0 0 var(--u) var(--paper),0 0 0 calc(4*var(--u)) var(--ink);margin:calc(4*var(--u))}
.ok:active{background:var(--ink);color:var(--paper)}

/* checkbox, System 6: a square, an X when on */
.chk{display:inline-flex;align-items:center;gap:calc(5*var(--u));font:var(--chrome);-webkit-font-smoothing:none;user-select:none}
.chk input{appearance:none;margin:0;width:calc(12*var(--u));height:calc(12*var(--u));border:var(--u) solid var(--ink);background:var(--paper);position:relative}
.chk input:checked{background:
  linear-gradient(to top right,#0000 calc(50% - var(--u)/1.2),var(--detail-fg) 0 calc(50% + var(--u)/1.2),#0000 0),
  linear-gradient(to bottom right,#0000 calc(50% - var(--u)/1.2),var(--detail-fg) 0 calc(50% + var(--u)/1.2),#0000 0),var(--paper)}
.chk input:disabled+span{opacity:1}

/* ---------- route ---------- */
/* on a phone the map keeps its size and the window shows a part of it: it scrolls sideways, and while it
   draws the view follows the line */
.map{margin:0;padding:calc(3*var(--u)) calc(4*var(--u)) calc(2*var(--u));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.map+.route-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.net{display:block;width:calc(740*var(--u));max-width:none;height:auto}
.net .trk{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:1 9;stroke-linecap:round}
.net .dk{fill:var(--ink)}
/* two lines, two colours, as on any metro map: study in the detail colour, competition hollow with the accent inside */
.net .ln{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:var(--ink);stroke-width:11}
.net .ln.study{stroke:var(--detail-fg)}
.net .ln.comp-in{stroke:var(--accent);stroke-width:5}
.net .lg.study rect{fill:var(--detail-fg)} .net .lg.study text{fill:#fff}
.net .lg.comp rect{fill:var(--paper);stroke:var(--accent);stroke-width:3}
.net .lg text{font:800 17px Overpass,sans-serif;fill:var(--ink)}
.net .st circle,.net .st rect{fill:var(--paper);stroke:var(--ink);stroke-width:4}
.net .st.x rect{stroke-width:5}
.net text{font-family:Overpass,sans-serif;fill:var(--ink)}
.net .t{font-weight:800;font-size:24px}
.net .d{font-size:18px}
.js .net .st.off,.predraw .net .ln,.predraw .net .st{visibility:hidden}
.route-list{padding:20px 22px 24px;font:var(--read);-webkit-font-smoothing:antialiased}
.route-list li{position:relative;margin-left:8px;padding:0 0 24px 24px;border-left:9px solid var(--detail-fg)}
.route-list li.comp{border-left-style:double;border-left-color:var(--accent)}
.route-list li:last-child{border-left-color:transparent;padding-bottom:0}
.route-list li::before{content:"";position:absolute;left:-17px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.route-list li.both::before{height:24px;border-radius:8px}
.route-list .when{font:var(--chrome);-webkit-font-smoothing:none}
.route-list h3{font-size:calc(21px*var(--k));font-weight:800;line-height:1.2;margin:2px 0 4px}

/* ---------- project viewer: a Scrapbook, then the README ---------- */
.viewer{padding:calc(13*var(--u)) calc(15*var(--u)) calc(16*var(--u))}
.v-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.v-head h1{font-size:calc(32px*var(--k));line-height:1.05;font-weight:850;letter-spacing:-.03em}
.v-head .tag{font-size:calc(18px*var(--k));line-height:1.4;margin-top:6px;max-width:44ch}
.scrap{border:var(--u) solid var(--ink)}
.pics{display:grid}
.pic{display:grid;grid-template-rows:1fr auto}
.js .scrap:not(.pair) .pic{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility 0s .16s}
.js .scrap .pic.on{opacity:1;visibility:visible;transition:opacity .16s var(--ease)}
.pair .pics{grid-template-columns:1fr 1fr}
.pair .pic+.pic{border-left:var(--u) solid var(--ink)}
.js .pair .pic figcaption .n{display:inline}
.frame{display:grid;place-items:center;padding:calc(12*var(--u)) calc(10*var(--u));border-bottom:var(--u) solid var(--ink);background:var(--grey),var(--paper)}
.frame img{display:block;max-width:100%;height:auto;border:var(--u) solid var(--ink);box-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 var(--ink);background:var(--paper)}
.scrap:not(.color) .frame img{image-rendering:pixelated}
:root[data-theme="dark"] .scrap:not(.color) .frame img{filter:invert(1)}
.pic figcaption{padding:8px 12px 10px;font-size:14px;line-height:1.4;border-bottom:var(--u) solid var(--ink)}
.pic figcaption .n{font:var(--chrome);-webkit-font-smoothing:none;margin-right:6px}
.js .pic figcaption .n{display:none}
.scrap-bar{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(18*var(--u));padding:0 calc(4*var(--u))}
.scrap-bar button{display:grid;place-items:center;width:calc(16*var(--u));height:calc(14*var(--u));border:var(--u) solid var(--ink)}
.scrap-bar button:active{background:var(--ink)} .scrap-bar button:active .i{fill:var(--paper)}
.scrap-bar .kind{margin-right:auto}
.v-text{max-width:62ch}
.v-text h2,.readme h2,.cvdoc h2{font:var(--chrome);-webkit-font-smoothing:none;margin:calc(13*var(--u)) 0 calc(5*var(--u));padding-bottom:calc(2*var(--u));border-bottom:var(--u) solid var(--detail-fg)}
.v-text ul{display:grid;gap:8px}
.v-text li{position:relative;padding-left:18px}
.v-text li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--ink)}
.note{margin-top:12px;font-size:15px}
/* the project sheet: the card's figures under the head, then the pictures or the diagram */
.sheet>.c-facts{margin:0 0 calc(14*var(--u))}
.sheet.featured>.c-facts dt{color:var(--detail-fg)}
.diagram{margin:0 0 calc(4*var(--u))}
.diagram .ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--grey);background-size:calc(2*var(--u)) calc(2*var(--u))}
.diagram .ph span{background:var(--paper);border:var(--u) solid var(--ink);padding:calc(2*var(--u)) calc(8*var(--u));font:var(--chrome);-webkit-font-smoothing:none}
/* a section still to write: dotted, so the gap shows while the texts are pending */
.todo{border:var(--u) dotted var(--ink);padding:calc(5*var(--u)) calc(8*var(--u));font-size:15px}
.sheet-nav{margin-top:calc(16*var(--u));justify-content:space-between}

/* ---------- Get Info ---------- */
.gi{padding:calc(9*var(--u)) calc(10*var(--u)) calc(10*var(--u));font-size:max(14px,calc(16px*var(--k)));line-height:1.45}
.gi-head{display:flex;gap:12px;align-items:center;padding-bottom:12px;margin-bottom:12px;border-bottom:var(--u) solid var(--ink)}
.gi-head h3{font:var(--chrome);-webkit-font-smoothing:none}
.gi dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.gi dt{font:var(--chrome);-webkit-font-smoothing:none;text-align:right}
.gi dd{padding-top:calc(3*var(--u))}
.gi dd a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.gi .chk{margin:14px 0 0}
.gi-c-l{font:var(--chrome);-webkit-font-smoothing:none;margin:12px 0 4px}
.gi-c{border:var(--u) solid var(--ink);padding:8px 10px;min-height:5.4em}

/* ---------- text files: whoami, .flag.txt ---------- */
.txt-big{font:calc(24*var(--u))/1 Scambio,monospace;-webkit-font-smoothing:none;margin-bottom:18px}
.txt pre{font:500 15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 0}
.b64{padding:12px 14px;border:var(--u) solid var(--ink);background:var(--paper);user-select:all}
.txt-hint{margin-top:12px;font-size:15px}
/* hidden files: dimmed, as the dotfiles they are, and only when asked for (works without JS too) */
.dot{display:none!important}
#hd:has(.show-hidden:checked) li.dot{display:flex!important;justify-content:center}
#hd:has(.show-hidden:checked) tr.dot{display:table-row!important}
li.dot .icon{-webkit-mask:conic-gradient(at var(--u) var(--u),#000 75%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u));mask:conic-gradient(at var(--u) var(--u),#000 75%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u))}
.info .chk input{width:calc(10*var(--u));height:calc(10*var(--u))}

/* ---------- Projects: a HyperCard stack, one card each; the stack scrolls sideways a card at a time (also
   without JS), and the buttons and arrow keys turn the card with the HyperCard dissolve ---------- */
.by-card{padding:calc(8*var(--u)) calc(8*var(--u)) calc(6*var(--u))}
.stack{position:relative}
.cards{display:flex;gap:calc(8*var(--u));overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:0 calc(3*var(--u)) calc(3*var(--u)) 0;outline:0}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 calc(100% - 3*var(--u));scroll-snap-align:start;display:flex;flex-direction:column;
  border:var(--u) solid var(--ink);border-radius:calc(6*var(--u));box-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 var(--ink);background:var(--paper);overflow:hidden;
  font:var(--read);-webkit-font-smoothing:antialiased}
.cards:focus-visible .card{outline:var(--u) dotted var(--ink);outline-offset:calc(2*var(--u))}
/* the band on top: the featured cards wear the stripes of the window in front */
.c-band{height:calc(13*var(--u));border-bottom:var(--u) solid var(--ink);display:grid;place-items:center;font:var(--chrome);-webkit-font-smoothing:none;
  background:repeating-linear-gradient(var(--stripe) 0 var(--u),#0000 var(--u) calc(2*var(--u))) 0 calc(2*var(--u))/100% calc(100% - 4*var(--u)) no-repeat}
.c-band span{background:var(--paper);padding:0 calc(6*var(--u));line-height:calc(13*var(--u))}
.c-band.plain{background:var(--grey);background-size:calc(2*var(--u)) calc(2*var(--u));height:calc(5*var(--u))}
.c-head{display:flex;gap:calc(8*var(--u));align-items:center;padding:calc(10*var(--u)) calc(12*var(--u)) 0}
.c-head .ic{flex:none}
.c-head h3{font-size:calc(27px*var(--k));line-height:1.05;font-weight:850;letter-spacing:-.025em}
.c-kind{font:var(--chrome);-webkit-font-smoothing:none;margin-top:calc(3*var(--u))}
.c-tag{padding:calc(8*var(--u)) calc(12*var(--u)) 0;font-size:calc(18px*var(--k));line-height:1.4;max-width:44ch}
/* the proof: three figures, ruled like a HyperCard field */
.c-facts{display:grid;grid-template-columns:repeat(3,1fr);margin:calc(10*var(--u)) calc(12*var(--u)) 0;border-top:var(--u) solid var(--ink);border-bottom:var(--u) solid var(--ink)}
.c-facts>div{padding:calc(6*var(--u)) calc(6*var(--u)) calc(7*var(--u)) 0;min-width:0}
.c-facts>div+div{border-left:var(--u) dotted var(--ink);padding-left:calc(7*var(--u))}
.c-facts dt{font-size:calc(24px*var(--k));font-weight:850;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.featured .c-facts dt:first-child{color:var(--detail-fg)}
.c-facts dd{font-size:calc(13.5px*var(--k));line-height:1.3;margin-top:2px}
.card .buttons{margin:auto 0 0;padding:calc(10*var(--u)) calc(12*var(--u)) calc(12*var(--u))}
/* a button that cannot be pressed, as System 6 drew it: the label in grey (the checkerboard, clipped to the text) */
.buttons .off{display:block;min-width:calc(58*var(--u));text-align:center;padding:var(--u) calc(10*var(--u));border:var(--u) solid var(--ink);border-radius:calc(8*var(--u));
  font:var(--chrome);-webkit-font-smoothing:none;background:var(--grey);background-size:calc(2*var(--u)) calc(2*var(--u));-webkit-background-clip:text;background-clip:text;color:#0000;cursor:not-allowed}
/* the dissolve: paper comes over the card in four dithered steps, the card turns, and the paper goes */
.dissolve{position:absolute;inset:0 calc(3*var(--u)) calc(3*var(--u)) 0;pointer-events:none;border-radius:calc(6*var(--u))}
.dissolve[data-d="1"]{background:conic-gradient(at var(--u) var(--u),var(--paper) 0 25%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u))}
.dissolve[data-d="2"]{background:conic-gradient(at var(--u) var(--u),var(--paper) 0 25%,#0000 0 50%,var(--paper) 0 75%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u))}
.dissolve[data-d="3"]{background:conic-gradient(at var(--u) var(--u),var(--paper) 0 75%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u))}
.dissolve[data-d="4"]{background:var(--paper)}
.stack-nav{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--u));margin-top:calc(8*var(--u))}
.js .stack-nav{display:flex}
.stack-nav[hidden]{display:none}
.stack-nav>button{display:grid;place-items:center;width:calc(22*var(--u));height:calc(16*var(--u));border:var(--u) solid var(--ink);border-radius:calc(4*var(--u))}
.stack-nav>button:active{background:var(--ink)} .stack-nav>button:active .i{fill:var(--paper)}
.dots{display:flex;gap:calc(4*var(--u))}
.dot-b{width:calc(7*var(--u));height:calc(7*var(--u));border:var(--u) solid var(--ink);border-radius:50%;padding:0}
.dot-b[aria-current="true"]{background:var(--ink)}
.dot-b:nth-child(-n+3)[aria-current="true"]{background:var(--accent);border-color:var(--ink)}
@media (hover:hover){.dot-b:hover{background:var(--grey);background-size:calc(2*var(--u)) calc(2*var(--u))}}
/* the Projects folder calls, as a Dock icon does: now and then it hops with its papers out, until you open it */
.icon{position:relative}
.icon .ic-alt{position:absolute;top:0;left:50%;margin-left:calc(-16*var(--u));visibility:hidden}
.icon.calling .ic{animation:call 4.2s cubic-bezier(.3,.6,.3,1) infinite;transform-origin:50% 100%}
.icon.calling .ic:not(.ic-alt){animation-name:call,call-base}
.icon.calling .ic-alt{animation-name:call,call-alt}
@keyframes call{0%,24%,100%{transform:none}6%{transform:translateY(calc(-10*var(--u)))}12%{transform:none}17%{transform:translateY(calc(-4*var(--u)))}}
@keyframes call-alt{0%,26%,100%{visibility:hidden}1%,25%{visibility:visible}}
@keyframes call-base{0%,26%,100%{visibility:visible}1%,25%{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.icon.calling .ic-alt{visibility:visible;animation:none!important} .icon.calling .ic:not(.ic-alt){visibility:hidden}}

/* the badge on the Projects folder, as the Dock counts what waits for you; it goes once the folder is opened */
.badge{position:absolute;top:calc(-3*var(--u));left:50%;margin-left:calc(9*var(--u));min-width:calc(13*var(--u));height:calc(13*var(--u));padding:0 calc(3*var(--u));
  border:var(--u) solid var(--ink);border-radius:calc(7*var(--u));background:var(--accent);color:var(--on-accent);font:calc(12*var(--u))/calc(11*var(--u)) Scambio,monospace;
  -webkit-font-smoothing:none;text-align:center;font-weight:400;pointer-events:none}
.icon:not(.calling) .badge{display:none}
.icon.calling .badge{animation:call 4.2s cubic-bezier(.3,.6,.3,1) infinite}

/* ---------- Control Panel: the accent, tried live ---------- */

/* the colour changes in a breath, not in a cut */
.buttons a,.bar::before{transition-property:translate,box-shadow,background-color,color,transform}

/* ---------- CV, Read Me, About This Site ---------- */
.cvdoc h1{font-size:calc(38px*var(--k));line-height:1;font-weight:850;letter-spacing:-.03em}
.cv-contact{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:16px}
.cv-contact a,dd a[href^="http"]{text-decoration:underline var(--detail-fg);text-decoration-thickness:max(1px,var(--u));text-underline-offset:3px}
.cvdoc dl{display:grid;gap:8px}
.cv-row{display:grid;grid-template-columns:7.5em 1fr;gap:12px}
.cv-row dt{font-variant-numeric:tabular-nums;font-size:15px;padding-top:2px}
.cv-row strong{font-weight:750;display:block}
.cv-print{margin-top:26px}
.readme p{max-width:58ch}
.ats{padding:calc(9*var(--u)) calc(11*var(--u)) calc(11*var(--u));font-size:max(14px,calc(15px*var(--k)));line-height:1.45}
.ats-head{display:flex;gap:14px;align-items:center;padding-bottom:12px;border-bottom:var(--u) solid var(--ink)}
.ats-t{font:var(--chrome);-webkit-font-smoothing:none}
.ats-total{margin:12px 0 8px;font:var(--chrome);-webkit-font-smoothing:none}
.bars{display:grid;gap:6px}
.bars li{display:grid;grid-template-columns:8.5em 1fr 3em;align-items:center;gap:10px}
.bars li span:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- About This Site: the page reads its own response headers (see desk.js, audit) ---------- */
.hdrs{margin-top:calc(14*var(--u));padding-top:calc(10*var(--u));border-top:var(--u) solid var(--ink)}
.hdrs[hidden]{display:none}
.hdrs h3{font:var(--chrome);-webkit-font-smoothing:none}
.hdrs-sub{font-size:13.5px;margin:calc(2*var(--u)) 0 calc(8*var(--u))}
.hdrs-sum{display:flex;align-items:center;gap:calc(9*var(--u));margin-bottom:calc(9*var(--u))}
.leds{display:flex;gap:calc(3*var(--u))}
.leds i{width:calc(10*var(--u));height:calc(10*var(--u));border:var(--u) solid var(--ink);background:var(--paper)}
.hdrs.in .leds i.on{background:var(--accent);transition:background-color 0s linear calc(220ms + var(--i)*70ms)}
.sum{font:var(--chrome);-webkit-font-smoothing:none}
.hdr-list{display:grid}
.hdr-list li{display:grid;grid-template-columns:calc(14*var(--u)) 1fr;gap:calc(9*var(--u));padding:calc(6*var(--u)) 0;border-top:var(--u) dotted var(--ink)}
.hdr-list li:first-child{border-top:0}
.hdr-list b{display:block;font-weight:750;font-size:14.5px;line-height:1.25}
.why{display:block;font-size:13.5px;line-height:1.35}
.val{display:block;margin-top:calc(3*var(--u));font:12.5px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.st{width:calc(14*var(--u));height:calc(14*var(--u));margin-top:1px;border:var(--u) solid var(--ink);display:grid;place-items:center;background:var(--paper)}
.st::before{content:"";width:100%;height:100%;transform:scale(0)}
.is-ok .st{background:var(--accent)}
.is-ok .st::before{background:var(--on-accent);-webkit-mask:url(/check.svg) center/72% no-repeat;mask:url(/check.svg) center/72% no-repeat}
.is-no .st::before{background:linear-gradient(45deg,#0000 42%,var(--detail-fg) 42% 58%,#0000 58%),linear-gradient(-45deg,#0000 42%,var(--detail-fg) 42% 58%,#0000 58%)}
.hdrs.in .st::before{transform:none;transition:transform .16s var(--ease) calc(120ms + var(--i)*70ms)}
.hdrs:not(.in) .hdr-list li,.hdrs:not(.in) .csp li{opacity:0;translate:0 calc(3*var(--u))}
.hdrs.in .hdr-list li,.hdrs.in .csp li{opacity:1;translate:none;transition:opacity .2s var(--ease) calc(var(--i)*55ms),translate .2s var(--ease) calc(var(--i)*55ms)}
.hdrs-csp-t{margin:calc(12*var(--u)) 0 calc(4*var(--u));font:var(--chrome);-webkit-font-smoothing:none}
.csp li{display:grid;grid-template-columns:8.6em 1fr;gap:calc(8*var(--u));align-items:baseline;padding:calc(3*var(--u)) 0;border-top:var(--u) dotted var(--ink)}
.csp:empty,.csp:empty+.hdrs-local{margin:0}
.dn{font:12.5px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
.tk{display:flex;flex-wrap:wrap;gap:calc(4*var(--u))}
.tag{font-style:normal;font-size:12.5px;line-height:1.3;padding:0 calc(6*var(--u));border:var(--u) solid var(--ink);border-radius:calc(6*var(--u))}
.tag.none{background:var(--ink);color:var(--paper)}
.tag.other{border-style:dotted}
.tag.bad{background:var(--detail);border-color:var(--detail);color:#fff}
.hdrs-local{margin-top:calc(10*var(--u));padding:calc(5*var(--u)) calc(8*var(--u));border:var(--u) dotted var(--ink);font-size:13.5px}
.hdrs-local[hidden]{display:none}
.hdrs.local .hdr-list li{color:var(--ink)}
.hdrs.local .is-no .st::before{display:none}
.hdrs.local .csp,.hdrs.local .hdrs-csp-t{display:none}
.meter{width:100%;height:12px}
.meter .b-o{fill:none;stroke:var(--ink)} .meter .b-i{fill:var(--accent)}

.alert{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;background:#0000}
.alert[hidden]{display:none}
.alert .alert-in{box-shadow:calc(2*var(--u)) calc(2*var(--u)) 0 var(--ink);animation:pop .14s var(--ease)}
@keyframes pop{from{clip-path:inset(50% 50%)}to{clip-path:inset(-8px)}}
/* dragging an icon: the Finder moves a grey outline of it, not the icon */
.ghost{position:fixed;z-index:2400;pointer-events:none;opacity:.9;-webkit-mask:var(--grey-mask);mask:var(--grey-mask)}
:root{--grey-mask:conic-gradient(at var(--u) var(--u),#000 75%,#0000 0) 0 0/calc(2*var(--u)) calc(2*var(--u))}
.d-trash .icon.drop span{background:var(--ink);color:var(--paper)}
.d-trash .icon.drop .i{fill:var(--paper)} .d-trash .icon.drop .p{fill:var(--ink)}
/* the screen after Shut Down */
.shutdown{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:var(--paper)}
.shutdown[hidden]{display:none}
.alert-in{display:grid;grid-template-columns:calc(32*var(--u)) 1fr;gap:calc(10*var(--u)) calc(14*var(--u));align-items:center;
  border:calc(2*var(--u)) solid var(--ink);outline:var(--u) solid var(--ink);outline-offset:calc(2*var(--u));padding:calc(14*var(--u));max-width:calc(260*var(--u));background:var(--paper)}
.alert-in .ok{grid-column:2;justify-self:end}

.closed:not(:target){display:none}
.desktop{display:none}

.u-probe{position:absolute;width:var(--u);height:0;visibility:hidden;pointer-events:none}
.zoomrects{position:fixed;inset:0;width:100vw;height:100vh;z-index:2500;pointer-events:none}
.dragging{will-change:translate}
.dragging,.dragging *{user-select:none}
/* the route is drawing: the Mac would show the wristwatch */
.busy,.busy *{cursor:progress}

/* ---------- reading layout: phones and small windows; the windows stack ---------- */
.desk{display:flex;flex-direction:column;gap:calc(10*var(--u));padding:calc(8*var(--u)) calc(8*var(--u)) calc(30*var(--u))}
.desk .win{grid-template:"bar" calc(19*var(--u)) "info" auto "pane" auto/1fr}
.desk .sb,.desk .grow{display:none}
/* a window you open is scrolled to just under the menu bar, title bar included */
.desk .win{scroll-margin-top:calc(26*var(--u))}
.desk .pane{overflow:visible;min-width:0}
#about{order:0} #hd{order:1} #route{order:2}
.desk .grid{grid-template-columns:repeat(auto-fill,minmax(calc(68*var(--u)),1fr))}
.desk .wide-icons .grid{grid-template-columns:repeat(auto-fill,minmax(calc(96*var(--u)),1fr))}

/* ---------- the Finder screen ---------- */
@media (min-width:1200px) and (min-height:660px){
  body{overflow:hidden}
  .desk{display:block;position:relative;height:calc(100svh - 20*var(--u));padding:0}
  .desk .win{position:absolute;grid-template:"bar bar" calc(19*var(--u)) "info info" auto "pane v" 1fr "h grow" calc(16*var(--u))/1fr calc(16*var(--u))}
  .desk .win.plain{grid-template:"bar" calc(19*var(--u)) "info" auto "pane" auto/1fr}
  .desk .sb{display:flex} .desk .grow{display:block}
  .desk .pane{overflow:auto}
  .desk .grid{grid-template-columns:repeat(auto-fill,calc(80*var(--u)))}
  .desk .wide-icons .grid{grid-template-columns:repeat(auto-fill,calc(104*var(--u)))}
  .desk .win:target{z-index:50!important}
  /* window places: size in Mac pixels, place as a fraction of the free desktop (right of it: the disk and the Trash) */
  .win{--fx:.5;--fy:.3;--w:380;--h:260;width:calc(var(--w)*var(--u));
    left:calc(10*var(--u) + var(--fx)*(100vw - 112*var(--u) - var(--w)*var(--u)));
    top:max(calc(8*var(--u)),calc(8*var(--u) + var(--fy)*(100svh - 36*var(--u) - var(--h)*var(--u))));
    height:min(calc(var(--h)*var(--u)),calc(100svh - 36*var(--u)))}
  .win.plain{height:auto}
  #hd{--fx:0;--fy:0;--w:266;--h:262;z-index:2}
  /* the Italian words are longer: the disk window is a little wider, and About starts a little further on */
  html[lang="it"] #hd{--w:296}
  html[lang="it"] #about{left:min(calc(312*var(--u)),calc(10*var(--u) + 100vw - 112*var(--u) - var(--w)*var(--u)))}
  /* the disk window is as wide as its three columns, and About starts just past it: nothing of the disk
     (its scroll bar, the hidden-files box) is covered; where that does not fit, About goes as far right as it can */
  #about{--fy:.1;--w:452;--h:290;z-index:5;left:min(calc(282*var(--u)),calc(10*var(--u) + 100vw - 112*var(--u) - var(--w)*var(--u)))}
  #projects{--fx:.1;--fy:.5;--w:430;--h:318;z-index:3}
  #route{--fx:.04;--fy:1;--w:560;--h:262;z-index:4}
  #cv{--fx:.6;--fy:.1;--w:420;--h:420}
  #system{--fx:.78;--fy:.3;--w:300;--h:320}
  #readme{--fx:.82;--fy:.45;--w:350;--h:320}
  .txt-w{--fx:.45;--fy:.62;--w:340;--h:170}
  .flag-w{--fx:.32;--fy:.7;--w:384;--h:140}
  #trash{--fx:1;--fy:1;--w:300;--h:150}
  #aboutsite{--fx:.5;--fy:.12;--w:430;--h:480}
  .viewer-w{--fx:.5;--fy:.12;--w:480;--h:440}
  .info-w{--fx:.72;--fy:.45;--w:270}
  .desktop{display:block}
  .desktop li{position:absolute;right:calc(10*var(--u));width:calc(80*var(--u));display:flex;justify-content:center}
  .d-hd{top:calc(14*var(--u))} .d-trash{bottom:calc(8*var(--u))}
  .map{overflow:visible} .net{width:100%}
  /* the rounded top corners of the old screen */
  body::before,body::after{content:"";position:fixed;z-index:1001;top:0;width:calc(5*var(--u));height:calc(5*var(--u));pointer-events:none}
  body::before{left:0;background:radial-gradient(circle at 100% 100%,#0000 calc(5*var(--u) - .5px),var(--ink) calc(5*var(--u)))}
  body::after{right:0;background:radial-gradient(circle at 0 100%,#0000 calc(5*var(--u) - .5px),var(--ink) calc(5*var(--u)))}
}

/* without JS the window you opened (:target) is the front one */
html:not(.js) .desk:has(.win:target) .win.front:not(:target) .bar::before{transform:scaleX(0)}
html:not(.js) .win:target .bar::before{transform:none}

/* on a phone the stack is a strip you swipe: each card a little narrower than the window, so the next one shows */
@media (max-width:860px){
  .card{flex-basis:86%}
  .stack-nav>button{display:none} .stack-nav{justify-content:center}
  /* the three figures stack: figure, then what it counts, on one line each */
  .c-facts{grid-template-columns:1fr}
  .c-facts>div{display:flex;align-items:baseline;gap:10px;padding:calc(5*var(--u)) 0}
  .c-facts>div+div{border-left:0;border-top:var(--u) dotted var(--ink);padding-left:0}
  .c-facts dt{flex:none;min-width:3.6em;font-size:22px}
  .c-facts dd{font-size:15px}
}
@media (max-width:640px){
  .about-grid{grid-template-columns:1fr}
  .me{order:-1;width:max-content}
  .doc .pane{padding:20px 18px 24px}
  .name{font-size:38px;white-space:normal}
  .bio{font-size:21px}
  .viewer{padding:18px 16px 22px}
  .v-head h1{font-size:27px}
  .list thead,.list td:nth-child(n+4){display:none}
  .list td{white-space:normal}
  .info span:nth-child(n+3){display:none}
  .frame{padding:6px}
  .cv-row{grid-template-columns:1fr;gap:0}
}
/* the narrowest phones: the disk window keeps the count and the hidden-files box, the size moves to About This Site */
@media (max-width:400px){#hd .info>span:nth-child(2){display:none}}

/* the 404 page */
.nf{max-width:34em;margin:20vh auto 0;padding:0 24px;font:var(--read)}
.nf h1{font:var(--chrome);font-size:calc(24*var(--u));margin:0 0 12px}
.nf a{text-decoration:underline var(--detail-fg);text-underline-offset:3px}

@media print{
  @page{margin:13mm 16mm}
  html,body{height:auto!important;overflow:visible!important;background:#fff;color:#000}
  body{font:10pt/1.38 Overpass,sans-serif;-webkit-font-smoothing:antialiased}
  .menubar,.desktop,.win:not(#cv),.shutdown,.alert,.toast,.zoomrects,.ghost,.cv-print,#cv>.bar,#cv .sb,#cv .grow{display:none!important}
  .desk{display:block!important;position:static!important;height:auto!important;padding:0!important}
  /* the CV, whatever its state on the desk (closed, shaded, mid-animation, moved): one flowing page */
  #cv{display:block!important;visibility:visible!important;position:static!important;inset:auto!important;translate:none!important;transform:none!important;
    width:auto!important;height:auto!important;max-height:none!important;border:0!important;box-shadow:none!important;background:#fff!important;animation:none!important}
  #cv.shaded{height:auto!important}
  #cv .pane{display:block!important;overflow:visible!important;height:auto!important;padding:0!important}
  .cvdoc{max-width:none!important;color:#000}
  .cvdoc h1{font-size:26pt} .cv-contact{margin-top:6px;font-size:10pt}
  .cvdoc h2{break-after:avoid;margin:10pt 0 4pt} .cv-row{break-inside:avoid} .cvdoc dl{gap:5pt} .cv-row dt,.cv-row dd{font-size:10pt}
  .cvdoc a,.cvdoc .cv-contact a{color:#000;text-decoration:none!important} .cv-contact{gap:2pt 14pt}
  .cvdoc h2{font:700 11pt/1.2 Overpass,sans-serif!important;-webkit-font-smoothing:antialiased}
  body::before,body::after{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}