/* Inner pages as a quiet museum room: a wall colour and one Monet hung at the top.
   Loaded after style.css; everything is scoped to body.museum.
   The landing page shows about.html in an iframe as the first page of a book (window width, much taller than
   the window) and then zooms into it, so nothing here may depend on the viewport height or on script. */

@view-transition { navigation: auto; }

/* everything is sized in rem, so scaling the root type with the window width scales the whole page with it:
   16px up to ~1100px wide, then growing gently (≈17px on a 1512px laptop), capped at 18px */
html { font-size: clamp(100%, .35vw + .75rem, 112.5%); }

body.museum {
  --rurikon-300: #78818d;
  --page: 72rem;                         /* nav 4rem + gap 3.5rem + text column 64.5rem; narrower windows just fill */
  --wall: #f9f1e2;
  --ink: 30 33 37;                       /* rurikon-800 as rgb, for hairlines and shadows */
  background: var(--wall);
}

/* the page is one centred column: the painting, the nav and the text share the same edges */
body.museum .work,
body.museum .layout { max-width: var(--page); margin-inline: auto; }
body.museum main,
body.museum article { max-width: none; }  /* the column width comes from --page */

/* every paragraph opens in lower case */
body.museum p::first-letter { text-transform: lowercase; }

/* the work: a wide strip across the top like a header, framed on the subject (--focus) */
body.museum .work { margin-bottom: 2rem; }

body.museum .work .canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 2;                   /* phones */
  background: rgb(var(--ink) / .06);     /* the empty spot on the wall while the image loads */
  box-shadow:
    0 0 0 1px rgb(var(--ink) / .08),     /* hairline edge */
    0 1px 2px rgb(var(--ink) / .08),
    0 6px 12px -4px rgb(var(--ink) / .1),
    0 18px 32px -16px rgb(var(--ink) / .26);  /* soft shadow on the wall below, lit from above */
}

body.museum .work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  /* a slight zoom about the focus trims a frame or scan edge that some museum photographs include */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}

/* per painting: where the strip sits vertically */
body.museum .work.lazare { --focus: 50% 87%; }   /* both engines whole, chimneys to wheels, and the platform */
body.museum .work.grenouillere { --focus: 50% 40%; --zoom: 1.045; }   /* the round island and its crowd, the bathers and boats; the scan has dark edges */
body.museum .work.haystacks { --focus: 50% 54%; }      /* the two stacks and the field */
body.museum .work.manneporte { --focus: 50% 60%; --zoom: 1.02; }   /* the arch and the sea at its foot */
body.museum .work.edelfelt { --focus: 50% 40%; }      /* the sails, the waterfront behind and the water */
body.museum .work.argenteuil { --focus: 50% 70%; }   /* the sailboats, the moored boat and the bridge arches */
body.museum .work.renoir { --focus: 50% 52%; }       /* Monet at his easel, with the dahlias beside him */

/* about: small text on the left, a small photograph at the right edge of the page */
body.museum .about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; font-size: .875rem; line-height: 1.5rem; }
body.museum .about .intro { max-width: 36rem; }
body.museum .about p { margin-top: 1.25rem; }
body.museum .about h1 + p { margin-top: 0; }
body.museum .about h1 { margin-bottom: 1rem; line-height: 1.75rem; }   /* on the menu's baseline */
body.museum .portrait { margin: 0; width: 20rem; max-width: 100%; justify-self: end; }
@media (max-width: 29.99rem) { body.museum .portrait { width: 100%; } }      /* phones: as wide as the text */
body.museum .portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 1px 2px rgb(var(--ink) / .08), 0 6px 12px -4px rgb(var(--ink) / .1), 0 18px 32px -16px rgb(var(--ink) / .26);
}

/* the map: an old sea chart (chart.js) in a frame with a graduated border, like the neatline of an antique map */
body.museum .chart {
  --ink: 58 45 31;
  position: relative;
  margin-top: 1.75rem;
  padding: 16px;
  background: #e8d9b4;
  box-shadow: 0 0 0 1px rgb(var(--ink)), 0 6px 12px -4px rgb(30 33 37 / .12), 0 22px 40px -18px rgb(30 33 37 / .35);
}
body.museum .chart::before {                       /* alternating ink-and-paper degree bars between two rules */
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  outline: 1px solid rgb(var(--ink)); outline-offset: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--ink)), 0 0 0 4px #e8d9b4, 0 0 0 5px rgb(var(--ink) / .5);
  background:
    linear-gradient(rgb(var(--ink)) 0 0) left top / 5px 5px no-repeat,              /* inked corners, whatever the width */
    linear-gradient(rgb(var(--ink)) 0 0) right top / 5px 5px no-repeat,
    linear-gradient(rgb(var(--ink)) 0 0) left bottom / 5px 5px no-repeat,
    linear-gradient(rgb(var(--ink)) 0 0) right bottom / 5px 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(var(--ink)) 0 26px, #f2e7cc 26px 52px) top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(var(--ink)) 0 26px, #f2e7cc 26px 52px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(180deg, rgb(var(--ink)) 0 26px, #f2e7cc 26px 52px) left / 5px 100% no-repeat,
    repeating-linear-gradient(180deg, rgb(var(--ink)) 0 26px, #f2e7cc 26px 52px) right / 5px 100% no-repeat;
}
body.museum .map {
  width: 100%;
  aspect-ratio: 1 / 1;                   /* phones */
  background: #ecdfbf;
  box-shadow: 0 0 0 1px rgb(var(--ink));
  font: inherit;
}
body.museum .map .maplibregl-ctrl-group { border-radius: 0; background: #f2e7cc; box-shadow: 0 0 0 1px rgb(var(--ink) / .6); }
body.museum .map .maplibregl-ctrl-group button + button { border-top-color: rgb(var(--ink) / .25); }
@media (pointer: coarse) { body.museum .map .maplibregl-ctrl-group button { width: 36px; height: 36px; } }
body.museum .map .maplibregl-cooperative-gesture-screen {      /* the 'use two fingers' hint, in the chart's own hand */
  background: rgb(58 45 31 / .5); color: #f3e9d2; text-align: center; text-wrap: balance;
  font: italic 1.25rem/1.3 "IM Fell English", Georgia, serif;
}
body.museum .map .maplibregl-ctrl-attrib { font-size: .6875rem; background: rgb(242 231 204 / .85); border-radius: 0; color: rgb(var(--ink) / .85); box-shadow: 0 0 0 1px rgb(var(--ink) / .3); }
body.museum .map .maplibregl-ctrl-attrib a { color: inherit; }
body.museum .map .maplibregl-ctrl-attrib-button { border-radius: 0; background-color: transparent; }
body.museum .map .maplibregl-ctrl button { border-radius: 0; }
body.museum .map .maplibregl-ctrl button:focus { box-shadow: none; }
body.museum .map .maplibregl-ctrl button:focus-visible { outline: 1px dotted rgb(var(--ink)); outline-offset: -3px; }
body.museum .map .maplibregl-canvas:focus-visible { outline: 1px dotted rgb(var(--ink)); outline-offset: -4px; }

/* aged paper laid over the drawing: grain, a few foxing stains, browned edges */
body.museum .map .paper {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgb(120 82 40 / .3) 100%),
    radial-gradient(circle at 18% 72%, rgb(150 105 50 / .1), transparent 14%),
    radial-gradient(circle at 81% 22%, rgb(150 105 50 / .08), transparent 11%),
    radial-gradient(circle at 63% 86%, rgb(150 105 50 / .07), transparent 9%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the compass roses (in the oceans) and the title cartouche belong to the overview, and fade as you zoom in */
body.museum .rose { width: 9.5rem; pointer-events: none; transition: opacity .3s; }
body.museum .rose svg { display: block; width: 100%; height: auto; overflow: visible; }
body.museum .cartouche {
  position: absolute; left: 34px; bottom: 34px;
  display: grid; justify-items: center; gap: .1rem;
  padding: .7rem 1.1rem .65rem;
  background: rgb(242 231 204 / .94);
  box-shadow: 0 0 0 1px rgb(var(--ink)), 0 0 0 4px rgb(242 231 204 / .94), 0 0 0 5px rgb(var(--ink) / .7), 0 8px 18px -8px rgb(var(--ink) / .5);
  color: rgb(var(--ink));
  pointer-events: none;
  transition: opacity .4s;
}
body.museum .chart.near .cartouche { opacity: 0; }
@media (max-width: 40rem) {                       /* too small a chart for a title box; smaller roses */
  body.museum .cartouche { display: none; }
  body.museum .rose { width: 5.5rem; }
}
body.museum .cartouche .c-small { font: italic .8125rem/1.2 "IM Fell English", Georgia, serif; }
body.museum .cartouche .c-title { font: 1.3rem/1.2 "IM Fell English SC", Georgia, serif; letter-spacing: .06em; }
body.museum .cartouche .c-rule { width: 70%; height: 5px; margin: .1rem 0 .15rem;
  background: linear-gradient(rgb(var(--ink)) 0 0) center / 100% 1px no-repeat, radial-gradient(circle, rgb(var(--ink)) 2px, transparent 2.5px) center / 6px 6px no-repeat; }

/* the card a place opens, with the way to its essay */
body.museum .place-card .maplibregl-popup-content {
  display: grid; gap: .1rem;
  padding: .8rem 1.1rem .85rem; border-radius: 0;
  background: #f3e9d2;
  box-shadow: 0 0 0 1px #3a2d1f, 0 0 0 4px #f3e9d2, 0 0 0 5px rgb(58 45 31 / .6), 0 12px 24px -8px rgb(58 45 31 / .45);
  font: italic .9375rem/1.3 "IM Fell English", Georgia, serif; color: #5b4a36;
}
body.museum .place-card strong { font: 1.2rem/1.2 "IM Fell English SC", Georgia, serif; color: #3a2d1f; letter-spacing: .04em; }
body.museum .place-card a { margin-top: .45rem; color: #3a2d1f; text-decoration: underline; text-decoration-color: rgb(58 45 31 / .4); text-underline-offset: 3px; }
body.museum .place-card a:hover { color: #a8402a; text-decoration-color: currentColor; }
body.museum .place-card a { position: relative; }
body.museum .place-card a::after { content: ""; position: absolute; inset: -.6rem -1.1rem -.85rem; }   /* a finger-sized way in */
body.museum .place-card .maplibregl-popup-tip { display: none; }

/* under the map: the countries as a tidy list, each with how many places; the picked one's places on a shelf below,
   each name flying the map there and its arrow opening the essay */
body.museum .countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, calc(50% - .75rem)), 1fr)); gap: 0 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
body.museum .countries button {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; width: 100%;
  padding: .4rem .1rem .35rem; border: 0; border-bottom: 1px solid rgb(var(--ink) / .1); background: none;
  font: inherit; font-size: .875rem; line-height: 1.3rem; color: var(--rurikon-800); text-align: left; cursor: pointer;
  transition: color .15s, border-color .15s;
}
body.museum .countries .n { font: italic .8125rem/1 "Lora", Georgia, serif; color: var(--rurikon-400); }
body.museum .countries button[aria-expanded="true"] { color: #a8402a; border-bottom-color: rgb(168 64 42 / .55); }
@media (hover: hover) { body.museum .countries button:hover { color: #a8402a; border-bottom-color: rgb(168 64 42 / .55); } }
body.museum .countries button:focus-visible { outline: 1px dotted var(--rurikon-400); outline-offset: 2px; }
body.museum .country-places { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
body.museum .country-places li {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .15rem .1rem .55rem;
  border: 1px solid rgb(var(--ink) / .16); border-radius: 999px;
  font-size: .75rem; line-height: 1.1rem;
}
body.museum .country-places button { padding: 0; border: 0; background: none; font: inherit; color: var(--rurikon-800); cursor: pointer; }
body.museum .country-places button:hover { text-decoration: underline; text-decoration-color: var(--rurikon-300); text-underline-offset: 2px; }
body.museum .country-places button:focus-visible { outline: 1px dotted var(--rurikon-400); outline-offset: 2px; border-radius: 2px; }
body.museum .country-places a {
  display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: rgb(var(--ink) / .06); color: var(--rurikon-600); text-decoration: none; font-size: .6875rem;
}
body.museum .country-places a:hover { background: rgb(var(--ink) / .14); color: var(--rurikon-800); }
@media (pointer: coarse) {                         /* finger-sized: a country row ≈ 40px, a place chip ≈ 37px */
  body.museum .countries button { padding: .6rem .1rem .55rem; }
  body.museum .country-places { gap: .5rem; }
  body.museum .country-places li { padding: 0 .3rem 0 .75rem; font-size: .8125rem; }
  body.museum .country-places button { padding: .55rem 0; }
  body.museum .country-places a { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
}

/* a place's essay page */
body.museum .essay { max-width: 40rem; }
body.museum .essay .back { margin: 0 0 1.25rem; font-size: .8125rem; }
body.museum .essay .back a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; color: var(--rurikon-400); text-decoration: none; text-transform: lowercase; }
body.museum .essay .back a:hover { color: var(--rurikon-800); }
body.museum .essay h1 { margin-bottom: .25rem; }
body.museum .essay .where { margin-top: 0; color: var(--rurikon-400); font-size: .875rem; }
body.museum .essay .soon { font-family: "Lora", Georgia, serif; font-style: italic; color: var(--rurikon-300); }

/* painted underlines: a title or name sits on a brushstroke cut from a painting (--art, at --at);
   on hover a link's paint rises behind it */
body.museum { --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M6 13 C70 6 160 9 250 8 C320 7 370 10 394 15 C396 22 392 28 380 30 C300 33 200 31 120 33 C70 34 30 33 8 30 C2 25 2 18 6 13 Z'/%3E%3C/svg%3E"); }
body.museum .essays .t, body.museum .projects .name { position: relative; isolation: isolate; padding-bottom: .62em; }
body.museum .essays .t::after, body.museum .projects .name::after {
  content: ""; position: absolute; z-index: -1; left: -.4em; right: -1.4em; bottom: -.05em; height: .85em;
  background: var(--art) var(--at) / 100% 450% no-repeat;          /* a band of the painting, dragged thin like wet paint */
  -webkit-mask: var(--brush) 0 0 / 100% 100% no-repeat; mask: var(--brush) 0 0 / 100% 100% no-repeat;
  transition: height .45s ease, opacity .45s ease;
}
body.museum .essays a:focus-visible .t::after, body.museum .essays a:active .t::after,
body.museum .projects a.name:focus-visible::after, body.museum .projects a.name:active::after { height: calc(100% + .3em); opacity: .45; }
@media (hover: hover) {                           /* on touch screens a tap would leave it raised */
  body.museum .essays a:hover .t::after, body.museum .projects a.name:hover::after { height: calc(100% + .3em); opacity: .45; }
}

/* thoughts: the essays */
body.museum .essays { display: grid; gap: .2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
body.museum .essays a { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; font-size: 1.125rem; color: var(--rurikon-800); text-decoration: none; }
body.museum .essays a:focus-visible { outline: 1px dotted var(--rurikon-400); outline-offset: 3px; }
body.museum .essays .no { min-width: 2.1rem; font: italic 1.1875rem/1 "Lora", Georgia, serif; color: var(--rurikon-400); }
body.museum .essays .soon { font-size: .75rem; color: var(--rurikon-300); white-space: nowrap; }
body.museum .essays .soon::after { content: " →"; }
body.museum .essays .t { text-wrap: balance; }
@media (max-width: 39.99rem) { body.museum .essays .soon { margin-left: auto; } }

/* projects: one line each, the name on its stroke of paint and a few words on what it is */
body.museum .projects { display: grid; gap: .35rem; margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: 44rem; }
body.museum .projects li { display: grid; gap: .15rem 1.75rem; align-items: baseline; padding: .4rem 0; }
body.museum .projects .name { justify-self: start; color: var(--rurikon-800); text-decoration: none; }
body.museum .projects .what { color: var(--rurikon-400); }
body.museum .projects a.name + .what::after { content: " →"; color: var(--rurikon-300); }
body.museum .projects a.name[target="_blank"] + .what::after { content: " ↗"; }

/* a project's own page: short sections, its points as a plain list, figures hung like prints */
body.museum .project h2 { margin-top: 2.25rem; }
body.museum .project h2 + p, body.museum .project h2 + .points { margin-top: .5rem; }
body.museum .points { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
body.museum .points li { padding-left: 1.1rem; position: relative; }
body.museum .points li::first-letter { text-transform: lowercase; }
body.museum .points li::before { content: "·"; position: absolute; left: .2rem; color: var(--rurikon-400); }
body.museum .points strong { font-weight: 600; color: var(--rurikon-800); }
body.museum .plate { margin: 1.75rem 0 0; }
body.museum .plate img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 1px 2px rgb(var(--ink) / .08), 0 6px 12px -4px rgb(var(--ink) / .1), 0 18px 32px -16px rgb(var(--ink) / .26);
}
body.museum .plate figcaption { margin-top: .6rem; font-size: .8125rem; line-height: 1.35rem; color: var(--rurikon-400); }

/* art: the works in a grid, each hung like a small framed print */
body.museum .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2rem; }
body.museum .gallery:empty { display: none; }
body.museum .gallery figure { margin: 0; }
body.museum .gallery img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 0 0 1px rgb(var(--ink) / .08), 0 1px 2px rgb(var(--ink) / .08), 0 6px 12px -4px rgb(var(--ink) / .1), 0 18px 32px -16px rgb(var(--ink) / .26);
}
body.museum .gallery figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--rurikon-400); }
body.museum .gallery ~ .soon { margin-top: 0; font-family: "Lora", Georgia, serif; font-style: italic; color: var(--rurikon-300); }

@media (max-width: 39.99rem) {
  body.museum article, body.museum .about { font-size: .9375rem; line-height: 1.625rem; }
}

@media (min-width: 64rem) {                       /* about: the photograph beside the text */
  body.museum .about { grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem; align-items: start; }
}

/* no chart (no WebGL, or the map service is down): a note on the blank paper; the list below still works */
body.museum .chart.blank .map { position: relative; }
body.museum .chart.blank .map::after {
  content: "the chart can\2019t be drawn here just now. The places are listed below.";
  position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center;
  font: italic 1.0625rem/1.4 "IM Fell English", Georgia, serif; color: rgb(var(--ink) / .75);
}
body.museum .chart.blank .rose,
body.museum .chart.blank .maplibregl-control-container { display: none; }

/* sm ≥40rem */
@media (min-width: 40rem) {
  body.museum .essays li { justify-self: start; }        /* the link (and its hover) only as wide as the title */
  body.museum .essays .t::after { right: -.7em; }
  body.museum .work { margin-bottom: 2.5rem; }
  body.museum .projects li { grid-template-columns: 12rem minmax(0, 1fr); }
  body.museum .work .canvas { aspect-ratio: 16 / 5; }
  body.museum .map { aspect-ratio: 4 / 3; }
}

/* md ≥48rem: a slightly taller strip as the column gets wide, so the subject still fits;
   on about, the photograph moves to the right of the text */
@media (min-width: 48rem) {
  body.museum .work { margin-bottom: 3rem; }
  body.museum .work .canvas { aspect-ratio: 7 / 2; }
  body.museum .map { aspect-ratio: 16 / 10; }
}