/* About / Vessels. Selected September 16, 2026, from previews/about-entrance/e-vessels.html.

   Two rounded vertical vessels stand side by side on the paper ground, the
   archive on the Vial Cap field and the maker on the olive About field, and
   each carries one word at the same size and nothing else. Entering a vessel
   widens it until it holds the page while the other withdraws to a rounded
   rail that keeps its word turned to the edge, so the choice is never spent.
   The word does not shrink into a header when it arrives; it travels to the
   top left corner, grows to display size, and the reading hangs beneath it.

   The surface is built so that the only per-frame work is a flex share and a
   handful of transforms. Each reading is laid out once, at the width it will
   have when its vessel is open, so widening the vessel never re-wraps a line;
   every pointer response is a transform on a fixed-size layer rather than a
   repainted gradient; and no animated value is written as a custom property on
   the vessel, because an inherited property invalidates the style of
   everything beneath it. Scoped to the pathname-selected room; tokens from
   theme.css. Nothing inherits from the route container. */
#sec-about{
 --about-frame:clamp(16px,1.5vw,24px);
 /* One frame separates the vessels from the header and the viewport edges. */
 --about-head:calc(var(--archive-masthead-band,60px) + var(--about-frame));
 --about-gap:clamp(10px,1.1vw,18px);
 --about-r:clamp(20px,2.3vw,38px);
 --about-dp:clamp(24px,3.4vw,48px);
 --about-rail:clamp(74px,7vw,102px);
 --about-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --about-ease:cubic-bezier(.22,1,.36,1);
 --about-fast:200ms;--about-base:360ms;
 font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.012em;line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
#sec-about :is(h2,h3,p,dl,dd,dt,figure,ul,ol,hr){margin:0;font-family:inherit;text-wrap:wrap;font-variant-numeric:normal}
#sec-about :is(h2,h3){font-weight:300;letter-spacing:-.04em;line-height:.94;text-wrap:balance}
#sec-about :is(a,button){font:inherit;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
#sec-about button{background:none;border:0;padding:0;cursor:pointer}
#sec-about svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#sec-about :is(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.about-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.chapter-reading[data-chapter='about'] .chapter-reader-bar{display:none}

/* ---------- the row the vessels stand in ---------- */
/* The shell has already set the room in from its rail, so the left needs only
   the frame. The section register is drawn over the content instead of beside
   it, which is why the right adds the register's own width and nothing else. */
#sec-about .about-doors{position:relative;display:flex;gap:var(--about-gap);height:100svh;margin:0;isolation:isolate;
 padding:var(--about-head) calc(var(--about-frame) + var(--mhc-section-register-width,0px) + 8px) var(--about-frame) var(--about-frame)}
/* The unified capsule replaces the margin register. Keep its retired column
   only for the unenhanced navigation; the current room has equal side insets.
   A bottom dock occupies a separate band below both vessels. */
html.mhc-wayfinding-ready #sec-about .about-doors{
 padding:var(--about-head) var(--about-frame) calc(var(--about-frame) + var(--mhc-rail-bottom-clearance,0px))}
#sec-about[data-about-layout=stack] .about-doors{flex-direction:column}

/* A's entrance only: carry the existing vessels in as intact objects.
   The settled layout, fields, type and reading behavior stay authored above.
   Holding at frame zero lets the chapter shell finish behind its curtain. */
html.about-arriving:has(#sec-about.about-tile-entry)::before{content:none}
#sec-about.about-entering .about-doors{overflow:clip}
#sec-about.about-entering .about-door{
 animation:about-tile-left 860ms cubic-bezier(.16,1,.3,1) both;
 will-change:transform,opacity;
}
#sec-about.about-entering .about-door--me{animation-name:about-tile-right;animation-delay:90ms}
#sec-about.about-entry-held .about-door{animation-play-state:paused}
@keyframes about-tile-left{
 from{transform:translate3d(-110vw,-28px,0) rotate(-5deg);opacity:.9}
 to{transform:none;opacity:1}
}
@keyframes about-tile-right{
 from{transform:translate3d(110vw,44px,0) rotate(5deg);opacity:.9}
 to{transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
 #sec-about.about-entering .about-door{animation:none;will-change:auto}
}
@media print{
 #sec-about.about-entering .about-doors{overflow:visible}
 #sec-about.about-entering .about-door{animation:none;will-change:auto}
}

/* ---------- the two fields, and what each theme does to them --------------
   On paper the vessels are the archive's own two colors at their published
   values, the Vial Cap field taking the fixed dark on-accent ink and the olive
   About field taking white, and both of them are light enough that the room
   reads as two colored plates on white.

   Against the dark theme's black those same two values are lamps rather than
   plates, so the dark theme takes each field down by one constant step of .18
   in OKLCH lightness, holds its hue exactly, and leaves it whatever chroma the
   sRGB gamut still offers at that lightness. Orange loses chroma on the way
   down because there is no deep saturated orange to be had, from .191 to .148,
   while the olive keeps all of its .078; neither is desaturated toward neutral
   to reach a number, which is the one move that would cost the archive its
   identity. The step is the same for both so the pair keeps its relation,
   and it is .18 because that is what holds the archive vessel's reading
   contrast across the change: 5.96:1 with dark ink on paper against 6.05:1
   with light ink in the dark. The maker vessel takes the same step and rises
   from 4.61:1 to 9.16:1, which costs nothing and is not corrected for.

     archive  #f26419  L .674 C .191 H 42.9  ->  #a33c00  L .494 C .148 H 42.9
     maker    #707a43  L .558 C .078 H 117.4 ->  #3f470d  L .378 C .078 H 117.4

   Both inks reverse with the field, from the dark poles to the shared light
   on-chroma ink. Each of the five fractions below is then the one that puts the
   same luminance ratio on the deepened field that its paper value puts on the
   published one, so a hairline, a hover wash, a lattice and a sheen all carry
   the presence they were composed with rather than a presence the ground gave
   them. Every value here was derived with the conversions in
   tools/field-ceilings.mjs, and every ratio quoted is measured on the
   composited result. */
#sec-about{
 --about-archive-field:var(--mhc-accent,#f26419);
 --about-archive-ink:var(--mhc-on-accent,#10110f);
 --about-archive-edge:26%;--about-archive-soft:14%;--about-archive-lift:8%;
 --about-archive-mark:.15;--about-archive-sheen:34%;
 --about-maker-field:var(--mhc-chapter-about-field,#707a43);
 --about-maker-ink:var(--mhc-on-about,#fff);
 --about-maker-edge:32%;--about-maker-soft:17%;--about-maker-lift:10%;
 --about-maker-mark:.13;--about-maker-sheen:46%;
}
/* Stated twice, and keyed the way theme.css keys it: data-theme is absent for
   every reader who never chose a theme, so an attribute selector on its own
   leaves the whole system-dark audience on the paper fields. Legacy is excluded
   from both, since it restores the archive as it stood and carries its own
   salmon accent. */
:root[data-theme="dark"] #sec-about{
 --about-archive-field:#a33c00;
 --about-archive-ink:var(--mhc-on-chroma-dark,#f6f6f3);
 --about-archive-edge:21%;--about-archive-soft:11%;--about-archive-lift:6%;
 --about-archive-mark:.12;--about-archive-sheen:16%;
 --about-maker-field:#3f470d;
 --about-maker-ink:var(--mhc-on-chroma-dark,#f6f6f3);
 --about-maker-edge:15%;--about-maker-soft:8%;--about-maker-lift:5%;
 --about-maker-mark:.06;--about-maker-sheen:21%;
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]):not([data-theme="legacy"]):not([data-theme="dark"]) #sec-about{
  --about-archive-field:#a33c00;
  --about-archive-ink:var(--mhc-on-chroma-dark,#f6f6f3);
  --about-archive-edge:21%;--about-archive-soft:11%;--about-archive-lift:6%;
  --about-archive-mark:.12;--about-archive-sheen:16%;
  --about-maker-field:#3f470d;
  --about-maker-ink:var(--mhc-on-chroma-dark,#f6f6f3);
  --about-maker-edge:15%;--about-maker-soft:8%;--about-maker-lift:5%;
  --about-maker-mark:.06;--about-maker-sheen:21%;
 }
}

/* ---------- a vessel ----------
   Every surface a vessel carries is its own ink laid over its own field at
   some fraction, so the two vessels differ by a field, an ink and five
   fractions, and a theme differs from the other theme by the same fourteen
   values. They are named on the section rather than written into the vessels
   so that a theme sets numbers instead of restating the material, which is
   what keeps a later per-vessel override from having to outrank a theme. */
#sec-about .about-door{position:relative;flex:1 1 0;min-width:var(--about-rail);min-height:0;
 border-radius:var(--about-r);overflow:hidden;contain:layout paint;
 background:var(--about-field);color:var(--about-ink);
 box-shadow:0 22px 48px -28px rgba(var(--mhc-shadow-rgb,16,17,15),.46)}
#sec-about[data-about-layout=stack] .about-door{min-height:var(--about-rail)}
#sec-about .about-door--archive{--about-field:var(--about-archive-field);--about-ink:var(--about-archive-ink);
 --about-ink-2:color-mix(in srgb,var(--about-ink) 85%,var(--about-field));
 --about-edge:color-mix(in srgb,var(--about-ink) var(--about-archive-edge),transparent);
 --about-edge-soft:color-mix(in srgb,var(--about-ink) var(--about-archive-soft),transparent);
 --about-lift:color-mix(in srgb,var(--about-ink) var(--about-archive-lift),transparent);
 --about-mark:var(--about-ink);--about-mark-a:var(--about-archive-mark);
 --about-sheen:color-mix(in srgb,#fff var(--about-archive-sheen),transparent)}
/* Olive holds its ink at 4.61:1 on paper, so this vessel takes no tinted
   secondary ink; its quieter voices are made with size and weight instead.
   The deepened field the dark theme gives it has the headroom for one, and it
   still does not take it, because the way this vessel speaks quietly is a
   property of the vessel rather than of the ground it is standing on. */
#sec-about .about-door--me{--about-field:var(--about-maker-field);--about-ink:var(--about-maker-ink);--about-ink-2:var(--about-ink);
 --about-edge:color-mix(in srgb,var(--about-ink) var(--about-maker-edge),transparent);
 --about-edge-soft:color-mix(in srgb,var(--about-ink) var(--about-maker-soft),transparent);
 --about-lift:color-mix(in srgb,var(--about-ink) var(--about-maker-lift),transparent);
 --about-mark:var(--about-ink);--about-mark-a:var(--about-maker-mark);
 --about-sheen:color-mix(in srgb,#fff var(--about-maker-sheen),transparent)}
#sec-about .about-door ::selection{background:var(--about-ink);color:var(--about-field)}

#sec-about .about-veil{position:absolute;inset:0;z-index:6;pointer-events:none;background:#101110;opacity:0;will-change:opacity}
#sec-about .about-foot{position:absolute;left:0;right:0;bottom:0;height:104px;z-index:9;pointer-events:none;opacity:0;
 will-change:opacity;background:linear-gradient(to top,var(--about-field) 26%,transparent)}
/* one fixed-size sheen, translated rather than repainted */
#sec-about .about-sheen{position:absolute;left:0;top:0;width:780px;height:780px;margin:-390px 0 0 -390px;z-index:1;
 pointer-events:none;opacity:0;will-change:transform,opacity;
 background:radial-gradient(circle at 50% 50%,var(--about-sheen),transparent 66%)}

/* ---------- the material: one field of marks, in each vessel's own ink ----
   It is texture and not a reading, since no quantity can be taken off a
   uniform lattice; every real figure reaches the reader through the prose. */
#sec-about .about-stuff{position:absolute;z-index:2;inset:0;pointer-events:none;will-change:opacity}
#sec-about .about-lattice{position:absolute;left:0;right:0;top:0;height:74%;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 82%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 82%)}
#sec-about .about-lattice i{position:absolute;inset:-7% -5%;display:block;will-change:transform;opacity:var(--about-mark-a);
 background-image:radial-gradient(circle at 50% 50%,var(--about-mark) 1.45px,transparent 1.6px);
 background-size:15px 15px}

/* ---------- the face: the word, and nothing else ---------- */
#sec-about .about-face{position:absolute;inset:0;z-index:7;display:block;width:100%;border-radius:inherit}
#sec-about .about-door[data-about-open] .about-face{pointer-events:none;cursor:default}
#sec-about .about-face:focus-visible{outline:2px solid var(--about-ink);outline-offset:-8px;border-radius:inherit}
#sec-about .about-crown{position:absolute;z-index:10;inset:0;pointer-events:none;will-change:transform}
#sec-about .about-word{position:absolute;left:var(--about-dp);top:0;margin:0;white-space:nowrap;
 font-size:var(--about-word,64px);line-height:.9;font-weight:300;letter-spacing:-.052em;
 transform-origin:0 0;will-change:transform,opacity}
/* The expanded identity shares the entrance word's measured motion. */
#sec-about .about-word-rest{display:none}
#sec-about .about-word-expanded{display:block}
#sec-about.about-ready .about-word-rest{display:block}
#sec-about.about-ready .about-word-expanded{position:absolute;left:0;top:0;width:max-content;opacity:0}
#sec-about:not(.about-ready) .about-word--name{font-size:clamp(34px,7vw,76px)}
#sec-about .about-spine{position:absolute;z-index:5;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;will-change:opacity}
#sec-about .about-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(15px,1.5vw,21px);
 letter-spacing:-.01em;line-height:1;white-space:nowrap}
#sec-about .about-swap{position:absolute;z-index:5;left:50%;bottom:calc(var(--about-dp) * .7);translate:-50% 0;
 width:30px;height:30px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--about-edge);
 opacity:0;will-change:opacity;transition:background var(--about-fast) var(--about-ease)}
#sec-about .about-swap svg{width:15px;height:15px}
#sec-about .about-door[data-about-mini]:hover .about-swap{background:var(--about-lift)}
#sec-about[data-about-layout=stack] .about-spine span{writing-mode:horizontal-tb;transform:none}
#sec-about[data-about-layout=stack] .about-swap{left:auto;right:calc(var(--about-dp) * .7);bottom:50%;translate:0 50%}

/* ---------- the reading ----------
   Laid out once at load, at the width the vessel will have when it is open, so
   the widening never re-wraps a line. Hidden rather than removed, which pays
   the layout at load instead of on the first frame of the transition. */
#sec-about .about-body{position:absolute;z-index:3;left:0;top:0;bottom:0;width:var(--about-open-w,100%);
 overflow-y:auto;overscroll-behavior-y:auto;contain:layout paint style;
 scrollbar-width:thin;scrollbar-color:var(--about-edge) transparent;
 padding:var(--about-crown,220px) var(--about-dp) clamp(70px,12vh,130px);
 visibility:hidden;opacity:0;transition:opacity 300ms var(--about-ease)}
#sec-about .about-door[data-about-open] .about-body{visibility:visible}
#sec-about .about-door[data-about-lit] .about-body{opacity:1}
#sec-about .about-sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2.2vw,38px);align-content:start;max-width:1320px}
#sec-about .about-sheet>*{grid-column:1/-1;min-width:0}
#sec-about .about-body h3{font-size:clamp(27px,2.6vw,34px);line-height:1.12;font-weight:600;letter-spacing:-.035em;max-width:13ch}
#sec-about .about-body h4{font-size:clamp(21px,1.75vw,27px);line-height:1.16;font-weight:500;letter-spacing:-.025em;margin:0}
/* The light entrance names, medium decks, bold headings and regular reading
   use the four actual Helvetica faces. Italic carries selective emphasis. */
#sec-about .about-body p{font-size:17px;line-height:1.65;font-weight:400;letter-spacing:-.005em;max-width:65ch;text-wrap:pretty}
#sec-about .about-body strong{font-weight:600}
#sec-about .about-body em{font-style:italic;font-weight:400}
#sec-about .about-body [id]{scroll-margin-top:28px}
#sec-about .about-rule{grid-column:1/-1;height:1px;border:0;background:var(--about-edge-soft)}
#sec-about .about-crown-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;padding-top:clamp(24px,3.2vh,40px)}
#sec-about .about-body .about-deck{grid-column:4/12;font-size:clamp(27px,2.6vw,34px);line-height:1.24;letter-spacing:-.025em;
 font-weight:300;max-width:36ch;color:var(--about-ink)}
#sec-about .about-deck strong{font-weight:500}
#sec-about .about-opening{grid-column:4/11;padding-top:clamp(34px,6vh,76px)}
#sec-about .about-opening p+p{margin-top:1.15em}
/* Nested opening prose starts level with its section heading. */
#sec-about .about-say>.about-opening{padding-top:0}
#sec-about .about-say>.about-opening p{font-size:21px;line-height:1.5;letter-spacing:-.02em;max-width:56ch}
#sec-about .about-say>.about-opening p+p{font-size:17px;line-height:1.65;letter-spacing:-.005em;max-width:65ch}

/* a movement: the heading holds the left columns while its prose runs beside it */
#sec-about .about-move{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding-top:clamp(52px,9vh,116px);align-items:start}
#sec-about .about-move>.about-hold{grid-column:1/4;align-self:stretch}
#sec-about .about-move>.about-hold>div{position:sticky;top:12px}
#sec-about .about-hold p{margin-top:14px;font-size:15px;line-height:1.5;max-width:24ch;color:var(--about-ink-2)}
#sec-about .about-move>.about-say{grid-column:4/11;min-width:0}
#sec-about .about-move>.about-say p+p{margin-top:1.15em}
#sec-about .about-move--wide>.about-say{grid-column:4/13}
#sec-about .about-say-more p+p{margin-top:1.15em}
#sec-about .about-opening+.about-say-more{margin-top:1.15em}
#sec-about .about-say-after{padding-top:clamp(26px,3.6vh,46px)}
#sec-about .about-move a,#sec-about .about-opening a,#sec-about .about-say-more a,#sec-about .about-cell a{text-decoration:underline;text-underline-offset:3px}
#sec-about .about-plan a,#sec-about .about-disclosure a{text-decoration:none}

/* ---------- the plan: nine rooms, drawn rather than tabulated ----------
   The first build of this made four equal columns of text per row, which is a
   table, and a table says that a room and the question it puts and the number
   it holds are three facts of one rank. They are not. So each row is now a
   small composition on the archive's own display scale: the number carried at
   headline size in the light weight the covers use, the room beside it, the
   question set under the room in the secondary ink, and the quantity held out
   to the right in mono. Nine rows, no two of them the same length, and the
   only rule between them is a hairline.

   The two groups are told apart by their numerals and not by their captions.
   Numbered rooms are a sequence, so 00 to 05 stand at full strength on a
   continuous left edge; the companions are lateral, so A, B and C are set in
   the secondary ink with no edge at all, and the reader sees the difference
   before reading the label that names it. */
#sec-about .about-plan{padding-top:clamp(44px,7vh,92px)}
#sec-about .about-plan-lede{margin-top:14px!important;max-width:48ch!important;color:var(--about-ink-2)}
#sec-about .about-plan-cap{font:500 10px/1.5 var(--about-mono);font-size:10px!important;letter-spacing:.1em;
 text-transform:uppercase;color:var(--about-ink-2);margin-top:clamp(30px,4vh,50px)}
#sec-about .about-plan-list{list-style:none;margin-top:14px;padding:0}
/* Both groups are inset by the same amount so their numerals stand in one
   column; only the numbered run gets a visible edge to stand on. */
#sec-about .about-plan-list{border-left:1px solid transparent}
#sec-about .about-plan-list--rooms{border-left-color:var(--about-edge)}
#sec-about .about-plan-list>li:first-child .about-plan-row{border-top:1px solid var(--about-edge-soft)}

#sec-about .about-plan-row{position:relative;display:grid;
 grid-template-columns:clamp(54px,4.6vw,74px) minmax(0,1fr) auto clamp(18px,1.6vw,26px);
 column-gap:clamp(14px,2vw,32px);row-gap:6px;align-items:baseline;
 padding:clamp(17px,1.9vh,24px) 0 clamp(18px,2vh,26px);
 border-bottom:1px solid var(--about-edge-soft);
 transition:background var(--about-base) var(--about-ease)}
#sec-about .about-plan-row{padding-left:clamp(14px,1.5vw,22px)}
#sec-about a.about-plan-row:hover{background:var(--about-lift)}
/* The numbered rooms are a run, so the pointer lights the edge they already
   stand on rather than drawing a new mark beside the row. */
#sec-about .about-plan-list--rooms a.about-plan-row::before{content:'';position:absolute;
 left:-1px;top:-1px;bottom:0;width:1px;background:var(--about-ink);
 transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--about-base) var(--about-ease)}
#sec-about .about-plan-list--rooms a.about-plan-row:is(:hover,:focus-visible)::before{transform:scaleY(1)}

#sec-about .about-plan-no{grid-column:1;grid-row:1;align-self:baseline;
 font-size:clamp(27px,2.5vw,34px);line-height:1;font-weight:300;letter-spacing:-.04em;
 font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
#sec-about .about-plan-list--letters .about-plan-no{color:var(--about-ink-2)}
#sec-about .about-plan-name{grid-column:2;grid-row:1;
 font-size:clamp(21px,1.7vw,27px);line-height:1.18;letter-spacing:-.025em;font-weight:500;
 transition:transform var(--about-base) var(--about-ease)}
#sec-about .about-plan-ask{grid-column:2;grid-row:2;font-size:15px;line-height:1.5;
 max-width:44ch;text-wrap:pretty;color:var(--about-ink-2)}
#sec-about .about-plan-fig{grid-column:3;grid-row:1;align-self:baseline;
 font:500 11px/1.4 var(--about-mono);letter-spacing:.02em;text-transform:uppercase;
 font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--about-ink-2)}
/* The arrow closes the figure beside it, so it sits on that figure's line rather than in the middle of a
   row whose height the chapter name sets: its foot rests on the shared baseline, and the offset lowers its
   centre onto the midline of the figure's capitals, or of the name's lowercase where the figure wraps below. */
#sec-about .about-plan-arrow{grid-column:4;grid-row:1;align-self:baseline;position:relative;top:4px;width:16px;height:16px;opacity:.65;
 transition:opacity var(--about-base) var(--about-ease),transform var(--about-base) var(--about-ease)}
#sec-about a.about-plan-row:is(:hover,:focus-visible) .about-plan-name{transform:translateX(5px)}
#sec-about a.about-plan-row:is(:hover,:focus-visible) .about-plan-arrow{opacity:1;transform:translateX(3px)}
/* The room the reader is standing in keeps its wash rather than waiting for a
   pointer, because it is a position and not an invitation. */
#sec-about .about-plan-row--here{background:var(--about-lift)}
#sec-about .about-plan-row--here .about-plan-fig{color:var(--about-ink)}

/* ---------- the disclosure ----------
   It was a bordered, rounded, tinted panel, which is the shape every interface
   reaches for when it wants a box, and it looked like one. It is now the
   vessel's two colors exchanged: the ink becomes the ground and the field
   becomes the type, which is the one move this room can make that no other
   surface in the archive makes, and it is made out of material the sheet
   already documents rather than out of a new one. Nothing is added, nothing is
   blurred, and the block carries no shadow, so it reads as a seal set into the
   page rather than as a card floating over it.

   Its inks are stated fresh because the ground under them is no longer the
   field. The secondary voice is the field lifted toward the ink, which is the
   same construction the vessel uses in the other direction. */
#sec-about .about-disclosure{margin-top:clamp(40px,6vh,80px);
 --about-ink-2:color-mix(in srgb,var(--about-field) 86%,var(--about-ink));
 background:var(--about-ink);color:var(--about-field);
 padding:clamp(24px,2.6vw,44px) clamp(22px,2.4vw,40px) clamp(10px,1.4vw,20px);
 border-radius:clamp(6px,.7vw,12px)}
#sec-about .about-disclosure ::selection{background:var(--about-field);color:var(--about-ink)}
#sec-about .about-disclosure-tag{font:500 10px/1.5 var(--about-mono);font-size:10px!important;letter-spacing:.1em;
 text-transform:uppercase;color:var(--about-ink-2)}
#sec-about .about-disclosure h4{margin-top:clamp(12px,1.4vh,18px);font-weight:600;letter-spacing:-.025em}
#sec-about .about-disclosure-lede{margin-top:10px!important;max-width:42ch!important;color:var(--about-ink-2)}
#sec-about .about-disclosure-list{margin-top:clamp(24px,3vh,38px)}
#sec-about .about-disclosure-list>div{display:grid;grid-template-columns:minmax(84px,.2fr) minmax(0,1fr);
 gap:clamp(12px,2vw,32px);padding:clamp(15px,1.7vh,21px) 0;align-items:baseline;
 border-top:1px solid color-mix(in srgb,var(--about-field) 24%,transparent)}
#sec-about .about-disclosure-list dt{font:500 10px/1.5 var(--about-mono);letter-spacing:.1em;
 text-transform:uppercase;color:var(--about-ink-2)}
#sec-about .about-disclosure-list dd{font-size:15px;line-height:1.52;max-width:58ch;text-wrap:pretty}


/* the statement, given the width the reading does not take */
#sec-about .about-quote{grid-column:2/12;padding-top:clamp(64px,11vh,140px)}
#sec-about .about-quote p{font-size:clamp(27px,2.7vw,44px);line-height:1.24;letter-spacing:-.035em;font-weight:300;max-width:28ch}
#sec-about .about-quote em{font-style:italic;font-weight:500}

/* the boundaries: wide rows, each a heading beside its qualification */
#sec-about .about-limits{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding-top:clamp(52px,9vh,116px);align-items:start}
#sec-about .about-limits>.about-hold{grid-column:1/4;align-self:stretch}
#sec-about .about-limits>.about-hold>div{position:sticky;top:12px}
#sec-about .about-limits>.about-hold p{margin-top:14px;max-width:24ch}
#sec-about .about-cells{grid-column:4/13;display:grid;gap:10px}
#sec-about .about-cell{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.7fr);gap:clamp(14px,2.4vw,44px);align-items:start;
 padding:clamp(18px,1.7vw,26px);border-radius:clamp(13px,1.3vw,20px);border:1px solid var(--about-edge-soft);
 transition:background var(--about-base) var(--about-ease),border-color var(--about-base) var(--about-ease)}
#sec-about .about-cell:hover{background:var(--about-lift);border-color:var(--about-edge)}
/* What it is not, recomposed. The movement above it now carries two framed
   surfaces, and three more would make the reading a stack of plates; a limit
   also belongs inside the argument rather than held out from it, so these
   three are separated by a rule and nothing else. */
#sec-about .about-limits--plain .about-cells{gap:0;border-top:1px solid var(--about-edge-soft)}
#sec-about .about-limits--plain .about-cell{border:0;border-radius:0;background:none;
 border-bottom:1px solid var(--about-edge-soft);padding:clamp(18px,2vw,26px) 0}
#sec-about .about-limits--plain .about-cell:hover{background:none;border-color:var(--about-edge-soft)}
#sec-about .about-cell h4{max-width:11ch}
#sec-about .about-cell p{color:var(--about-ink-2)}

/* The introduction and biography share a left edge. The portrait faces them
   from the right across both rows, without narrowing individual text lines. */
#sec-about .about-maker-intro{display:grid;grid-template-columns:subgrid;grid-template-rows:auto 1fr;
 row-gap:clamp(28px,4vh,44px);align-items:start;margin-top:clamp(28px,4vh,48px)}
#sec-about .about-maker-intro .about-deck{grid-column:1/8;grid-row:1;max-width:29ch}
#sec-about .about-maker-intro .about-portrait{grid-column:9/13;grid-row:1/3;margin:0;width:100%;max-width:360px;
 justify-self:end;position:sticky;top:24px;background:none;border:0;border-radius:0;box-shadow:none}
#sec-about .about-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
#sec-about .about-portrait-stage{position:relative;isolation:isolate}
#sec-about .about-portrait-stage[data-depth-ready]{touch-action:pan-y;cursor:grab}
#sec-about .about-portrait-stage[data-depth-dragging]{cursor:grabbing}
#sec-about .about-portrait-stage img{transform-origin:50% 54%;user-select:none;-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){
 #sec-about .about-portrait-stage img{transform:none!important}
}
@media print{
 #sec-about .about-portrait-stage img{transform:none!important}
}
#sec-about .about-maker-intro .about-opening--me{grid-column:1/8;grid-row:2;padding:0;min-width:0}

/* where, and how to reach */
#sec-about .about-stops{border-top:1px solid var(--about-edge-soft);max-width:660px}
#sec-about .about-stops div{display:grid;grid-template-columns:minmax(96px,.36fr) 1fr;gap:16px;align-items:baseline;
 padding:16px 0;border-bottom:1px solid var(--about-edge-soft)}
#sec-about .about-stops dt{font-size:13px;font-weight:500;letter-spacing:0}
#sec-about .about-stops dd{font-size:clamp(21px,2.2vw,27px);line-height:1.2;letter-spacing:-.025em;font-weight:400}
#sec-about .about-contact-intro{padding-bottom:22px}
#sec-about .about-contact-intro .about-invitation{font-size:21px;line-height:1.45;letter-spacing:-.02em;max-width:46ch}
#sec-about .about-contact-intro p+p{margin-top:18px;max-width:58ch}
#sec-about .about-rows{border-top:1px solid var(--about-edge-soft)}
/* Contact rows use the shared link affordance. */
#sec-about .about-rows a{margin:0;display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,52px);
 align-items:center;padding:20px 20px 20px 0;border-bottom:1px solid var(--about-edge-soft);border-radius:2px}
#sec-about .about-rows a>span{display:contents}
#sec-about .about-rows b{display:block;font-size:clamp(21px,2.1vw,27px);line-height:1.15;letter-spacing:-.025em;font-weight:500;
 transition:transform var(--about-base) var(--about-ease)}
#sec-about .about-rows small{display:block;font-size:15px;line-height:1.5;max-width:44ch;color:var(--about-ink-2);
 transition:transform var(--about-base) var(--about-ease)}
#sec-about .about-rows a:is(:hover,:focus-visible) b{transform:translateX(10px)}
#sec-about .about-rows a:is(:hover,:focus-visible) small,#sec-about .about-rows a:hover svg{transform:translateX(6px)}
#sec-about .about-rows svg{width:21px;height:21px;transition:transform var(--about-base) var(--about-ease)}
#sec-about .about-closing{grid-column:1/9;padding-top:clamp(52px,9vh,116px)}
#sec-about .about-text-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;letter-spacing:-.01em;width:fit-content}
#sec-about .about-u{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size var(--about-base) var(--about-ease)}
#sec-about a:hover .about-u,#sec-about a:focus-visible .about-u{background-size:100% 1px}
/* The route container styles the bare `footer` element: --paper-deep for a
   background and 56px/64px of padding, written for a plate standing on white
   paper. Inside a vessel that lays a pale wash over the field and opens a
   64px void under the last line, and neither is visible in the source of this
   room, which is why it read as a fault in the vessel rather than as an
   inherited rule. Both are stated back here rather than left to specificity. */
#sec-about .about-credit{grid-column:1/-1;margin-top:clamp(44px,7vh,88px);
 background:none;padding:16px 0 0;border:0;border-top:1px solid var(--about-edge-soft);
 display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;font-size:12px;color:var(--about-ink-2)}
#sec-about .about-credit a{text-decoration:underline;text-underline-offset:3px}

/* ---------- narrower ---------- */
@media(max-width:1100px){
 #sec-about .about-opening,#sec-about .about-move>.about-say,#sec-about .about-cells{grid-column:4/13}
 #sec-about .about-quote{grid-column:1/-1}
 #sec-about .about-plan-row{grid-template-columns:54px minmax(0,1fr) 18px;column-gap:16px}
 #sec-about .about-plan-fig{grid-column:2;grid-row:3;text-align:left;margin-top:4px;white-space:normal}
 #sec-about .about-plan-arrow{grid-column:3;top:2.5px}
}
@media(max-width:899px){
 #sec-about .about-body .about-deck,#sec-about .about-opening,#sec-about .about-opening--me,#sec-about .about-portrait,
 #sec-about .about-crown-row>.about-hold,#sec-about .about-move>.about-hold,#sec-about .about-move>.about-say,
 #sec-about .about-limits>.about-hold,#sec-about .about-cells,#sec-about .about-closing{grid-column:1/-1}
 #sec-about .about-crown-row{gap:14px 0}
 #sec-about .about-move>.about-hold>div,#sec-about .about-limits>.about-hold>div{position:static}
 #sec-about .about-move>.about-say,#sec-about .about-cells{margin-top:22px}
 #sec-about .about-maker-intro .about-deck,#sec-about .about-maker-intro .about-opening--me{grid-column:1/9}
 #sec-about .about-body h3{max-width:20ch}
 #sec-about .about-cell{grid-template-columns:1fr;gap:14px}
 #sec-about .about-rows a{grid-template-columns:1fr auto;gap:16px}
 #sec-about .about-rows a>span{display:block}
 #sec-about .about-rows small{margin-top:6px}
 /* On a phone the quantity leaves the first line, because a name and a figure
    competing for one narrow line is what forces a room's title to wrap. */
 #sec-about .about-plan-row{grid-template-columns:32px minmax(0,1fr) 16px;column-gap:12px;padding-left:12px}
 #sec-about .about-plan-fig{grid-column:2;grid-row:3;text-align:left;margin-top:8px}
 #sec-about .about-disclosure-list>div{grid-template-columns:1fr;gap:6px}
}
@media(max-width:700px){
 #sec-about .about-maker-intro .about-deck{grid-column:1/8;grid-row:1;font-size:27px;align-self:center}
 #sec-about .about-maker-intro .about-portrait{grid-column:8/13;grid-row:1;position:static;max-width:260px}
 #sec-about .about-maker-intro .about-opening--me{grid-column:1/-1;grid-row:2}
}
@media(max-width:560px){#sec-about{--about-dp:20px;--about-rail:64px}}
@media(max-width:560px){
 #sec-about .about-maker-intro{row-gap:28px}
 #sec-about .about-maker-intro .about-deck{grid-column:1/-1;max-width:24ch}
 #sec-about .about-maker-intro .about-portrait{grid-column:1/-1;grid-row:2;width:72%;max-width:260px;justify-self:center}
 #sec-about .about-maker-intro .about-opening--me{grid-row:3}
}

/* ---------- the floors below the motion ----------
   Without the controller every vessel reads in sequence, which is the contract
   the archive kept before this room had any motion at all. */
#sec-about:not(.about-ready) .about-doors{height:auto;flex-direction:column}
#sec-about:not(.about-ready) .about-door{flex:0 0 auto;min-width:0;min-height:0}
#sec-about:not(.about-ready) .about-body{position:static;width:auto;visibility:visible;opacity:1;overflow:visible;padding:24px 0 0}
#sec-about:not(.about-ready) .about-crown,#sec-about:not(.about-ready) .about-word{position:static}
#sec-about:not(.about-ready) .about-word{margin:var(--about-dp) 0 0 var(--about-dp);font-size:clamp(44px,7vw,76px);transform:none}
#sec-about:not(.about-ready) .about-door>*:not(.about-crown):not(.about-body){display:none}
#sec-about:not(.about-ready) .about-body{padding:0 var(--about-dp) var(--about-dp)}
@media(prefers-reduced-transparency:reduce){
 #sec-about .about-sheen{display:none}
}
@media(prefers-reduced-motion:reduce){
 #sec-about .about-body{scroll-behavior:auto}
 #sec-about .about-sheen{display:none}
 #sec-about :is(.about-plan-row,.about-plan-name,.about-plan-arrow,.about-rows b,.about-rows small,.about-rows svg){transition:none}
 #sec-about .about-plan-row::before{transition:none}
}
@media print{
 #sec-about .about-doors{height:auto;flex-direction:column}
 #sec-about .about-door{min-width:0;box-shadow:none;background:none!important;color:#000!important;break-inside:avoid}
 #sec-about .about-body{position:static;width:auto;visibility:visible;opacity:1!important;overflow:visible;padding:0}
 #sec-about .about-face,#sec-about .about-foot,#sec-about .about-stuff,#sec-about .about-spine,
 #sec-about .about-swap,#sec-about .about-veil,#sec-about .about-sheen{display:none!important}
 #sec-about .about-crown,#sec-about .about-word{position:static;transform:none!important}
 #sec-about .about-word{font-size:34px;margin-bottom:18px}
}

/* The phone reads both panels in flow even when the controller is active. */
@media(max-width:700px){
 #sec-about .about-crown{padding-bottom:20px}
 #sec-about .about-word.about-word--name{font-size:clamp(34px,8vw,58px)!important}
 #sec-about.about-ready .about-word-rest{display:none}
 #sec-about.about-ready .about-word-expanded{position:static;width:auto;opacity:1!important}
}
@media print{
 #sec-about .about-word-rest{display:none!important}
 #sec-about.about-ready .about-word-expanded{position:static;opacity:1!important}
}

/* Both readings close on the archive's centered statement and 56ch takeaway.
   The pager supplies the space below, as it does on every other chapter. */
#sec-about .about-epilogue{display:grid;place-items:center;gap:0;
 width:min(980px,calc(100% - 36px));margin:0 auto;padding:12vh 0 0;
 color:var(--mhc-ink);background:var(--mhc-ground);border:0;text-align:center}
#sec-about .about-epilogue-lead{width:100%;max-width:900px;margin-inline:auto;
 font-size:clamp(58px,7vw,100px);line-height:.88;
 font-weight:300;letter-spacing:-.04em;text-wrap:balance}
#sec-about .about-epilogue-lead em{font-style:normal;font-weight:500}
#sec-about .about-epilogue-reading{max-width:56ch;margin:28px auto 0;font-size:17px;line-height:1.55;text-wrap:pretty}