/* The room: daylight's room through a whole day and night, with a small
   framed watercolour hanging on the wall. By day the sun patch and the branch's
   shadow pass over it; in the evening a floor lamp behind the desk takes over,
   and whoever is at the desk casts a shadow on the wall; late at night a little
   moonlight comes through the window. The wall and every page share one fixed
   colour; the hour shows only in the light and the shadows.

   The room's settings (data-paint, data-otw, data-time on <html>) come from page.js. */

:root { --wall: #ecebe6; --page: #ecebe6; --paper: #ecebe6; --hair: #d9d8d2; --light: #fffaf0; --dodge: #1a1510; --sun: 1; --lp: #000; --lf: #000;
  --sill: 0; --bar: 0; }
body { background: var(--page); }

/* Type: Iowan throughout, with small capitals for the labels. */
.lbl, .top__nav a, .room__links a, .is-home .papers__links a, .is-home .papers__links button,
.back, .day__lbl {
  font: 400 14px/1.5 var(--serif); font-variant-caps: all-small-caps; font-variant-numeric: oldstyle-nums; letter-spacing: .07em; }

/* The nav: full ink and large enough to find; the page you are on is underlined. */
.top__nav { gap: 30px; }
.top__nav a { font-size: 17px; letter-spacing: .08em; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: .32em; transition: text-decoration-color .2s; }
.top__nav a:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.top__nav a[aria-current] { text-decoration-color: var(--ink); }
.top__name { font-size: 17px; }

/* The top bar floats over the room with nothing behind it; on the other pages
   it takes the page's colour and the name comes into it (--bar). */
.is-home .top { position: fixed; left: 0; right: 0; background: color-mix(in srgb, var(--page) calc(var(--bar) * 92%), transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-home .top__name { opacity: var(--bar); }
.on-paper .is-home .top { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-home .top__mid { visibility: hidden; }

/* The room ---------------------------------------------------------------- */
.room { position: relative; display: flex; align-items: center; min-height: max(560px, 100svh); padding: 84px 0 72px; overflow: hidden; background: var(--page); }
[data-ruler="top"] .room { padding-top: 196px; }
.room__light { position: absolute; inset: 0; pointer-events: none; }
/* The light is above the painting, so the sun and the lamp fall on it as they do on the wall. */
.patch, .lamp { z-index: 2; }
/* The light is composited with colour dodge, which divides what lies beneath by
   one minus the light's colour. On the bare wall this gives exactly the lit wall
   colour; on the painting it brightens the pigment instead of covering it.
   Anything filled black inside a light is a shadow. */
.patch { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); opacity: var(--sun); mix-blend-mode: color-dodge;
  transform: translate(var(--px), var(--py)) skewY(var(--sk)) scaleX(var(--sx)); transform-origin: 0 0; filter: blur(var(--blur)); }
.patch__panes { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(2, 1fr); gap: 2.6%; }
/* Light scattered off the patch brightens the wall around it. */
.patch::before { content: ""; position: absolute; inset: -45% -60%; background: radial-gradient(closest-side, color-mix(in srgb, var(--dodge) 50%, transparent), color-mix(in srgb, var(--dodge) 22%, transparent) 40%, color-mix(in srgb, var(--dodge) 6%, transparent) 72%, transparent); }
.patch__panes i { background: var(--dodge); }
.patch svg { position: absolute; inset: -10%; width: 120%; height: 120%; overflow: visible; }
.leaves { fill: #000; opacity: .94; filter: blur(var(--lblur, 2px)); transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.leaves .sprig { transform-box: view-box; animation: breeze 7.4s ease-in-out infinite; }
.leaves .sprig:nth-child(2) { animation-duration: 8.9s; animation-delay: -3.1s; }
.leaves .sprig:nth-child(3) { animation-duration: 6.6s; animation-delay: -5.2s; }
.leaves .sprig:nth-child(4) { animation-duration: 9.7s; animation-delay: -1.4s; }
/* A breeze leans a sprig one way and lets it back, in uneven pushes. */
@keyframes breeze { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(.7deg); } 34% { transform: rotate(.45deg); } 52% { transform: rotate(1deg); } 76% { transform: rotate(.2deg); } }
.leaves .lv { transform-box: view-box; transform-origin: 0 0; animation: flutter 3s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.leaves .s { fill: none; stroke: #000; stroke-linecap: round; }
.sill { fill: #000; filter: blur(.8px); }
.sill__cat { opacity: calc(var(--sill) * .92); }
.cast { fill: #000; }

/* The lamp: its light fades out toward the bottom of the room, where the desk
   would stand, so the shadows rise out of the floor of the page. */
.lamp { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: color-dodge; }
.lp { stop-color: var(--lp); }
.lp--mid { stop-color: var(--lpm); }
.lf { stop-color: var(--lf); }
.lf--mid { stop-color: var(--lfm); }
.lamp__add { mix-blend-mode: screen; }
.lamp__cast { fill: #000; opacity: .82; }
.lamp__scene { fill: #000; opacity: .84; }
.stroke { fill: none; stroke: #000; stroke-width: 9; stroke-linecap: round; }
.chair { stroke-width: 12; }
.handle { stroke-width: 7; }
/* Coffee running from the group head into the cup. */
.pour { stroke-width: 4; stroke-dasharray: 6 8; animation: pour .5s linear infinite; }
@keyframes pour { to { stroke-dashoffset: -14; } }
.tail { transform-box: fill-box; transform-origin: 100% 100%; animation: flick 3.6s ease-in-out infinite alternate; }
@keyframes flick { 0%, 55% { transform: rotate(-4deg); } 75% { transform: rotate(8deg); } 100% { transform: rotate(2deg); } }
.leafturn { stroke-width: 5; }
/* The desk cat's tail, curled up behind it, sways now and then at the tip. */
.cattail { stroke-width: 10; }
.stem { stroke-width: 3; }

/* The hero text ----------------------------------------------------------- */
/* One column: the photograph, the name, and the text, multiplied into the wall. */
.room__text { position: relative; z-index: 3; width: min(548px, 80vw); margin-left: max(28px, calc((100vw - var(--wide)) / 2 + 28px)); mix-blend-mode: multiply; font-variant-numeric: oldstyle-nums; }
.room__text h1 { width: fit-content; margin-top: 34px; font-size: 40px; line-height: 1.05; letter-spacing: -.018em; }
.room__role { margin-top: 6px; font-size: 18px; line-height: 1.45; font-style: italic; color: var(--ink-2); }
.room__bio { margin-top: 30px; font-size: 17px; line-height: 1.7; }
.room__bio + .room__bio { margin-top: .9em; }
.room__bio a { text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
/* Three words of the bio, each marked as what it says (room.js, markBio): a training
   curve, a weight that builds letter by letter, four dabs of paint. Each runs on the
   same 6s loop, offset by its place in the sentence, so they play in reading order,
   hold, fade out in the same order, and come round again. */
.bio-mark { position: relative; display: inline-block; --bio-loop: 6s; }
.bio-mark__curve { position: absolute; left: -1px; top: calc(100% - 9px); overflow: visible; pointer-events: none; }
.bio-mark__line { fill: none; stroke: rgba(70, 68, 63, .66); stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bio-mark__line.is-light { stroke: rgba(70, 68, 63, .28); stroke-width: 1; }
.bio-mark__dot { fill: none; stroke: rgba(70, 68, 63, .75); stroke-width: .9; opacity: 0; }
.bio-mark--strong span { -webkit-text-stroke: 0 var(--ink); }
.bio-mark__dabs { position: absolute; left: 0; top: calc(100% - 7px); width: 100%; height: 10px; pointer-events: none; }
.bio-mark__dabs canvas { position: absolute; top: 0; opacity: 0; }
.is-marked .bio-mark__line { animation: bio-draw var(--bio-loop) cubic-bezier(.3, .1, .3, 1) infinite; }
.is-marked .bio-mark__line.is-light { animation-delay: .1s; }
.is-marked .bio-mark__dot { animation: bio-dot var(--bio-loop) .65s infinite; }
.is-marked .bio-mark--strong span { animation: bio-weigh var(--bio-loop) calc(.8s + var(--i) * 50ms) ease-out infinite; }
.is-marked .bio-mark__dabs canvas { animation: bio-dab var(--bio-loop) calc(1.3s + var(--j) * 120ms) cubic-bezier(.2, .7, .3, 1) infinite; }
.is-marked.is-waiting .bio-mark *, .is-marked.is-waiting .bio-mark--strong span { animation-play-state: paused; }
/* The pencil draws in, holds, then runs off forward through the dot. */
@keyframes bio-draw { 0% { stroke-dashoffset: 1; } 12%, 80% { stroke-dashoffset: 0; } 88%, 100% { stroke-dashoffset: -1; } }
@keyframes bio-dot { 0% { opacity: 0; } 5%, 82% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes bio-weigh { 0% { -webkit-text-stroke-width: 0; } 6%, 80% { -webkit-text-stroke-width: calc(var(--i) * .085px); } 88%, 100% { -webkit-text-stroke-width: 0; } }
@keyframes bio-dab { 0% { opacity: 0; transform: scale(.4); } 5%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
.is-still .bio-mark__line { animation: none; stroke-dashoffset: 0; }
.is-still .bio-mark__dot, .is-still .bio-mark__dabs canvas { animation: none; opacity: 1; }
.is-still .bio-mark--strong span { animation: none; -webkit-text-stroke-width: calc(var(--i) * .085px); }
/* The three companies, each underlined by one stroke of its own colour
   (room.js, markFirms). They stay still, so the marks above keep the motion. */
.bio-firm { position: relative; display: inline-block; }
.bio-firm canvas { position: absolute; left: -2px; top: calc(100% - 7px); pointer-events: none; }
/* The one request, set apart at the end of the text. */
.room__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px; }
.room__links a { font-size: 15px; }

/* The photograph: a print on the wall, its edges only just softened, with
   the next print under it. Over it with the mouse, the top print lifts and the
   corner of the next shows; a click slides the top one away. */
.room__head { display: flex; align-items: flex-end; gap: 30px; }
figure.me { position: relative; flex: none; width: calc(var(--me-h, 212px) * .8); height: var(--me-h, 212px); margin: 0; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
figure.me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent); mask-composite: intersect;
  transform-origin: 30% 90%; transition: transform .5s cubic-bezier(.25, .8, .3, 1), opacity .4s; }
.me__under { opacity: 0; transform: rotate(3.2deg) translate(7px, 3px); }
@media (hover: hover) {
  figure.me:hover .me__top { transform: rotate(-2.2deg) translate(-5px, -4px); }
  figure.me:hover .me__under { opacity: 1; }
}
figure.me.is-flip .me__top { transform: rotate(-9deg) translate(-34px, 22px); opacity: 0; transition-duration: .42s, .34s; }
figure.me.is-flip .me__under { opacity: 1; transform: none; }
@media (hover: hover) { figure.me.is-flip:hover .me__under { transform: rotate(-2.2deg) translate(-5px, -4px); } }
figure.me.is-set img { transition: none; }
figure.me.is-fresh .me__under { opacity: 0; transform: none; }
figure.me .me__under { transition-duration: .55s, .45s; }
figure.me[hidden] { display: none; }
figure.me:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 6px; }

/* Open to work: a line that says so, marked in one of three ways (data-otw).
   Over it, or on a tap, it says a little more, in the space above it. */
.otw { position: relative; flex: 1; min-width: 0; padding-bottom: 1px; }
.otw__tag { position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.otw__lbl { font-size: 16px; font-variant-caps: all-small-caps; letter-spacing: .075em; }
.otw__yr { font-size: 15px; color: var(--ink-2); font-variant-numeric: oldstyle-nums; transition: color .3s; }
.otw__lbl, .otw__yr { position: relative; }
.otw__wash, .otw__pencil { display: none; position: absolute; pointer-events: none; }
[data-otw="wash"] .otw__wash { display: block; transition: opacity .3s; }
[data-otw="pencil"] .otw__pencil { display: block; height: 10px; overflow: visible; }
.otw__line { fill: none; stroke: rgba(70, 68, 63, .62); stroke-width: .8; stroke-linecap: round; }
.otw__line.is-light { stroke: rgba(70, 68, 63, .3); stroke-width: 1; }
[data-otw="type"] .otw__tag:hover .otw__lbl, [data-otw="type"] .otw.is-open .otw__lbl { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: .3em; text-decoration-thickness: 1px; }
.otw__tag:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 4px; }
.otw__more { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(270px, 100%); margin: 0; padding-top: 14px;
  background: linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 28px 1px no-repeat;
  font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .45s cubic-bezier(.25, .8, .3, 1), visibility 0s .45s; }
.otw__more a { font-style: normal; color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.otw.is-open .otw__more { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.25, .8, .3, 1); }
.otw.is-open .otw__yr, .otw__tag:hover .otw__yr { color: var(--ink); }
.is-bare .otw__more { position: static; margin-bottom: 8px; display: none; }
.is-bare .otw.is-open .otw__more { display: block; }

/* The painting ------------------------------------------------------------ */
.room__shade { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.room__shade polygon { fill: rgb(58, 50, 42); }
.nail { transition: opacity .45s; }
.nail__head { fill: #7a736b; }
.nail__glint { fill: rgba(255, 252, 245, .65); }
.nail__shadow { fill: rgba(50, 42, 34, .32); filter: blur(.7px); }
/* The painting is a sheet of watercolour paper cut close around it. It hangs
   in one of three ways (data-paint): taped to the wall at its top corners,
   painted straight onto the wall, or pegged to a line beside the one before. */
.card { position: absolute; z-index: 1; left: 0; top: 0; transform-origin: 50% var(--pin, 16px); will-change: transform;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; outline: none; }
.card.is-held { cursor: grabbing; }
[data-paint="wall"] .card, [data-paint="line"] .card { cursor: pointer; }
.card:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 6px; }
.sheet { position: absolute; inset: 0; container-type: size;
  background-color: color-mix(in srgb, var(--wall) 30%, #fbf8f0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.study canvas { position: absolute; mix-blend-mode: multiply; pointer-events: none; }
/* Pencilled in the band under the picture once it is finished: what it is and when. */
.sheet__note { position: absolute; left: calc(var(--m, 0px) + 1%); right: calc(var(--m, 0px) + 1%); bottom: 0; height: var(--band, 12%); align-items: center;
  display: flex; justify-content: space-between; gap: 8px; margin: 0; overflow: hidden;
  font: 400 8.2cqw/1 var(--hand); color: rgba(62, 60, 56, .72); white-space: nowrap; opacity: 0; transition: opacity .9s; pointer-events: none; }
.sheet__note.is-on { opacity: 1; }
.sheet__note [hidden] { display: none; }
.sheet__note:has(span:last-child[hidden]) { justify-content: center; }
.card__shade { position: absolute; inset: 0; pointer-events: none; }
.card__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(172deg, rgba(255, 255, 255, .07), transparent 28%, transparent 70%, rgba(70, 60, 50, .06)); }
.tape, .peg { display: none; position: absolute; pointer-events: none; filter: drop-shadow(var(--cx, 0px) var(--cy, 2px) 1.2px rgba(40, 32, 24, .2)); }
.study--prev { display: none; }

/* Taped: two strips of masking tape across the top corners, translucent
   enough that the corner of the sheet shows through. */
[data-paint="taped"] .tape { display: block; top: -7px; width: 54px; height: 17px;
  background: rgba(226, 214, 186, .62);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 40%, rgba(120, 100, 70, .05));
  clip-path: polygon(0 8%, 6% 0, 9% 14%, 14% 2%, 100% 0, 96% 22%, 100% 46%, 95% 70%, 100% 100%, 8% 100%, 4% 84%, 0 62%, 5% 40%); }
[data-paint="taped"] .tape--l { left: -16px; transform: rotate(-38deg); }
[data-paint="taped"] .tape--r { right: -16px; transform: rotate(36deg); }

/* Painted on the wall: no paper, the washes lie on the plaster itself. */
[data-paint="wall"] .sheet { background: none; }
[data-paint="wall"] .card__shade { display: none; }
[data-paint="wall"] .study canvas { opacity: .94; }

/* On the line: a cord between two nails and a wooden peg on each sheet. */
[data-paint="line"] .study--prev { display: block; }
.study--prev[hidden] { display: none !important; }
[data-paint="line"] .peg { display: block; left: calc(50% - 5px); top: -11px; width: 10px; height: 30px; overflow: visible; }
.peg__a { fill: #c2a67c; }
.peg__b { fill: #a98b62; }
.peg__spring { fill: none; stroke: #6d6760; stroke-width: .9; }
.cord { fill: none; stroke: #8d847a; stroke-width: 1.1; }
.cord__shadow { fill: none; stroke: rgba(50, 42, 34, .16); stroke-width: 1.4; filter: blur(1px); }

.back { padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; pointer-events: auto; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: .22em; }
.back:hover { color: var(--ink); text-decoration-color: var(--ink); }
.back[hidden] { display: none; }

/* The day ruler ----------------------------------------------------------- */
/* Midnight to midnight. The day so far is painted, the rest pencilled; the
   mark is the hour the room shows and can be dragged along the line. */
.day { position: absolute; z-index: 4; height: 72px; touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; mix-blend-mode: multiply; }
[data-ruler="top"] .day { left: max(28px, calc((100vw - var(--wide)) / 2 + 28px)); right: max(28px, calc((100vw - var(--wide)) / 2 + 28px)); top: 72px; }
.day__paint { position: absolute; left: 0; top: 12px; pointer-events: none; }
.day__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.day__tick { stroke: var(--ink-3); stroke-width: 1; }
.day__tick.is-major { stroke: var(--ink-2); }
.day__hz { fill: none; stroke: rgba(70, 68, 63, .62); stroke-width: .8; stroke-linecap: round; }
.day__hz.is-light { stroke: rgba(70, 68, 63, .22); stroke-width: .9; }
.day__lbl { position: absolute; left: 0; white-space: nowrap; color: var(--ink-2); pointer-events: none; }
.day__pct { top: -10px; font-size: 13px; }
.day__pct b { font-weight: 400; font-variant-caps: normal; font-variant-numeric: oldstyle-nums tabular-nums; letter-spacing: 0; font-size: 15px; color: var(--ink); margin-right: .15em; }
.day__hour { top: 52px; font-size: 13px; color: var(--ink-3); transform: translateX(-50%); transition: opacity .2s; }
.day__hour.is-first { transform: none; }
.day__hour.is-last { transform: translateX(-100%); }
.day__hour.is-hid, .day__hour.is-gone { opacity: 0; }
.day__time { top: 50px; font-size: 16px; font-variant-caps: normal; letter-spacing: 0; color: var(--ink); font-variant-numeric: oldstyle-nums tabular-nums; }
.day__time i { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .06em; margin-left: .2em; color: var(--ink-2); }
.day__now { position: absolute; left: 0; top: 8px; width: 0; height: 38px; outline: none; cursor: grab; }
.is-drag .day__now { cursor: grabbing; }
.day__now::before { content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: 38px; background: var(--ink); }
.day__knob { position: absolute; left: -6px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--page); border: 1.5px solid var(--ink); box-sizing: border-box; transition: transform .2s; }
.day:hover .day__knob, .day__now:focus-visible .day__knob, .is-drag .day__knob { transform: scale(1.25); }
.day__back { position: absolute; left: 0; top: 52px; font-size: 13px; }

/* Pages: the room is the whole home page, and the blog and the papers each
   have a page of their own. The page that is away is kept drawn, fixed and
   transparent, so showing it again costs no painting; the room's own motion
   pauses meanwhile. A page that leaves keeps its place on the screen (--y)
   while it fades. */
.is-home .room, .is-home .lists { will-change: opacity; }
.is-home .room.is-away, .is-home .lists.is-away { position: fixed; left: 0; right: 0; top: var(--y, 0px); opacity: 0; pointer-events: none; }
.room.is-away * { animation-play-state: paused !important; }
.is-home .lists { min-height: 100svh; padding-top: var(--top); }
.is-home .sec { display: none; padding-top: 72px; }
.lists[data-sec="blog"] #blog, .lists[data-sec="papers"] #papers { display: block; }
.is-home .foot { margin-top: 120px; }
.is-home .top { transition: background-color .35s; }
.is-landing .is-home .top { transition: none; }
.is-arriving body { opacity: 0; }

/* The indexes ------------------------------------------------------------- */
.is-home .sec__head { position: relative; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.is-home .sec__head h2 { font-size: 40px; line-height: 1.05; font-style: normal; letter-spacing: -.018em; }
.is-home .index a.row { padding: 24px 0; }
.is-home .row__title { font-size: 24px; line-height: 1.2; letter-spacing: -.012em; }
.is-home .row__sub { margin-top: 6px; font-size: 16px; line-height: 1.45; }
.is-home .index .lbl { padding-top: 6px; }
.is-home .row__end .lang { margin-top: 2px; }
.is-home .papers__year { padding-top: 2px; color: var(--ink-2); }
.is-home .papers__links { gap: 2px 18px; }
.is-home .foot { font: 400 15px/1.5 var(--serif); }


@media (max-width: 760px) {
  .room { display: block; min-height: 100svh; padding: 88px 16px 64px; }
  [data-ruler="top"] .room { padding-top: 160px; }
  [data-ruler="top"] .day { left: 16px; right: 16px; }
  .room__text { width: auto; margin-left: 0; }
  .room__text h1 { font-size: 36px; }
  .room__role { font-size: 17px; }
  .room__bio { margin-top: 26px; font-size: 16.5px; }
  .room__links { margin-top: 30px; }
  .room { padding-bottom: calc(var(--hang, 360px) + 40px); }
  .room__head { gap: 20px; }
  figure.me { width: 136px; height: 170px; }
  .otw__tag { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
  .otw__lbl { font-size: 14.5px; letter-spacing: .06em; }
  .otw__yr { font-size: 14px; }
  .otw__more { font-size: 14.5px; line-height: 1.5; }
  .is-narrow .lamp__scene, .is-narrow #lfloor { display: none; }
  .top__nav { gap: 20px; }
  .top__nav a { font-size: 16px; }
  .is-scrolled .is-home .top { background: color-mix(in srgb, var(--page) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .is-home .sec { padding-top: 48px; }
  .is-home .sec__head h2 { font-size: 32px; }
  .is-home .row__title { font-size: 22px; }
  .is-home .index a.row { padding: 20px 0; }
}
/* On the smallest phones the four links and the name only fit with a tighter gap. */
@media (max-width: 400px) { .top__nav { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .leaves .sprig, .leaves .lv, .tail, .pour { animation: none; } }