/* One hand. Three stylesheets were written by different makers; these rules, loaded last, make them one system:
   one title size, one rhythm under the band, one name and one edge for each thing. */
h1,.full-essay h1,.essay-opening .feature-title,.field-head h1,.day-head h1,.room-colophon h1{font-size:clamp(2.75rem,4.1vw,3.75rem);line-height:1.08;letter-spacing:-.015em;max-width:none;margin:0 0 1.5rem;font-weight:500;text-wrap:balance}
.full-essay header .meta+h1{margin-top:.6rem}
.full-essay,.room-colophon .essay,.reading-entrance,.day-head{padding-top:3.5rem}
.field-head{max-width:none;margin:0;padding:3.5rem var(--space) 2rem}
.prose,.full-essay .prose{line-height:1.65}
.mast .name{font-size:1.375rem}.mast nav a{font-size:var(--label)}
.mast nav a,.room-destinations a,.end nav a,.section-title a,.ph-nav a,.hours a{min-width:0}
.end nav a,.room-destinations a{padding-inline:.5rem;margin-inline:-.5rem}
.valley-end nav a{justify-content:flex-start}
button:hover,button[aria-pressed=true]{text-decoration:none}
summary{list-style:none}summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:1.1em}details[open]>summary::before{content:"–"}
.scene-readout,.scene-readout button,.scene-tools .comfort summary,.more summary{font-size:var(--small)}
.scene-tools:has(.comfort[open]) .scene-readout{display:none}
.no-js .scene-tools{display:none}
.more{margin-top:.5rem}.more-body{padding-top:.75rem}
/* A link with an arrow: the words are underlined, the arrow is not. */
.read-link,.quiet-link{border-bottom:0;padding:0;font-weight:400;text-decoration:none;gap:.4em}
.read-link .word,.quiet-link .word{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.read-link:hover{color:inherit}.read-link:hover .word,.quiet-link:hover .word{text-decoration-thickness:2px}
.room-continuation time{display:block}
main>.room-destinations,.day-end{margin-bottom:4rem}
.thx-name a{min-height:44px;display:inline-flex;align-items:center}
.valley-floor{max-width:none}
/* The ground under every page: one column on one edge. The words are one size; the field and its button the next. */
.invitation{flex-direction:column;align-items:flex-start;gap:.15rem}
.invitation>.subscribe,.valley-end .invitation>.subscribe{flex:0 1 auto;width:100%;max-width:30rem;margin-bottom:1rem}
.subscribe input[type=email]{font-size:var(--ui)}
.landscape-end .invitation,.landscape-end nav{max-width:none;margin-left:0;margin-right:0}
/* The four lights, in sight. */
.quick-light{display:flex;gap:.25rem}.quick-light[hidden]{display:flex!important;visibility:hidden}
.quick-light button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border-color:transparent;color:var(--muted)}
.quick-light button:hover{border-color:var(--line);background:transparent;color:var(--ink)}
.quick-light button[aria-pressed=true]{background:transparent;color:var(--ink);border-color:var(--ink)}
.quick-light svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scene-tools:has(.comfort[open]) .scene-readout{display:flex}
.scene-readout{max-width:none}
/* On a small screen the open panel already holds the four lights: the four icons rest while it is open. */
@media(max-width:760px){.scene-tools:has(.comfort[open]) .scene-readout{display:none}}
/* Lines: one passage at a time, large, with room around it; the title, the note, the groups, the passages and
   the words all start at one edge. Each group has a plain name, a reader's, set as the site sets a year. */
.lines-head,.full-essay.words{max-width:calc(46rem + var(--space)*2)}
.lines-head{padding-bottom:1rem}.room-note{max-width:34rem;font-size:var(--label)}
.lines{max-width:calc(46rem + var(--space)*2);margin:0 auto;padding:0 var(--space) 2rem}
.line-group{padding:2rem 0 1rem;border-top:1px solid var(--line)}
.line-group h2{font-size:1.75rem;font-weight:500;line-height:1.2;margin:0 0 1.75rem}
.line{margin:0 0 3.25rem}
.line blockquote{margin:0}.line blockquote p{font-size:var(--passage);line-height:1.34;text-wrap:pretty;margin:0}
.line figcaption{display:flex;gap:.25rem 1rem;justify-content:flex-start;padding-top:.9rem;font-size:var(--small)}
.line figcaption a{display:inline-flex;align-items:center;min-height:44px}
.line figcaption time{display:inline-flex;align-items:center;color:var(--muted)}
/* The counted words are marked twice, by colour and by a dotted line beneath: never by colour alone. */
.w{color:var(--accent);text-decoration:underline dotted;text-decoration-thickness:.06em;text-underline-offset:.2em}
.words h2{font-size:2rem;margin-bottom:.75rem}.words .meta{margin-bottom:1.25rem}
.word-list{list-style:none;padding:0;margin:0 0 1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.35rem 2rem}
.word-list li{font-size:var(--prose);display:flex;align-items:baseline;gap:.75rem;justify-content:space-between;border-bottom:1px solid var(--line);padding:.35rem 0}
.word-list .meta{margin:0}.word-list li{flex-wrap:wrap}
@media print{.quick-light{display:none!important}.w{color:inherit}}
@media(max-width:760px){
 .full-essay,.room-colophon .essay,.reading-entrance,.day-head{padding-top:2.25rem}
 .field-head{padding:2.25rem var(--space) 1.5rem}
 .scene-readout,.scene-readout button,.scene-tools .comfort summary{font-size:var(--small)}
}
/* The detail pass of 2 October, evening. One scale: 17, 18, 20, 23, 28, 32, and the title. */
.meta{line-height:1.5}
.index-year h3,.year h2{font-size:1.75rem;font-variant-numeric:lining-nums}
.index-year h3{padding-top:.65rem}
.thx-group h2{font-size:var(--ui)}
.thx-list li{font-size:var(--prose)}
/* Thanks: a name stands on the same line as its neighbours whether or not it is a link. */
.thx-name>span{display:inline-flex;align-items:center;min-height:44px}
/* The line under a title is a step smaller than the prose that follows it. */
.essay-sub{font-size:var(--ui);line-height:1.4}
.photo-triptych figcaption{font-size:var(--small)}
.essay-opening .meta+.feature-title{margin-top:.6rem}
/* The text itself: no stranded last word where the browser can help; the reader's selection in the page's own colours. */
.prose p,.line blockquote p,.room-note{text-wrap:pretty}
::selection{background:var(--accent);color:var(--paper)}
/* Where an image once stood between two parts of a piece, the pause it made is kept as one line of space. */
.author-body p:not(:empty)~p:empty:has(~p:not(:empty)){display:block;height:1.65em;margin:0}
/* On an essay the lit crest is a quiet mark of place, not a headline. */
.landscape-range .crest{stroke-width:2}.landscape-range .lit-a{stop-opacity:.42}
/* The gallery: every photograph opens its own page; its number, month and time read as one line;
   each year's heading stays in view on a small screen and is the way back to the list of years. */
.plate figcaption{justify-content:flex-start;gap:.25rem .8rem}.plate-no{margin-right:0}
.plate{scroll-margin-top:4rem}
.year h2 a,.hour-h a{text-decoration:none}.year h2 a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.year h2 a:hover{text-decoration:underline}
.field-head p a{padding-block:.65rem}
.up{margin-left:.35em}
/* One day: the hours stand in even rows, eight across (four on a small screen). */
.hours{grid-template-columns:repeat(8,4.5rem)}
/* One day: each hour's label is the way back to the list of hours. It does not follow the reader down the page:
   every caption already carries its time, and a label that stayed in view lay on top of them. */
/* A photograph's page: where it stands among them all, and the text size within reach. */
.ph-pair{align-items:center}.ph-at{color:var(--muted)}
.text-size{margin:0}.text-size summary{font-size:var(--small);color:inherit;display:inline-flex;align-items:center}
.text-size .settings-body{padding:.5rem 0 1rem;border:0}.text-size .choice{margin:0}
.ph-more .text-size[open]{flex-basis:100%}
.day-head .text-size{margin-top:1rem}
html.js .text-size[hidden]{height:44px}
/* One left edge. Below 1600px the page runs the full width and the name, the tools, the page and the ground all
   start at the same margin; above it the page is a column with real margins and the others keep to its edge. */
main{max-width:none;display:flow-root}
/* A short page still reaches the foot of the window: the ground is the last thing on every page. */
@media screen{body.landscape-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
 body.landscape-page>:not(.skip){width:100%;flex:0 0 auto}
 body.landscape-page>main:not(.skip){flex:1 0 auto}}
@media(min-width:1600px){
 main{max-width:86rem}
 .mast,.room-photo .mast,.scene-tools,.valley-floor{padding-left:max(var(--space),calc((100% - 86rem)/2 + var(--space)));padding-right:max(var(--space),calc((100% - 86rem)/2 + var(--space)))}
}
/* Short links are 44px wide to the finger without moving on the page. */
.photo-years a,.day-end a,.section-title a,.ph-more a{padding-inline:.5rem;margin-inline:-.5rem}
.end nav a.short{padding-inline:1rem;margin-inline:-1rem}
/* The end of a piece: one rule, then the credit, the shape, and the pieces either side, which look like the links they are. */
.room-continuation{border-top:0;padding-top:0;margin:1.5rem 0 1rem}
.room-continuation .next-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.room-continuation a:hover .next-title{text-decoration-thickness:2px}
/* A photograph in the gallery is never taller than the window: it can be seen whole, with its caption. */
.plates>.plate:not(.plate-portrait){max-width:calc(82vh*1.3333)}
.plates>.plate-portrait{max-width:min(32rem,calc(82vh*.75))}
/* Writing: the side photograph is as wide as its column, so its right edge is the navigation's; its top is
   squared to the capitals of the date beside it. */
@media(min-width:761px){.reading-side{max-width:none;padding-top:.45rem}}
/* A caption is set one way everywhere: its number, then the month and the time, together at the left. */
figcaption{justify-content:flex-start;gap:.25rem .8rem}
/* A photograph's page: the caption and the ways onward stand on the photograph's own ground, in its colours;
   the photograph leaves room for them in the window. */
.ph-col{width:min(100%,calc(min(60vh,54rem)*var(--ar,1.3333)))}
.room-photo .ph-nav{background:var(--ground);color:var(--on-ground);padding-top:.25rem;padding-bottom:2rem}
.room-photo .ph-nav a,.room-photo .ph-nav summary,.room-photo .ph-at{color:inherit}
.room-photo .ph-nav button{color:inherit;border-color:currentColor}
.room-photo .ph-nav button:hover{background:transparent}
.room-photo .ph-nav button[aria-pressed=true]{background:var(--on-ground);color:var(--ground);border-color:var(--on-ground)}
.room-photo .ph-nav :focus-visible{outline-color:var(--on-ground)}
.ph .ground{padding-bottom:.5rem}
/* The valley's own page: its title and note start at the page's edge, with the list beneath them. */
.room-valley-text{max-width:none;margin:0}
/* A caption's number is set one way everywhere. */
figcaption>span:first-child,.plate-no,.cap .no{font-weight:500;font-variant-numeric:lining-nums}
/* One day: a focus ring has to show on every sky from night to noon, so it is drawn in the ground's two colours,
   the light line between two dark ones. The hour's label carries its ring inside itself. */
.hour .frame:focus-visible{outline:3px solid var(--on-ground);outline-offset:3px;box-shadow:0 0 0 3px var(--ground),0 0 0 9px var(--ground)}
.hour-h a:focus-visible{outline:3px solid var(--on-ground);outline-offset:-6px}
/* A photograph reached by the keyboard, forwards or backwards, comes to rest clear of the top of the window. */
.image-link,.frame{scroll-margin-top:1rem}
/* The row of tools never squeezes its first control: where there is no room the lights, and the pause button
   when it shows, go to a second line. */
.scene-tools{flex-wrap:wrap}
.scene-tools .comfort:not([open]){flex:1 0 auto}
.scene-readout{margin-left:auto}
/* A title or a line under it that runs to two lines is divided evenly, so no last word stands alone. */
.essay-sub,.room-continuation .next-title,.index-year a>span,.thx-name{text-wrap:balance}
/* A link answers the finger or the pointer while it is held, on every ground. */
a:active{text-decoration-thickness:2px}
/* While Alegreya is on its way, the reader's own Georgia stands in at Alegreya's width and height (measured on the
   28 pieces and tuned on the pages: 92% for the roman, 80% for the italic), so that about one block in thirty
   changes its line count when Alegreya arrives, where most of them used to. */
@font-face{font-family:"Alegreya fallback";src:local("Georgia");font-style:normal;font-weight:400 900;size-adjust:92%;ascent-override:110.4%;descent-override:37.5%;line-gap-override:0%}
@font-face{font-family:"Alegreya fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;font-weight:400 900;size-adjust:80%;ascent-override:127%;descent-override:43.1%;line-gap-override:0%}
/* The same for a phone with no Georgia, whose own serif is Noto Serif (85.2% and 77.4%). */
@font-face{font-family:"Alegreya fallback 2";src:local("Noto Serif"),local("NotoSerif-Regular");font-style:normal;font-weight:400 900;size-adjust:85.2%;ascent-override:119.3%;descent-override:40.5%;line-gap-override:0%}
@font-face{font-family:"Alegreya fallback 2";src:local("Noto Serif Italic"),local("NotoSerif-Italic");font-style:italic;font-weight:400 900;size-adjust:77.4%;ascent-override:131.2%;descent-override:44.6%;line-gap-override:0%}
body{font-family:Alegreya,"Alegreya fallback","Alegreya fallback 2",Georgia,serif}
/* The long vowels of names, and the arrows, are set in the same typeface: two small files more, each fetched
   only by a page that has those characters. (The up and down arrows are already in the main file.) */
@font-face{font-family:Alegreya;src:url('/assets/alegreya-more-wght-normal.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:Alegreya;src:url('/assets/alegreya-more-wght-italic.woff2') format('woff2');font-style:italic;font-weight:400 900;font-display:swap;unicode-range:U+0100-017F}
@font-face{font-family:Alegreya;src:url('/assets/alegreya-arrows-wght-normal.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+2190,U+2192,U+2196-2199}
@media(max-width:760px){
 .year h2{position:sticky;top:0;z-index:3;margin:0 calc(-1*var(--space));padding:0 var(--space);background:var(--paper);border-bottom:1px solid var(--line)}
 .index-year h3{font-size:1.75rem}
 .invitation>.subscribe,.valley-end .invitation>.subscribe{max-width:100%}
 /* Thanks on a small screen: the group's name is no smaller than the names under it; at the larger text sizes
    one name to a row, so that no name is broken in the middle. */
 .thx-group h2{font-size:var(--prose);font-weight:500;color:var(--ink)}
 html[data-size=larger] .thx-list,html[data-size=largest] .thx-list{grid-template-columns:minmax(0,1fr)}
 .hours{grid-template-columns:repeat(4,minmax(0,1fr))}
 /* A photograph reached by the keyboard is not left under the year's bar. */
 .image-link{scroll-margin-top:4rem}
 /* On a small screen held sideways a photograph in One day still fits the window. */
 .frame{width:min(100%,calc(86vh*var(--ar,1.3333)))}
 /* The gallery's years stand three and three. */
 .photo-years{display:grid;grid-template-columns:repeat(3,max-content);gap:.2rem 2rem}
}
@media print{
 .text-size,.ph-at,.up{display:none!important}
 .year h2{position:static}
 .line{break-inside:avoid}.line-group h2{break-after:avoid}
 .full-essay header .meta,.essay-finish .meta{color:#000}
 /* On paper the ways onward are no use; the address the piece lives at is. */
 .room-destinations{display:none!important}
 /* On paper an hour's label is plain black words, not pale words on a ground that is not printed. */
 .hour-h a{background:none;color:#000;padding:0;min-height:0}
 /* No empty sheet after the last line: the space kept under a page on a screen is not kept on paper. */
 .writing-index,.photo-shelf,.lines,.full-essay,.thx-group:last-child,.year:last-child{padding-bottom:0}
 .essay-finish[data-url]::after{content:attr(data-url);display:block;width:100%;margin-top:.4rem;font-size:10pt}
}
/* Lines opens in plain ink; the counted words are a layer the reader chooses. No script. */
.lines .w{color:inherit;text-decoration:none}
main:has(#show-counted-words:checked) .lines .w{color:var(--accent);text-decoration:underline dotted;text-decoration-thickness:.06em;text-underline-offset:.2em}
.show-words{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;margin-top:.75rem;font-size:var(--label);cursor:pointer}
.show-words input{width:1.5rem;height:1.5rem;margin:0;accent-color:var(--accent)}
.show-words:focus-within{outline:2px solid currentColor;outline-offset:4px}
/* Letters: the same room as Lines, by year. A passage keeps the line breaks it was written with. */
.letter-years{display:flex;flex-wrap:wrap;gap:0 .5rem;margin-top:1rem;font-size:var(--label)}
.letter-years a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .35rem;font-variant-numeric:lining-nums}
.letters .line-group h2{font-variant-numeric:lining-nums;scroll-margin-top:1rem}
.letters .line blockquote p+p{margin-top:.5em}
.letters .line figcaption{padding-top:.6rem;min-height:44px;align-items:center;flex-wrap:wrap}
.letters .line figcaption .meta{margin:0;font-size:var(--small)}
.letters .letter{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.25rem 0 2rem}
.letters .letter figcaption{padding:0 0 1rem}
.letters .letter blockquote p{font-size:var(--prose);line-height:1.65;overflow-wrap:break-word}
.letters .letter blockquote.prose-set p+p{margin-top:1.1em}
.letters .letter blockquote.verse p+p{margin-top:.2em}
.letters .line blockquote p{overflow-wrap:break-word}
@media print{.show-words,.letter-years{display:none!important}.letters .letter{break-inside:auto}}