/* Source Serif 4, Fira Sans, Fira Mono: latin subset; EB Garamond 600 (the name at top left): basic latin only. SIL Open Font License 1.1 */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/EBGaramond-600.woff2) format('woff2');
  unicode-range: U+0020-007E;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraMono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraSans-400i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraSans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/FiraSans-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/SourceSerif4-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tauri Tu · site styles
   Ink on paper. Content stands at the edges; the centre stays open.
   One ratio, 3 : 2, sets everything: the type scale (1, 1.5, 2.25), the spacing steps,
   the columns of the home page (2 : 3 : 2) and the shape of the court at its centre.
   Three voices: a serif for names and titles, a sans for reading, a mono for dates and labels. */
:root{
  color-scheme:light;
  --paper:#F3F1EC; --court:#F9F7F3; --ink:#16181A; --ink-2:#45484B; --ink-3:#74777A; --rule:#D6D2CA;
  --serif:"Source Serif 4","Iowan Old Style",Charter,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Fira Mono",ui-monospace,Menlo,Consolas,monospace;
  --b:clamp(16px, .25vw + 15px, 17px);   /* 1 */
  --s2:calc(var(--b)*1.5);               /* 1.5 */
  --s3:calc(var(--b)*2.25);              /* 2.25 */
  --s1:calc(var(--b)*1.2);               /* item titles, between 1 and 1.5 */
  --sm:calc(var(--b)*.8);                /* mono */
  --u:calc(var(--b)*1.5);                /* spacing unit; steps of 1.5 */
  --u2:calc(var(--u)*1.5);
  --u3:calc(var(--u)*2.25);
  --pad:max(6vw, 22px);
  --gap:calc(var(--b)*1);                /* row padding */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:var(--b);line-height:1.6;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,li{margin:0;padding:0;font:inherit;list-style:none}
p{text-wrap:pretty}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--pad);top:8px;background:var(--paper);padding:4px 8px}

/* ---------- frame (phones and narrow windows: one column) ---------- */
.pg{max-width:47rem;margin:0 auto;padding:calc(var(--pad)*.8 + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) calc(var(--u2) + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px))}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.name{font-family:'EB Garamond',var(--serif);font-weight:600;font-size:calc(var(--b)*1.35);line-height:1;color:var(--ink);text-decoration:none}
.meta,.label{font-family:var(--mono);font-size:var(--sm);color:var(--ink-3);line-height:1.6}
.label{text-transform:uppercase;letter-spacing:.08em;font-size:calc(var(--sm)*.9)}
.court{margin-top:var(--u3);outline:none}
.wing{display:block;margin-top:var(--u3)}
.wing>.label{display:block;padding-bottom:calc(var(--b)*.5)}
.sublabel{margin-top:var(--u2)}
.rail{text-transform:inherit;letter-spacing:inherit}

/* rows: a name and a date; the rest opens underneath, or in the court */
.rows{border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row-h{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;column-gap:0;width:100%;padding:var(--gap) 0;color:inherit;text-decoration:none}
.row-h:has(.row-n){grid-template-columns:1.8em 1fr;column-gap:0}
.row-t{font-family:var(--serif);font-size:var(--s1);color:var(--ink);line-height:1.3}
.row-d,.row-n{font-family:var(--mono);font-size:var(--sm);color:var(--ink-3);white-space:nowrap}
.row-d{grid-column:2;text-align:right;margin-left:1.5em}
/* the open/close mark stands in its own column at the right edge, so every row has it in the same place */
.plus{grid-column:3;width:1.6em;text-align:right;color:var(--ink-3);font-family:var(--mono);font-size:var(--sm)}
.plus::after{content:"+"}
.row.open .plus::after{content:"\2013"}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.more>div{overflow:hidden;visibility:hidden;transition:visibility 0s .35s}
.row.open .more{grid-template-rows:1fr}
.row.open .more>div{visibility:visible;transition:visibility 0s}
.more p,.stage-b p,.lede p{max-width:36em;color:var(--ink-2)}
.more p+p,.stage-b p+p,.lede p+p{margin-top:.6em}
.more>div>p:first-child{margin-top:calc(var(--gap)*-.3)}
.more>div>p:last-child{padding-bottom:var(--gap)}
.row:has(.row-n) .more>div{padding-left:1.8em}
.st{font-style:italic;color:var(--ink-3)}
.go a{font-family:var(--mono);font-size:var(--sm);color:var(--ink)}
.row.on>.row-h .row-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}

/* contact: a short list of links, inside its card */
.kv{margin-top:calc(var(--gap)*-.3);padding-bottom:var(--gap)}
.kv li+li{margin-top:.3em}
.kv a{display:flex;gap:1em;align-items:baseline;text-decoration:none}
.kv .k{min-width:5.5em;font-family:var(--mono);font-size:var(--sm);color:var(--ink-3)}
.kv .v{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-3);text-decoration-thickness:1px;text-underline-offset:.22em;overflow-wrap:anywhere}
.kv a:hover .v{text-decoration-color:var(--ink)}


/* the court: the greeting on the home page, the reading on the others */
.hello h1,.title h1{font-family:var(--serif);font-weight:600;font-size:var(--s3);line-height:1.15;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.hello .note{margin-top:1em;max-width:34em;color:var(--ink-2);text-wrap:pretty}
.hello .say{margin-top:.4em;font-family:var(--serif);font-size:var(--s2);line-height:1.3;color:var(--ink);text-wrap:balance}
.foot{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-top:var(--u)}
.stage{display:none}
.stage-t{margin-top:.2em;font-family:var(--serif);font-size:var(--s1);line-height:1.3;color:var(--ink)}
.stage-b{margin-top:.6em}
.title .meta{margin-top:var(--u)}
.crumb{margin-bottom:var(--u);font-family:var(--mono);font-size:calc(var(--sm)*.9);text-transform:uppercase;letter-spacing:.08em}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.lede{margin-top:var(--u2)}
.body .col{max-width:none;margin-left:0;margin-right:0;padding:0}
.blk{margin-top:var(--u3)}
.body .close{margin-top:var(--u2)}
.blk-h{padding-bottom:calc(var(--b)*.4)}
.blk-h h2{font-family:var(--sans);font-weight:400;font-size:var(--s2);line-height:1.25;color:var(--ink)}
.prose{padding-top:calc(var(--b)*.6);max-width:36em}
.body>.col:not(.blk):first-child .prose{padding-top:var(--u2)}
.prose p+p,.prose p+ol,.prose ol+p{margin-top:.8em}
.prose ol.q{counter-reset:q}
.prose ol.q li{counter-increment:q;display:grid;grid-template-columns:1.8em 1fr;padding:.12em 0;font-family:var(--serif);font-size:var(--s1);line-height:1.35;color:var(--ink)}
.prose ol.q li+li{margin-top:.25em}
.prose ol.q li::before{content:counter(q);font-family:var(--mono);font-size:var(--sm);color:var(--ink-3);padding-top:.3em}
.ruled{margin-top:calc(var(--b)*.6)}
.ruled li+li{margin-top:.8em}
.ruled li>p{max-width:36em}
.ruled b{font-weight:600;color:var(--ink)}
.ruled .sm{display:block;font-family:var(--mono);font-size:var(--sm);color:var(--ink-3);margin-top:.2em}
.prose+.ruled{margin-top:.8em}
.ruled+.prose{padding-top:.8em}

/* ---------- wide screens ----------
   A wing and a court, 2 : 5 (the plan of 2 : 3 : 2 with its right column given to the court).
   The head and the wing stand still; the court scrolls with the window, so the scrollbar is the
   window's own, at its edge. Reading folds the wing to its group and the court grows to 1 : 7;
   the text keeps one 42rem column, so nothing reflows as it grows. */
@media (min-width:1100px) and (min-height:620px){
  :root{--headh:calc(var(--u) + var(--b)*2.6 + 1px)}
  .pg{max-width:88rem;padding-top:0;padding-bottom:var(--u)}
  .head{position:sticky;top:0;z-index:5;background:var(--paper);padding-top:var(--u);padding-bottom:var(--b);border-bottom:1px solid var(--rule)}
  .forum{display:grid;align-items:start;grid-template-columns:minmax(12rem,2fr) minmax(0,5fr);column-gap:var(--u3);padding:var(--u) 0 0;transition:grid-template-columns .55s cubic-bezier(.3,.7,.2,1),column-gap .55s cubic-bezier(.3,.7,.2,1)}
  .court{grid-column:2;grid-row:1;margin:0;min-height:calc(100vh - var(--headh) - 2*var(--u));overflow-x:clip;background:var(--court);padding:var(--u2);display:flex;flex-direction:column;container-type:inline-size}
  .court>*{flex-shrink:0;width:100%;max-width:42rem;margin-left:auto;margin-right:auto}
  .wing{grid-column:1;grid-row:1;margin:0;position:sticky;top:calc(var(--headh) + var(--u));height:calc(100vh - var(--headh) - 2*var(--u));display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
  /* the wing's lists are laid out once, at the width they have on the home page, and the column
     only uncovers them as it grows: lines never rewrap, rules move only sideways */
  .forum{container-type:inline-size}
  .wing{overflow-x:hidden}
  .wing>.label,.wing>.rows{flex-shrink:0;width:max(12rem, (100cqw - var(--u3))*2/7)}
  .wing .row-h{padding:calc(var(--b)*.6) 0}
  .wing .row-h:not(:has(.row-n)){grid-template-columns:1fr auto}
  .wing .plus,.wing .more{display:none}
  .wing .row-t{color:var(--ink-2);transition:color .2s}
  .wing .row.on .row-t,.wing .row-h:hover .row-t{color:var(--ink)}
  .sublabel{margin-top:var(--u)}

  /* the court: the text fades out, the frame moves, the new text settles in */
  .court>*{transition:opacity .16s ease}
  .court.out>*{opacity:0}
  .court.in>*{animation:settle .5s cubic-bezier(.2,.7,.2,1) both}
  .court.in.shrink>*{animation-name:settle-back}
  @keyframes settle{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
  @keyframes settle-back{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

  /* home: the greeting at the head of the court, the lead work under it, the foot at the bottom */
  .stage{display:block;margin-top:var(--u2);padding-top:var(--u);border-top:1px solid var(--rule)}
  .foot{margin-top:auto;padding-top:var(--u2)}
  .court .ground{margin:0 calc((100% - 100cqw)/2 - var(--u2));width:auto;max-width:none}
  .court .ground .col{padding:0 calc((100% - min(42rem, 100cqw - 2*var(--u2)))/2)!important}

  /* everything at once */
  .entry .lede>.go{margin-top:var(--b)}

  /* reading: the wing keeps one line, the reader's group, which leads back home.
     Menu opens the whole wing again; Esc goes home. */
  .rail{cursor:default;text-align:left}
  .js .reading .forum{grid-template-columns:minmax(12rem,1fr) minmax(0,7fr)}
  .js .reading .wing .rows,.js .reading .wing .label{display:none}
  .js .reading .wing .label:has(+ .rows .row.on){display:block;margin:0;padding:0;width:auto}
  .js .reading .rail{display:block;width:100%;padding:.75em 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;color:var(--ink-2);white-space:nowrap;transition:color .2s}
  .js .reading .rail:hover{color:var(--ink)}
  .js .reading .rail::before{content:"\2190";display:inline-block;margin-right:.6em;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .js .reading .rail:hover::before{transform:translateX(-.25em)}
  .court .crumb{display:none}

  /* on the way home: the greeting through its layers, each leaving an afterimage (see site.js) */
  .decoding{position:relative;overflow:hidden}
  .decoding .fin{opacity:0;animation:fin linear both}
  .decoding .lyr{position:absolute;inset:0;animation:ghost cubic-bezier(.3,0,.7,1) both}
  .decoding .raw{font-family:var(--mono);font-size:var(--sm);font-weight:400;letter-spacing:.02em;line-height:1.4;color:var(--ink-3)}
  .decoding .bare{font-family:"Times New Roman",Times,serif;color:#000;letter-spacing:0;line-height:normal}
  h1.decoding .bare{font-size:32px;font-weight:700}
  .say.decoding .bare{font-size:16px;font-weight:400}
  .decoding .lyr.clean{animation:none}
  @keyframes ghost{0%{opacity:1}35%{opacity:.85}100%{opacity:0}}
  @keyframes fin{from{opacity:0}to{opacity:1}}

  .court .title{padding-bottom:0}
}

/* the court changes; the wings stay */
@view-transition{navigation:auto}
.court{view-transition-name:court}
.wing{view-transition-name:wing}
::view-transition-group(*){animation-duration:.28s}

/* calculator: the five steps (design A3-b) */
.blk .intro{padding:calc(var(--b)*.6) 0 var(--u);max-width:36em}
.step{display:grid;grid-template-columns:2em 1fr;align-items:baseline;padding:calc(var(--b)*1.3) 0 calc(var(--b)*1.4);border-top:1px solid var(--rule)}
.step .n{font-family:var(--mono);font-size:var(--sm);color:var(--ink-3)}
.step .nm{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--serif);font-weight:400;font-size:var(--s3);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.step p{grid-column:2;margin-top:calc(var(--b)*.5);max-width:36em}
.vh{font-family:var(--mono);font-size:var(--sm);color:var(--ink-3);white-space:nowrap;letter-spacing:0;font-weight:400}
.ground{background:var(--ink);color:#C9C6BF}
.ground .col{padding:0 calc(var(--b)*1.2)!important}
.ground .step{border-top:0;padding:var(--u) 0 calc(var(--b)*1.6)}
.ground .nm{color:var(--paper)}
.wont{margin-top:calc(var(--b)*.6);border-top:1px solid var(--rule)}
.wont li{padding:var(--gap) 0;border-bottom:1px solid var(--rule)}
.wont .a{display:block;font-family:var(--serif);font-size:var(--s1);line-height:1.3;color:var(--ink);text-wrap:balance}
.wont .b{display:block;margin-top:.3em;max-width:36em}

html:not(.js) .more{grid-template-rows:1fr}
html:not(.js) .more>div{visibility:visible}
html:not(.js) .plus{display:none}
@media print{.plus{display:none}.more{grid-template-rows:1fr}.more>div{visibility:visible}.ground{background:none;color:inherit;border-top:2px solid var(--ink)}.ground .nm{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}