/* Opmet Osserpse: the look of a sheet of paper (Lareu Gonzalez), the calm of LoveFrom,
   the organization and motion of Porto Rocha. Every value lives in :root. */
/* Opmet Serif 1.004, the studio's own face: two variable fonts, weight 100 to 900 and optical size 8 to 72 (Text
   below 24, Display above). Every serif on the site, from the text to the titles (Black, 900) and the controls' italic */
@font-face{font-family:"Opmet Serif";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/opmet-serif/opmet-serif.woff2) format("woff2")}
@font-face{font-family:"Opmet Serif";font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/opmet-serif/opmet-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans/instrument-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans/instrument-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans/instrument-sans-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans/instrument-sans-latin-500-normal.woff2) format("woff2")}

:root{
  /* Off-white page, near-black ink, a slight grain. Contrast on --paper: ink 16.6:1, --graphite 5.8:1, --tag-gray 6.2:1. */
  --paper:#F7F6F2; --paper-deep:#EEEDE8; --ink:#161512; --graphite:#635E57; --tag-gray:#5E5A53;
  /* The grain: a 256px tile of neutral SVG noise (stitched, no seams), fixed and multiplied. 0 turns it off. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .2  1 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E"); --grain-size:256px; --grain-opacity:.22;
  /* Two faces: Opmet Serif and Instrument Sans (D, Oct. 13, 2026) */
  --serif:"Opmet Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  /* Two sizes. */
  --size-s:14px; --size-m:17px;
  --gutter:clamp(16px,3.2vw,40px); --measure:34rem;
  /* One motion value, as on Porto Rocha. */
  --t:.5s; --ease:ease;
  /* The home page's two longer motions: the stage slide and the Archive opening */
  --slide:.9s; --slide-ease:cubic-bezier(.65,0,.35,1); --open:.7s;
  /* The cover */
  --hand-h:clamp(120px,24vh,260px); --hand-w:calc(var(--hand-h) * .484); --lockup-gap:clamp(18px,2vw,32px);
  /* The stone coins (D, Oct. 15, 2026): a cover coin's diameter is 0.56 of the slot's height times this. The work list's
     coin is the same size (--coin-d, below); the header coins stay small */
  --coins-scale:1;
  /* One spacing scale, used everywhere on home */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --margin:clamp(20px,3.4vw,56px);
  /* The masthead (the Journal and the project pages): its type size and the room above it */
  --mh:clamp(48px,6.5vw,96px); --mast-top:clamp(40px,9vh,104px);
  /* The titles: Opmet Serif Black, the heaviest it has (D, Oct. 13, 2026) */
  --bold-font:var(--serif); --bold-weight:900;
  /* The name, Opmet Osserpse, in Opmet Serif Black, upright everywhere: the cover, the inner pages' header and the
     masthead. Only buttons are italic (D, Oct. 13) */
  --title-font:var(--serif); --title-weight:900;
  /* The exception (D, Oct. 15): the cover's name and the About text are Opmet Serif regular, not Black */
  --name-weight:400;
  /* The name beside the coin at the top of inner pages: Opmet Serif Bold, larger than it was, to read easily (D, Oct.
     15; it was Light, then hard to read at its size) */
  --header-name-weight:700; --header-name-size:clamp(20px,1.7vw,24px);
  --coin-d:calc(var(--hand-h) * .56 * var(--coins-scale));  /* the cover coin's diameter */
  /* Controls: one face and size for every list link, toggle and filter; pure black only for the chosen filter */
  --ctl-font:var(--serif); --ctl-size:clamp(17px,1.35vw,20px); --black:#000;
}
/* Phones: one margin, 20px, on both sides of every page (Oct. 14) */
@media (max-width:640px){:root{--gutter:20px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{background:var(--paper)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 var(--size-s)/1.55 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease)}
a:hover{color:var(--graphite)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
/* Controls: one system (build.py ctl(), site.js opmetCtl and opmetFilters). Every list link and toggle (See more, See
   less, Home, All work, All articles, the cover's options) and every filter (the Journal's topics, the foundry's row)
   is a .ctl: the serif italic at one size, in ink. Hover turns the word bold (700), in the one motion value (D, Oct. 15:
   it used to sweep with the cursor, wider toward its right); a hidden copy at 900 holds the width, so nothing moves. A filter is a .ctl.filter: tag gray, the
   chosen one pure black and bold. Every control is at least 44px square to touch: an invisible target around the word,
   so it takes no more room in its line and a short word (All) still lines up with the words around it. */
.ctl{position:relative;display:inline-grid;align-items:center;justify-items:center;padding:0;
  font:italic 400 var(--ctl-size)/1.4 var(--ctl-font);font-optical-sizing:auto;letter-spacing:.01em;color:var(--ink);background:none;border:0;border-radius:0;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ctl::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.ctl:hover,.pp .ctl:hover{color:var(--ink)}
.ctl-w,.ctl-v{grid-area:1/1;white-space:nowrap}
.ctl-w{visibility:hidden;font-weight:900}
.ctl-v{font-weight:400;transition:font-weight var(--t) var(--ease)}
@media (hover:hover) and (pointer:fine){.ctl:hover .ctl-v{font-weight:700}}
.ctl.filter{color:var(--tag-gray)}
.ctl.filter[aria-pressed="true"]{color:var(--black)}
.ctl.filter[aria-pressed="true"] .ctl-v{font-weight:700}
.filters{display:flex;flex-wrap:wrap;column-gap:var(--s3)}
/* Grain: above the type (multiply only darkens, so ink stays ink) and below images, which stay clean */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--grain) 0 0/var(--grain-size) var(--grain-size) repeat;mix-blend-mode:multiply;opacity:var(--grain-opacity)}
/* Ink: the hand and the name look stamped. Static SVG filters (see INK in build.py); <html data-ink> picks
   light, medium (default) or heavy. Browsers without filter support show plain ink. */
.ink-defs{position:absolute;width:0;height:0;overflow:hidden}
.ink{color:var(--ink)}
@supports (filter:url("#ink-medium")){
  .ink{filter:url("#ink-medium");mix-blend-mode:multiply}
  [data-ink="light"] .ink{filter:url("#ink-light")}
  [data-ink="heavy"] .ink{filter:url("#ink-heavy")}
}
::selection{background:rgba(22,21,18,.16)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--gutter);top:8px;background:var(--paper);padding:4px 8px;z-index:20}
p{margin:0 0 1em}
/* Ordinals (22nd), from build.py typo(): neither face has superior letters (no sups), so a smaller copy whose tops
   sit on the cap line; it never changes the line's height */
sup.ord{position:relative;top:-.44em;font-size:.62em;line-height:0;vertical-align:baseline}
h1{font:inherit;margin:0}
ul{list-style:none;margin:0;padding:0}

/* Smooth page changes (cross-document View Transitions); other browsers load normally */
/* A project opens as a screen below home: the view slides down to it, the same motion as the other panels */
.stage.is-project{transform:translate(-33.3333%,-100vh)}
.project-panel{position:fixed;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:0;transform:translateY(100vh);visibility:hidden;transition:transform var(--slide) var(--slide-ease),visibility 0s var(--slide)}
.project-panel.is-open{transform:none;visibility:visible;transition:transform var(--slide) var(--slide-ease),visibility 0s}
.project-panel.no-anim{transition:none}
.project-panel .fade{opacity:1}

/* Inner pages: the name only, centered. No menu bar. */
.site-header{position:relative;display:flex;justify-content:center;padding:28px var(--gutter) 0}
.lockup{display:flex;align-items:flex-end;gap:13px;color:var(--ink)}
.lockup-hand{display:block;height:42px;width:calc(var(--coin) * .86)}  /* the hand's height, the coin's disc's width */
.lockup .wordmark{display:block;margin-bottom:4px;font:var(--header-name-weight) var(--header-name-size)/1.17 var(--title-font);white-space:nowrap}
/* The coin where the hand was (D, Oct. 15, 2026; static/js/coins.js): about 1.5 times the hand's height, 64px (48px on
   phones). Its box is as wide as its disc (the still's disc has a 7% margin), so the coin and the name center as a
   pair, and as tall as the hand was: the coin bleeds up into the header's top padding, so the header and everything
   below keep their places. The still at once; on a fine pointer the live coin fades in over it. */
.coin{--coin:64px;--coin-x:calc(var(--coin) * -.07);--coin-y:0px;position:relative}
.coin::before,.coin canvas{content:"";position:absolute;right:var(--coin-x);bottom:var(--coin-y);width:var(--coin);height:var(--coin);pointer-events:none}
.coin::before{background:var(--still,url(/brand/coins/opmet-coin_header.webp)) 50%/contain no-repeat;transition:opacity 0s var(--t)}
.coin canvas{display:block;opacity:0;transition:opacity var(--t) var(--ease)}
.coin.is-live::before{opacity:0}
.coin.is-live canvas{opacity:1}
@media (max-width:640px){.coin{--coin:48px}}
main{padding:0 var(--gutter);flex:1}

/* Home: a stage of three panels. The foundry is one screen to the left of home, About one screen to the right. */
.home-main{padding:0}
.stage-clip{overflow-x:hidden;overflow-x:clip}
.stage{display:flex;align-items:flex-start;width:300%;transform:translateX(-33.3333%);transition:transform var(--slide) var(--slide-ease)}
.stage>.home-panel:first-child{margin-left:33.3333%}  /* the foundry hidden, its panel isn't built: home keeps its place */
.stage.is-foundry,.at-foundry .stage{transform:none}
.stage.is-about,.at-about .stage{transform:translateX(-66.6667%)}
.stage.is-blog,.at-blog .stage{transform:translate(-33.3333%,100vh)}
.at-foundry .stage,.at-about .stage,.at-blog .stage,.stage.no-anim{transition:none}
html:not(.js) .stage:has(#blog:target){transform:translate(-33.3333%,100vh)}
/* The blog: one screen above home. While it's open the page holds still. */
.home-panel{position:relative}
.blog-panel{position:absolute;left:0;right:0;top:-100vh;height:100vh;padding:0 var(--gutter);overflow-y:auto;overscroll-behavior:contain}
html.is-locked{overflow:hidden}
/* With posts, the list is one screen, centered on it. An article opens above; reading to its end brings the list back
   to the middle of the screen. The same in both states, so the list never moves when an article comes or goes. */
.blog-list{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:calc(var(--s6) * 2) 0}
/* The Journal (design v2, Oct. 10, 2026, centered at D's checkpoint), on its own pages and in the panel: a column of
   about 980px, centered. The masthead is centered; the list is centered like the work list (sized to its widest row),
   left-aligned inside, the year in its left margin; an article's text column is centered, its note margin to the right. */
.journal{--col:980px;--yr-room:76px;--note-w:260px;--note-gap:56px;
  --text:calc(var(--measure) + var(--note-gap) + var(--note-w));
  --mast:calc(var(--mast-top) + var(--mh) * 3.12 + 46px);  /* the masthead's height: three lines of the name, then the line */
  padding:0 max(calc(var(--gutter) + var(--yr-room)),calc((100% - var(--col)) / 2));container-type:inline-size}
.journal-main{padding:0}
.journal-page{width:100%}
@media (max-width:599px){.journal{padding:0 var(--gutter)}}  /* phones: the year sits in the list's own margin */
/* The masthead: one component (build.py masthead()), on the Journal and on every project page. Its words one a line,
   in the About page's big type, bigger, all plain bold. On the Journal, a centered block of left-justified lines, the
   writing hand just right of "Journal", outside the block (static for now; [data-journal-hand] and
   [data-journal-word] are kept as hooks). On a project page, the studio's nameplate, small: the hand mark to the left
   of the name (.mast-lockup, below). It links to the studio home. Under it, the Journal's small line in the serif
   italic, or a project's All work. */
.mast{padding-top:var(--mast-top);text-align:center}
.mast .mast-name{display:block;width:max-content;max-width:100%;margin:0 auto;text-align:center;font-family:var(--bold-font);font-weight:var(--bold-weight);font-size:var(--mh);line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.mast .mast-name:hover{color:var(--graphite)}
.mast-name>span{display:block}
.mast-last{position:relative;width:max-content;margin:0 auto}
.mast-word{display:inline-block}
/* The hand: the writing hand's nib (its lower left) at the end of the word, near the baseline. The hand mark sits in
   the same place, upright, a hair's breadth from the word */
.mast-hand{position:absolute;left:calc(100% + .04em);bottom:.06em;height:1.18em;line-height:0;pointer-events:none}
.mast-hand-art{display:block;height:100%;width:auto}
.mast-hand[data-pose="stand-in"]{height:1em;transform:rotate(-24deg);transform-origin:0 100%}
.mast-hand[data-pose="mark"]{left:calc(100% + .1em)}
.mast-hand[data-journal-hand]{width:calc(1.18em * 1039 / 863);--coin:calc(1.18em * 1.5);--coin-x:auto}
.mast-hand[data-journal-hand]::before,.mast-hand[data-journal-hand] canvas{left:0}
.journal .mast .mast-name{font-weight:var(--header-name-weight)}  /* the name and Journal in Bold (D, Oct. 15) */
.journal .mast .mast-name{position:relative}.journal .mast-last{position:static}  /* the coin right of the whole name, level with Journal: taller than the hand, it would meet Osserpse */
.journal-line{margin:18px 0 0;font:400 20px/1.4 var(--serif);letter-spacing:.01em;color:var(--tag-gray)}
.mast .mast-link{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s3);margin:var(--s3) 0 0}  /* All work, and Home beside it */
@media (max-width:599px){.journal-line{font-size:18px}}
/* The list: the same list and behavior, with more air (masthead to label about 160px, label row to topics 48px, topics
   to the first title 64px), the label at the column's left edge. The list fills the screen below the masthead. */
.journal .blog-list{justify-content:flex-start;min-height:calc(100vh - var(--mast));padding:160px 0 var(--s6)}
.journal .work-head{margin-bottom:48px}
.journal .blog-topics{margin:0 0 64px}
/* No published posts yet: one line where the list will be */
.journal-empty{min-height:calc(100vh - var(--mast));text-align:center;padding:160px 0 var(--s6);font:400 clamp(18px,1.55vw,23px)/1.5 var(--serif)}
.journal-empty p{margin:0}
@media (max-width:599px){.journal .blog-list,.journal-empty{padding-top:112px}}
/* On the Journal the masthead is centered as a block, its lines left-justified on each other, the small line on the
   same left edge (D, Oct. 10). The writing hand stays just right of Journal, outside the block. */
.journal .mast{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
/* The Journal's list: the masthead half the big type (D, Oct. 10), and its line in ink, centered under it */
.journal .mast{--mh:clamp(24px,3.25vw,48px)}
.journal .journal-line{text-align:center;color:var(--ink)}
.journal .mast .mast-name,.journal .mast-last{margin-left:0;margin-right:0;text-align:left}
/* With an article open (its own page, or read in the list), the masthead is small, like a project page's nameplate
   (D, Oct. 10): the writing hand to the left of the three words, which stay left-justified, the block centered, no
   line under it. Opening or closing an article sets .is-reading (site.js, inside holdList(), so the list doesn't jump; build.py on an article's own page). */
.journal.is-reading .mast{--mh:clamp(22px,2.2vw,30px);padding-top:clamp(28px,5vh,56px)}
.journal.is-reading .mast-name{display:grid;grid-template-columns:auto auto;column-gap:.24em;align-items:end}
.journal.is-reading .mast-name>span,.journal.is-reading .mast-word{grid-column:2}
.journal.is-reading .mast-last{display:contents}
.journal.is-reading .mast-hand{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:1/span 3;align-self:end;height:2.4em;margin-bottom:.16em;--coin:calc(2.4em * 1.5);width:calc(var(--coin) * .86);--coin-x:calc(var(--coin) * -.07)}
.journal.is-reading .mast-hand[data-journal-hand]::before,.journal.is-reading .mast-hand[data-journal-hand] canvas{left:auto}
.journal.is-reading .journal-line{display:none}
/* An article: All articles about 40px under the masthead; the date and topic in small sans, the title in bold, then the
   text at the measure with a margin to its right (about 260px) for handwritten notes. */
.journal-all{display:flex;justify-content:center;flex-wrap:wrap;gap:0 var(--s3);margin:40px 0 0}  /* All articles, and Home beside it */
.journal .article{width:min(100%,var(--measure));margin:0 auto}
.journal .article-head{margin:var(--s6) 0 var(--s5);text-align:left;max-width:none}
.article-head .article-meta{display:flex;flex-wrap:wrap;gap:0 1.4em;margin:0 0 14px;font:400 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--tag-gray)}
.journal .article-head h1{font-family:var(--bold-font);font-weight:var(--bold-weight);font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.01em}
.work-label:focus{outline:none}
.blog-article{display:flow-root}  /* keeps the title's margin inside, so scrolling to the article lands above its title */
.article-head h1:focus{outline:none}
.article-body{display:flow-root;font:400 19px/1.6 var(--serif)}
.article-body p{margin:0 0 1.2em;max-width:var(--measure)}
.article-para{width:100%}
/* A margin note: a scan of handwriting, straight on the paper, beside the paragraph it follows (it comes first in the
   markup and floats into the margin; notes stack, never overlap). Where there's no margin, it drops under its paragraph. */
.article-note{float:right;clear:right;width:var(--note-w);margin:.2em 0 24px;transform:rotate(var(--r,0deg))}
.article-note img{width:100%;height:auto}
/* Pictures: column (the text's width), pair (two side by side, at one height, across the text and its margin) and wide
   (the whole column). Clean, above the grain. Captions in small sans, gray. They open in the lightbox. */
.article-img,.article-pair{position:relative;z-index:2;clear:both;margin:2.4em 0}
.article-img img{width:100%;height:auto}
.article-img.is-column{width:min(100%,var(--measure))}
.article-img.is-pair,.article-pair{width:100%}
.article-img.is-wide{width:100cqw;margin-left:50%;transform:translateX(-50%)}  /* the whole column, centered on the page */
/* Where the page is wide enough for the note margin, notes sit in it and pairs run across the text and the margin */
@media (min-width:1280px){
  .article-para,.article-img.is-pair,.article-pair{width:var(--text)}
}
.article-pair{display:flex;gap:24px;align-items:flex-start}
.article-pair .article-img{flex:var(--ar,1) 1 0;min-width:0;margin:0}
.article-img figcaption{margin:10px 0 0;font:400 13px/1.45 var(--sans);letter-spacing:.01em;color:var(--tag-gray);max-width:var(--measure)}
/* The last paragraph ends on a tiny hand */
.article-end{display:inline-block;height:.95em;width:auto;margin-left:.4em;vertical-align:-.12em}
@media (max-width:1279px){
  .article-para{display:flex;flex-direction:column}
  .article-note{order:1;float:none;width:200px;margin:-.2em 0 1.6em}
}
@media (max-width:599px){
  .journal .article-head{margin-top:var(--s5)}
  .article-body{font-size:18px}
  .article-note{width:170px}
  .article-pair{flex-direction:column;gap:16px}.article-pair .article-img{flex:none;width:100%}
}
/* The lightbox (site.js): one picture at a time, full size, on the paper. No frame, no buttons; it fades. */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--gutter);border:0;background:var(--paper);color:var(--ink);opacity:0;transition:opacity var(--t) var(--ease);cursor:zoom-out;overflow:hidden}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox.on{opacity:1}
.lightbox::backdrop{background:transparent}
.lightbox:focus{outline:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity var(--t) var(--ease)}
.lightbox img.out{opacity:0;transition:none}
html.lb-open{overflow:hidden}
[data-lightbox] img:not([data-lightbox-skip],[data-lightbox-skip] img,a img){cursor:zoom-in}
html:not(.js) .stage:has(#foundry:target){transform:none}
html:not(.js) .stage:has(#about:target){transform:translateX(-66.6667%)}
.panel{flex:none;width:33.3333%;padding:0 var(--gutter)}
.side{position:sticky;top:0;height:100vh;height:100svh;overflow-y:auto;overscroll-behavior:contain}
.about-body{font-size:var(--size-m)}
.about-body{font-family:var(--serif);line-height:1.6}
.about-body a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.about-panel .about-body a{font-style:italic;text-decoration:none}  /* About's links (espresso tempo, the email, the handle): italic, not underlined (D, Oct. 16) */
.press-title{font:400 var(--size-m) var(--serif);margin:3.2em 0 1.2em}
/* The press: no heading on screen; each year in the left margin beside its first line, as in the work list (.yr)
   (D, Oct. 13). Narrower, the list steps in to make room, as the work list does on phones */
.press-group{position:relative}
.press-year{position:absolute;right:calc(100% + var(--s4));top:0;margin:0;font:400 11.5px/1.4 var(--sans);letter-spacing:.02em;color:var(--tag-gray);font-variant-numeric:tabular-nums;padding-top:.8em}  /* on its line's baseline */
@media (max-width:1199px){.about-press{padding-left:3.2rem}.press-year{right:auto;left:-3.2rem}}  /* under 1200px the margin would reach the text */
.press li{margin:0 0 .3em}
.press{font-size:15px}
.press .outlet{font-family:var(--sans);font-size:19px;margin-right:.35em}
.press .headline{color:#747069} /* lighter gray, 4.55:1 on --paper */
.press a:hover .outlet{color:inherit}
/* About: Home at the top left, the paragraphs under it, the press to the right, set a little lower. A 12-column grid
   (the project pages' gutter): the paragraphs in the first eight columns, the press from the ninth. */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,7vw,120px) clamp(12px,1.6667vw,24px);padding:12vh clamp(8px,calc(4vw - var(--gutter)),56px) 14vh;text-align:left}
.about-main{grid-column:1/9}
/* Home, small, at the top of the panel */
.title-row{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:.42em;font-size:clamp(17px,1.35vw,20px);margin:0 0 var(--s5)}
.about-grid .title-row{grid-column:1/-1;margin:0}
.home-big{margin:0}
.about-panel .about-body{font-family:var(--bold-font);font-weight:var(--name-weight);font-size:clamp(min(5.4vw,26px),3.5vw,50px);line-height:1.12;letter-spacing:-.01em;max-width:16em}
.about-body p{margin:0 0 .75em}
.about-body p.contact{margin-top:.75em;margin-bottom:0}
.about-body p.contact+p.contact{margin-top:.35em}  /* the email, then the handle: a little apart (D, Oct. 16) */
.about-press{grid-column:9/13;text-align:left;padding-top:clamp(120px,30vh,320px)}
.about-press .press-title{margin-top:0}
@media (max-width:860px){.about-grid{padding-top:max(12vh,calc(var(--coin-d) * 1.32 - 30px))}}  /* one column: a little room at the top, enough for the two coins beside Home (D, Oct. 16) */
@media (max-width:860px){.about-grid{grid-template-columns:minmax(0,1fr)}.about-main,.about-press{grid-column:1/-1}.about-press{padding-top:0}}
@media (min-width:600px) and (max-width:860px){.about-grid{grid-template-columns:minmax(0,30rem);justify-content:center}}  /* one column, centered (Oct. 14) */
/* Phones (Oct. 14): the press as the work list is there, on the paragraphs' left edge: each year on its own line above
   its outlets, each outlet on its line with its headline under it */
@media (max-width:599px){
  .about-grid{padding-left:0;padding-right:0}
  .about-press{padding-left:0}
  .press-group+.press-group{margin-top:var(--s4)}
  .press-year{position:static;padding:0;margin:0 0 12px}
  .press li{margin:0 0 14px}
  .press .outlet,.press .headline{display:block}
  .press .outlet{margin:0;line-height:1.3}
  .press .headline{margin-top:2px;line-height:1.4}
}

/* The cover: centered. The hand and the name side by side, the words below, then three lines in bold. */
.cover{position:relative;height:100vh;height:100svh;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center}
.cover-inner{display:flex;flex-direction:column;align-items:center;animation:arrive 1.6s var(--ease) both}
/* The name at the very middle of the cover (D, Oct. 15): the group (the coins' slot, the name, the links) is centered
   with room under the links equal to what the slot and its gap add above the name, so the name lands on the middle
   line. The links are 1.4 times their type tall. */
.cover-inner{padding-bottom:calc(var(--hand-h) + var(--s3) - var(--s4) - var(--ctl-size) * 1.4)}
.cover h1{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.cover .mark{position:relative;display:block;flex:none;height:var(--hand-h);width:var(--hand-w);transform-origin:50% 96%}
.cover .hand{display:block;width:100%;height:100%}
.cover .pose{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0}
/* The name: live text in Opmet Serif Black, upright, 1.4 times as wide as the wordmark was (D, Oct. 13, 2026). --wm-w
   is its width: the name is about 9.76em in the upright Black (measured at 375 and 1440 px), in a box 1.17em tall */
.cover .name{display:block;color:var(--ink);--wm-w:clamp(322px,46.2vw,784px);font:var(--name-weight) calc(var(--wm-w) / 9.76)/1.17 var(--title-font);white-space:nowrap}
.cover-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s4);margin:var(--s4) 0 0}
/* The hand on the cover. Each move lives in its own folder under moves/; build.py gathers them into /css/moves.css. */
/* The stone coins on the cover (D, Oct. 15, 2026; static/js/coins.js): one transparent canvas over the whole cover,
   the coins drawn at the hand's slot; it takes no clicks, so the name, the nav and every link work as before. A
   pointer over a coin grabs it. When 3D can't run, the still sits in the slot at the pile's size. */
.coins-stage{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease)}
.coins-stage.is-on{opacity:1}  /* the coins fade in as they fall */
/* The still holds the slot only when the coins are slow to load: it fades in after 0.7s, and gives way to them */
.cover .coins-still{transition:opacity var(--t) var(--ease)}
.cover .coins-still.is-waiting{opacity:0}  /* unseen unless 3D fails or is slow (coins.js cover) */
/* Each coin's grip (coins.js): an invisible round target riding on the coin, so a touch on a coin never scrolls the
   page and the cursor reads grab; a tap passes through to whatever is under it */
.coin-grips{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:2}
.coin-grip{position:absolute;left:0;top:0;border-radius:50%;pointer-events:auto;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.coin-held,.coin-held *{cursor:grabbing;-webkit-user-select:none;user-select:none}
/* The work list's coin, one you can pick up (D, Oct. 15): beside the list's last name, at its left (coins.js places it;
   on a phone just under it), on home and /projects/. The spot is the coin's size and place; the stage (.coins-area) is
   the screen around it, the list's last. Without the script it waits at the page's bottom left. */
.coins-spot{position:absolute;width:var(--coin-d);height:var(--coin-d);pointer-events:none}  /* the cover coin's size (D) */
.about-panel .coins-track{bottom:auto}  /* About's stage: a track as tall as its text (coins.js about) */
.coins-spot>.coins-still{position:absolute;inset:0;width:100%;height:100%;max-width:none}  /* the work list's still, until 3D runs */
.coins-work{left:0;bottom:var(--s5)}
main>.coins-work{left:var(--gutter)}
[data-home]:has(>.coins-spot),main:has(>.coins-spot){position:relative}
/* Its stage: a track over the list's part of the page (coins.js sets its top) with a window onto it, as tall as the
   browser window and pinned to it while the page scrolls through the track; the coin lives on the page, the camera pans */
.coins-track{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:1}
[data-home]>.coins-track{left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1)}  /* the full width of the screen */
.coins-track>.coins-area{position:sticky;top:0;width:100%;height:100vh;height:100svh;max-height:100%;pointer-events:none}
.cover .coins-still{position:absolute;max-width:none;pointer-events:none}  /* placed by coins.js, from the name */
@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:719px){
  :root{--hand-h:clamp(100px,18vh,160px)}
  .cover .name{--wm-w:min(70vw,336px)}
}

/* Work: one list on a grid (title, tags, year). Collapsed, only the Selected rows show; See more opens the rest in place. */
/* The blog list (.blog-list) is the same list, above home. */
.work,.blog-list{width:min(var(--work-w,44rem),100%);margin:0 auto}
.work{padding:var(--s6) 0 50vh;scroll-margin-top:0}
/* site.js sizes the column to its widest row (all projects, tags included) so it sits centered; this measures it */
.works.measuring{width:max-content}.works.measuring .work-row{display:flex!important}.works.measuring .work-row{flex-wrap:nowrap}
.work:focus{outline:none}
.work .work-head,.work .works{transition:translate var(--open) var(--slide-ease)}  /* centered by their words (site.js opmetCenter): the list glides sideways as it opens and closes */
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);margin:0 0 var(--s4)}
.work-head>*{white-space:nowrap}  /* the label and its options never break mid-phrase; site.js widens the column to fit them */
.work-label{font:400 clamp(24px,2.3vw,34px)/1.15 var(--serif);margin:0}
.work .work-label{font-family:var(--sans)}  /* the work list's label in the sans, like its names (D, Oct. 13) */
.work-row{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.9em;padding:0 0 14px}
.work-row>a,.work-row .plain{font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);line-height:1.25}
/* The case studies' names in the sans, regular (D, Oct. 13, 2026); the Journal's list keeps the serif */
.work .work-row>a,.work .work-row .plain{font-family:var(--sans)}
.work-row .plain{color:var(--tag-gray)}
/* The blog's rows: more air. The article you just read turns gray. */
.blog-list .work-row{padding-bottom:24px;column-gap:1.4em;row-gap:4px}
.work-row.is-current>a{color:var(--tag-gray)}
/* The topics See more reveals on the Journal: a filter row (.filters), --s4 from the head and the rows */
.blog-topics{margin:0 0 var(--s4)}
/* The Journal's topics in the sans, upright, like the tags they filter (D, Oct. 10): 14px, tag gray, the chosen one
   black in the sans's medium. No weight sweep: the sans has two weights, so the hover only turns the word ink. */
.blog-topics .ctl{font:normal 400 14px/1.4 var(--sans);letter-spacing:0}
.blog-topics .ctl-w{font-weight:500}
.blog-topics .ctl-v{font-weight:400!important}
.blog-topics .ctl.filter[aria-pressed="true"] .ctl-v{font-weight:500!important}
.tags{display:inline-flex;flex-wrap:wrap;gap:.15em .8em;font:400 11.5px/1.4 var(--sans);letter-spacing:.02em;color:var(--tag-gray)}
/* The year, once per year, in the left margin */
.yr{position:absolute;right:calc(100% + var(--s4));top:0;font:400 11.5px/1.4 var(--sans);letter-spacing:.02em;color:var(--tag-gray);font-variant-numeric:tabular-nums;padding-top:.45em}
/* Tags and years only once the list is open: they fade in with the rest */
.tags,.yr{opacity:0;visibility:hidden;transition:opacity .5s var(--ease) .15s,visibility 0s .65s}
.works.is-open .tags,.works.is-open .yr{opacity:1;visibility:visible;transition:opacity .5s var(--ease) .15s,visibility 0s}
.works:not(.is-open) .extra,.works .out{display:none}
@media (max-width:599px){.works{padding-left:3.2rem}.yr{right:auto;left:-3.2rem}.work .work-head{padding-left:3.2rem}}
/* With no label, the head starts with See more: its word on the names' left edge (the heavy copy holds the width to
   its right) (D, Oct. 13) */
.work .work-head .ctl{justify-items:start}
/* Phones (Oct. 14): the work list is one column with the same margin on both sides, nothing in a margin. Closed, each
   row is the name alone, the rows evenly apart; open, the tags sit on their own line under each name and each year on
   its own line above the first name of its year, with more room above it. Hidden tags and years take no room. */
@media (max-width:599px){
  .work .works,.work .work-head{padding-left:0}
  .work .work-row{display:block;padding:0 0 22px}
  .work .work-row>a,.work .work-row .plain{display:block;line-height:1.3;text-wrap:pretty}
  .work .tags,.work .yr{display:none}
  .work .works.is-open .tags{display:flex;margin-top:6px}
  .work .works.is-open .yr{display:block;position:static;padding:0;margin:0 0 10px}
  .work .works.is-open .work-row:has(.yr):not(:first-child){padding-top:var(--s3)}
  @starting-style{.work .works.is-open .tags,.work .works.is-open .yr{opacity:0}}
}
/* The motion: rows already showing glide to their new places while the others fade in between (transform and opacity) */
.work .glide,.blog-list .glide{transition:transform var(--open) var(--slide-ease)}
.works .rise{opacity:0;transform:translateY(-4px)}
.works .rise.go{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--slide-ease);transition-delay:calc(160ms + var(--i) * 14ms)}
.works .fall,.blog-topics.fall{opacity:0;transition:opacity .25s var(--ease)}
.blog-topics.rise{opacity:0;transform:translateY(-4px)}
.blog-topics.rise.go{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--slide-ease)}
/* A year that moves to a new first row fades in again there */
.works .yr.moved{opacity:0;transition:none}

/* The Archive page */
.index{max-width:30rem;margin:0 auto;padding:0 0 18vh}
.list li{margin:0 0 .35em}
.list a,.list .plain{font-family:var(--sans);font-size:clamp(17px,1.3vw,19px)}
.list .plain{color:var(--graphite)}
.preview{position:fixed;top:50%;right:var(--gutter);width:min(24vw,360px,calc((100vw - 30rem) / 2 - var(--gutter) * 2));aspect-ratio:4/5;transform:translateY(-50%);pointer-events:none;z-index:30}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t) var(--ease)}
.preview img.on{opacity:1}
@media (hover:none),(max-width:960px){.preview{display:none}}

/* A Journal article's head (the Journal's rules below set its size and place) */
.article-head{text-align:center;margin:16vh auto 14vh;max-width:var(--measure)}
.article-head h1{font-family:var(--serif);font-size:clamp(22px,2.2vw,32px);letter-spacing:.01em;line-height:1.2}
.article-head p{color:var(--graphite);margin:4px 0 0}
.article-head p{font-size:var(--size-s)}

/* Simple pages */
.index:first-child{padding-top:16vh}
.page{width:fit-content;max-width:var(--measure);margin:12vh auto 14vh;font-size:var(--size-m)}  /* as wide as its lines, so short text sits centered */
.page a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.notfound,.single{text-align:center;padding:20vh 0;font-size:var(--size-m)}
.single p{margin:0 0 .6em}

/* Footer */

.fade{opacity:0;transition:opacity var(--t) var(--ease)}.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .cover-inner,.cover .mark,.cover .mark *{animation:none!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .fade{opacity:1}
}

/* A project page (v02): a 12-column grid. The masthead (the Journal's, see .mast) and All work under it; the title,
   centered, in the bold serif; under it the paragraph, and one list of facts and credits. Then the work in the eight middle
   columns, pictures from one gallery in even rows; chapter labels in the left margin, notes in the right one, beside
   their picture. At the end, All work. Scoped to .pp, so home and the other pages can't change. Pictures never move. */
.pp{--m:clamp(16px,2.8vw,40px);--g:clamp(12px,1.6667vw,24px);--u:56px;--U:120px;--t1:44px;--b:16px;--s:13px;
  --gray:#6B665E;--hair:rgba(22,21,18,.16);
  width:100%;font:400 var(--s)/1.45 var(--sans);color:var(--ink)}
.pp img,.pp video{display:block;width:100%;height:auto;max-width:none}
.pp a:hover{color:var(--gray)}
/* The masthead on a project page is the studio's nameplate, small (D, Oct. 10): the hand mark to the left of Opmet
   Osserpse, the two words left-justified on each other, the pair centered. The project's title is the focus. */
.pp .mast{--mh:var(--header-name-size);padding-top:clamp(28px,5vh,56px)}
/* The nameplate: the hand beside Opmet Osserpse, one line, the hand centered on it (D, Oct. 13) */
.mast .mast-lockup{display:flex;align-items:center;gap:13px;line-height:1.2;letter-spacing:0;width:max-content;max-width:100%;margin:0 auto;text-align:left}
.mast-lockup .mast-hand{position:relative;left:auto;bottom:auto;flex:none;height:42px;width:calc(var(--coin) * .86);--coin-y:calc((42px - var(--coin)) / 2)}
.mast .mast-lockup .mast-words{font-weight:var(--header-name-weight)}  /* the name in Bold (D, Oct. 15) */
.pp .mast .mast-link{margin-top:28px}  /* more room under the nameplate before Work and Home (D, Oct. 15; was 14px) */
.pp figure,.pp h1,.pp h2,.pp p,.pp dl,.pp dd{margin:0}.pp h1,.pp h2{font-weight:400}
.pp .ph{color:var(--gray);font-style:italic}
.pp .g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:0 var(--m)}
/* The opening: the title; under it, across the eight middle columns, the paragraph and one list */
.pp{--pt:clamp(min(30px,7.6vw),5.6vw,84px)}  /* the project's title: the focus. Under 395 px a little smaller, so "Oscar®-Qualifying" holds one line in the Black */
.pp .open{padding-top:clamp(72px,12vh,140px);align-items:start}
/* A line above the title, when a project has one ("20th Anniversary"), set as the title */
.pp .open .kicker{grid-column:2/12;grid-row:1;text-align:center;font-family:var(--bold-font);font-weight:var(--bold-weight);font-size:var(--pt);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.pp .open h1{grid-column:2/12;grid-row:2;text-align:center;font-family:var(--bold-font);font-weight:var(--bold-weight);font-size:var(--pt);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.pp .open .lede{grid-column:3/7;grid-row:3;max-width:22em;margin-top:64px;padding-right:var(--g);font-size:var(--b);line-height:1.55}
.pp .open .info{grid-column:7/11;grid-row:3;margin-top:68px}
/* On screens wider than 1440 px the opening keeps the width it has at 1440 (1360 px inside main's padding), so the paragraph and the facts stay together right under the title (D, Oct. 14) */
.pp .open{max-width:1360px;margin-inline:auto}
/* The paragraph and the facts each as wide as their words (the paragraph at most 22em, the facts at most 30em of
   their size) and centered as a pair under the title, so the opening keeps the title's axis however short the facts
   are (D, Oct. 14). The title keeps the ten middle columns' width, so it wraps as before. Phones stack (below). */
@media (min-width:641px){
  .pp .open{grid-template-columns:minmax(0,1fr) fit-content(calc(22 * var(--b))) clamp(40px,5vw,96px) fit-content(calc(30 * var(--s))) minmax(0,1fr)}
  .pp .open .kicker,.pp .open h1{grid-column:1/-1;width:calc(100% * 10 / 12 - var(--g) / 6);justify-self:center}
  .pp .open .lede{grid-column:2;padding-right:0}
  .pp .open .info{grid-column:4}
}
.pp .facts,.pp .cr{font-size:var(--s);line-height:1.45}
.pp .facts div,.pp .cr div{display:grid;grid-template-columns:8.6em minmax(0,1fr);column-gap:12px;padding:0 0 5px}
.pp .cr{margin-top:14px}
.pp .facts dt,.pp .cr dt{color:var(--gray)}.pp .facts a{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
/* The work: columns 3 to 10. Margins: chapter labels left (1 and 2), notes right (11 and 12, into the page margin) */
.pp>.open+.ch,.pp>.open+.b{margin-top:64px}
.pp>.ch{margin-top:var(--U)}
.pp .ch>.b+.b,.pp>.b+.ch,.pp>.b+.b{margin-top:var(--u)}.pp .b-cont{margin-top:var(--g)!important}
.pp .chl{height:0;position:relative;z-index:3}.pp .ch-above>.chl{height:auto;margin-bottom:12px}
.pp .chap{grid-column:1/3;margin-left:calc(16px - var(--m));font-size:var(--s);line-height:1.45;padding-right:12px;white-space:nowrap;overflow:hidden}
.pp .chap .n{color:var(--gray);display:inline-block;min-width:1.8em}
.pp .b{align-items:start}
.pp .b .m,.pp .b .row{grid-column:3/11;grid-row:1}.pp .b-tall .m{grid-column:4/10}
.pp .b-wide .m,.pp .b-wide .row{grid-column:2/12}  /* rows and landscape pictures: ten columns */
/* Whole pictures, never cropped: a portrait picture or film (.cap) and a row are never taller than about 85vh (--cap),
   centered in their columns, so a poster shows whole without scrolling. --ar is the width over the height (build.py). */
.pp{--cap:85vh}
@supports (height:1svh){.pp{--cap:85svh}}
.pp .b .m.cap{width:100%;max-width:calc(var(--cap) * var(--ar));margin-inline:auto}
.pp .b .row{width:100%;max-width:calc(var(--cap) * var(--ar) + var(--g) * (var(--n) - 1));margin-inline:auto}
/* Cut-outs (a notes file's "cut"): transparent pictures straight on the paper, no frame or box, at a size: small, medium
   or large. Cut-outs that share a row sit in it together, centered, each at its own size, and scale down together. */
.pp .b-cuts .cuts{grid-column:1/13;grid-row:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--u) clamp(16px,2.8vw,40px)}
.pp .cuts.end{align-items:flex-end}.pp .cuts.top{align-items:flex-start}
.pp .b .cut{flex:0 1 var(--cw);min-width:0}
.pp .cuts .cut img{width:var(--cw);max-width:100%}  /* the picture at its own size, whatever room its label takes */
.pp .cuts.end .cut,.pp .cuts.top .cut{flex-basis:max(var(--cw),150px)}  /* a labeled cut-out: room for its label */
.pp .cut-small{--cw:clamp(72px,11vw,168px)}.pp .cut-medium{--cw:clamp(104px,18vw,272px)}.pp .cut-large{--cw:clamp(150px,30vw,440px)}.pp .cut-xl{--cw:clamp(220px,44vw,640px)}.pp .cut-true{--cw:calc(var(--w) * clamp(.7px,.11vw,1.6px))}  /* its width in points, shown reduced */
/* air (Sunny's, after its Brand Bible): more room between sections, and between rows within one */
.pp-air>.ch{margin-top:calc(var(--U) * 2)}.pp-air .ch>.b+.b{margin-top:calc(var(--u) * 1.75)}
/* A label under a picture (a notes file's "n", "label" and "note"; Sunny's Bookshop, after its Brand Bible): the name in
   the small sans, its note under it in gray, and the numeral as the Bible sets it, an old-style serif figure in its Gilt.
   The Gilt is the one color the site adds, on this page only (D, Oct. 10). */
.pp .lbl{margin:12px 0 0;font:400 var(--s)/1.4 var(--sans);color:var(--ink);text-align:left}
.pp .lbl-n{margin-right:.45em;font:italic 400 1.2em/1 var(--ctl-font);font-variant-numeric:oldstyle-nums;color:#CBA65E}
.pp .lbl-s{display:block;color:var(--gray)}
/* research (Red Mask, D, Oct. 14): under each poster its name and year, then why it belongs to that year and the films
   studied for it, each a short paragraph in gray; more room between the rows, for the words */
.pp-research .lbl{margin-top:16px;max-width:34em;text-wrap:pretty}
.pp-research .lbl-s{margin-top:.5em}
.pp-research .lbl-k{color:var(--ink)}  /* the line's lead word, Art: or Period:, in ink */
.pp-research .ch>.b+.b,.pp-research>.b+.b{margin-top:calc(var(--u) * 1.5)}
.pp .b-wide .note{grid-row:2}  /* its note in the right margin, under the picture's corner */
.pp .row{display:flex;gap:var(--g);align-items:flex-start}.pp .row .m{flex:1 1 0;min-width:0}
.pp .b-full{display:block}.pp .b-full .fcap{margin-top:10px}
.pp .b video{background:var(--paper)}
.pp .b .m{position:relative;z-index:2}  /* above the grain, like every image */
.pp .b .m.grain{z-index:auto}  /* a film drawn on white, its white set to the paper: under the grain, so it is the page */
.pp .piece{min-width:0}.pp .piece>*{margin-top:0}
.pp .note{grid-column:11/13;grid-row:1;align-self:start;margin-right:calc(16px - var(--m));font-size:var(--s);line-height:1.45;color:var(--gray);text-wrap:pretty;transition:color var(--t) var(--ease)}
.pp .fcap .note{grid-row:1}
.pp [data-read].on .note{color:var(--ink)}
.pp .note .again{display:block;margin-top:4px;font-style:italic;color:var(--ink);border-bottom:1px solid var(--hair);width:max-content}
.pp .note .again[hidden]{display:none}
.pp .film-ctl{grid-column:1/-1;grid-row:3;margin-top:10px;text-align:center}  /* a looping film's Play with sound, right under it */
/* The way out */
.pp .pfoot{margin-top:var(--U);padding-bottom:120px;display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s3)}  /* All work and Back to top */
/* Under 1100px the margins are too narrow for text. Chapter labels and notes are left out, and pictures widen
   (rows and landscape pictures to the full width). A film's Play links sit under it, on the right */
@media (min-width:641px) and (max-width:1099px){
  .pp .chl{display:none}
  .pp .b .m,.pp .b .row{grid-column:2/12}.pp .b-tall .m{grid-column:3/11}.pp .b-wide .m,.pp .b-wide .row{grid-column:1/13}
  .pp .nt,.pp .note:not(:has(.again)),.pp .fcap:not(:has(.again)){display:none}  /* notes left out, like the labels; a film's Play links stay */
  .pp .note,.pp .b-wide .note{grid-column:8/13;grid-row:2;margin:10px 0 0}.pp .fcap .note{grid-row:1;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.pp [data-read] .note{color:var(--ink)}}
/* Phones (rebuilt Oct. 14): one centered column, the same 20px margin on both sides on the page by itself and in the
   panel on home. The opening centered under the nameplate, as on wider screens: the title, the paragraph, then the facts
   and credits, each name over its value, side by side where they fit. The way out centered, like All work and Home. */
@media (max-width:640px){
  main:has(>.pp){padding:0}
  .pp{--m:20px;--g:12px;--u:24px;--U:64px;--t1:34px}
  .pp .g{grid-template-columns:1fr 1fr}
  .pp .g>*,.pp .b .m,.pp .b .row,.pp .open h1,.pp .open .lede,.pp .open .info,.pp .note,.pp .chap{grid-column:1/-1!important;grid-row:auto!important}
  .pp .open{padding-top:64px}.pp .open h1{grid-row:auto}
  .pp .open .lede{max-width:22em;margin:32px auto 0;padding-right:0;text-align:center;text-wrap:pretty}
  .pp .open .info{margin-top:36px}
  .pp .facts,.pp .cr{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;text-align:center}
  .pp .facts div,.pp .cr div{display:block;max-width:100%;padding:0;text-wrap:balance}
  .pp .facts dt,.pp .cr dt{margin-bottom:1px}
  .pp .cr{margin-top:24px}
  .pp>.open+.ch,.pp>.open+.b{margin-top:48px}
  .pp .nt,.pp .note:not(:has(.again)),.pp .fcap:not(:has(.again)){display:none}.pp .note{margin:6px 0 0}
  .pp .chl{display:none}
  .pp .row-stack{flex-direction:column;gap:var(--u)}.pp .row-stack .m{flex:none!important;width:100%}  /* a notes file's row: stacked */
  .pp .cuts.end .cut,.pp .cuts.top .cut{flex-basis:max(var(--cw),120px)}
  .pp .cut-xl{--cw:100%}  /* an xl cut-out (a wordmark, a type specimen) runs the full width on a phone */
  .pp-research .row-stack{gap:calc(var(--u) * 1.5)}  /* each poster and its research the same distance from the next */
}
/* The foundry: objects in space. An approved exception to the one motion value (see the build report): products float
   at scattered depths, bob and turn, and open in place. Every object is plain CSS 3D; site.js places them. */
.foundry-panel{padding:0;overflow:hidden}
.fd{position:relative;height:100%;overflow:hidden;font:400 var(--size-s)/1.55 var(--sans)}
.fd-field{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.fd-field::-webkit-scrollbar{display:none}
.fd.is-open .fd-field{overflow-y:hidden}
.fd-space{position:relative;transition:height 1s ease}
.fd-item{position:absolute;transition:left 1.1s var(--slide-ease),top 1.1s var(--slide-ease)}
.fd-item.is-open{z-index:3}
.fd-link{display:block;width:340px;color:var(--ink);transform-origin:50% 40%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .9s ease,filter .9s ease,transform .9s var(--slide-ease)}
.fd-link:hover{color:var(--ink)}
.fd-item.is-gone .fd-link{opacity:0;filter:blur(10px);pointer-events:none}
.fd-item.is-open .fd-link{cursor:grab;touch-action:none}
.fd.is-grabbing .fd-item.is-open .fd-link{cursor:grabbing}
.fd-box{height:340px;display:flex;align-items:center;justify-content:center;perspective:1100px}
.fd-box-end{align-items:flex-end;padding-bottom:20px}
.fd-turn{display:block;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,0,0,1)}
.fd.is-grabbing .fd-turn{transition:none}
.fd-bob{display:block;transform-style:preserve-3d;animation:fd-bob 7s ease-in-out infinite}
.fd-obj{position:relative;transform-style:preserve-3d;animation-duration:var(--dur);animation-delay:var(--delay,0s);animation-iteration-count:infinite}
.fd-spin{animation-name:fd-spin;animation-timing-function:linear}
.fd-sway{animation-name:fd-sway;animation-timing-function:ease-in-out}
.fd-drift{animation-name:fd-drift;animation-timing-function:ease-in-out}
.fd-tumble{animation-name:fd-tumble;animation-timing-function:linear}
.fd-face{position:absolute;display:block;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fd-center,.fd-ph-face{display:flex;align-items:center;justify-content:center}
.fd-ph-face{font:italic 400 14px var(--serif)}
.fd-oa span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 176px/1 "Opmet Serif",var(--serif)}
.fd-book-cover{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 16px 36px}
.fd-book-series{font-size:11px;color:var(--graphite)}
.fd-book-title{font:400 25px var(--serif)}
.fd-book-spine{display:flex;align-items:center;justify-content:center}
.fd-book-spine span{writing-mode:vertical-rl;font:400 12px var(--serif);color:var(--paper)}
.fd-handle{width:120px;height:84px;left:50px;top:-78px;border:7px solid;border-bottom:0;border-radius:60px 60px 0 0;backface-visibility:visible;-webkit-backface-visibility:visible}
.fd-study-cover{padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between}
.fd-study-head{display:flex;gap:22px;font-size:8px;color:var(--ink)}
.fd-study-lines{display:flex;flex-direction:column;gap:5px}
.fd-study-lines span{display:block;height:3px;background:#D9D5CB}
@keyframes fd-bob{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@keyframes fd-spin{from{transform:rotateX(-6deg) rotateY(0deg)}to{transform:rotateX(-6deg) rotateY(360deg)}}
@keyframes fd-sway{0%,100%{transform:rotateX(10deg) rotateY(-40deg) rotateZ(-2deg)}50%{transform:rotateX(2deg) rotateY(40deg) rotateZ(2deg)}}
@keyframes fd-drift{0%,100%{transform:rotateX(16deg) rotateY(-28deg) rotateZ(-5deg)}50%{transform:rotateX(-8deg) rotateY(30deg) rotateZ(6deg)}}
@keyframes fd-tumble{from{transform:rotateX(-22deg) rotateY(0deg) rotateZ(8deg)}to{transform:rotateX(-22deg) rotateY(360deg) rotateZ(8deg)}}
/* Under each product: the name, then the type */
.fd-label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:18px;transition:opacity .5s ease}
.fd-item.is-open .fd-label{opacity:0}
.fd-name{font:400 var(--size-m)/1.55 var(--serif)}
.fd-type{color:var(--graphite)}
.is-ph{font-style:italic;color:var(--graphite)}
/* The product view: a veil to click away, the text column on the right, the images on the left */
.fd-veil{position:absolute;inset:0;display:none}
.fd.is-open .fd-veil{display:block}
.fd-text{position:absolute;top:0;bottom:0;left:62.5%;width:420px;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transform:translateX(24px);
  transition:opacity .6s ease,transform .9s cubic-bezier(.2,0,0,1)}
.fd.is-open .fd-text{opacity:1;pointer-events:auto;transform:none;transition-delay:.35s}
.fd-d-type,.fd-d-meta{margin:0;color:var(--graphite)}
.fd-d-name{margin:8px 0 0;font:400 36px/1.2 var(--serif)}
.fd-d-name:focus{outline:none}
.fd-d-line{margin:16px 0 0;font:400 18px/1.55 var(--serif)}
.fd-d-meta{margin-top:20px}
.fd-d-actions{display:flex;flex-wrap:wrap;gap:4px 24px;margin:28px 0 0}
.fd-d-actions a{font:400 19px var(--serif);padding:8px 0}
.fd-left{position:absolute;left:0;top:0;bottom:0;width:59.7222%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;pointer-events:none;opacity:0;transition:opacity .6s ease}
.fd-left::-webkit-scrollbar{display:none}
.fd.is-open .fd-left{opacity:1;transition-delay:.35s}
.fd-spacer{position:relative;display:block;height:calc(50vh + 370px);height:calc(50svh + 370px)}
.fd-drag{position:absolute;top:calc(50vh + 322px);top:calc(50svh + 322px);left:calc(var(--fd-w,100vw) * .326389 - 100px);width:200px;text-align:center;color:var(--graphite)}
.fd-images{display:flex;flex-direction:column;gap:40px;width:540px;margin-left:calc(var(--fd-w,100vw) * .138889);padding-bottom:160px}
.fd-img{width:100%;background:var(--paper-deep);display:flex;align-items:center;justify-content:center;font:italic 400 16px var(--serif);color:var(--graphite)}
.fd.is-open .fd-img{pointer-events:auto}
/* The filter row: All, Digital, Physical, then Home (Back while a product is open) */
.fd-nav{position:absolute;top:28px;left:0;right:0;z-index:4;display:flex;justify-content:center;align-items:center;pointer-events:none}
/* The filters fold away while a product is open: the gap after each is inside the fold, and so is room for the targets */
.fd-filters{flex-wrap:nowrap;column-gap:0;overflow:hidden;white-space:nowrap;max-width:640px;padding:8px 10px;margin:0 -10px;transition:opacity .4s ease,visibility .4s,max-width .7s var(--slide-ease)}
.fd-filters .ctl{margin-right:var(--s3)}
.fd.is-open .fd-filters{max-width:0;opacity:0;visibility:hidden}
.fd-f{pointer-events:auto}
/* No transitions for one frame: arriving at #foundry/<id>, or on resize */
.fd.no-anim *{transition:none!important}
/* Phones: one column, no hover, and the product view stacks (the product, the text, the images). Not yet designed. */
@media (max-width:720px){
  .fd-text,.fd.is-open .fd-text{left:24px;right:24px;width:auto;top:var(--fd-text-top,60vh);bottom:auto;display:block;transition:opacity .6s ease}
  .fd.is-open .fd-text{transition-delay:.35s}
  .fd-left{width:100%}
  .fd-spacer{height:var(--fd-spacer-h,100vh)}
  .fd-drag{top:var(--fd-drag-top,50vh);left:calc(50% - 100px)}
  .fd-images{width:auto;margin:0 24px}
  .fd-d-name{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .fd-bob,.fd-obj{animation:none!important}
}