/* Kiln grid, built to .planning/positioning/GRID.md, 2026-09-10.
   Throwaway. Three record compositions share this file, so any difference
   between them is composition and cannot be the unit drifting.

   The whole of the vertical is a multiple of --L. There is not one clamp()
   below that touches a vertical measurement, which is GRID.md section 2 and
   the single largest change from prototypes/kiln-grid/. */

:root{
  /* ---- the unit. GRID.md section 1. ---- */
  --L:28px;              /* line: body leading, column gutter, field gap */
  --half:14px;
  --cols:12;
  --area:1412px;         /* 12 x 92 + 11 x 28 */
  --margin:28px;

  /* ---- vertical spacing, five tokens and nothing else. section 6. ---- */
  --s1:28px; --s2:56px; --s4:112px; --s8:224px; --s16:448px;

  /* ---- ink. carried verbatim from kiln-grid so colour cannot drift. ---- */
  --paper:#FFF;
  --i030:#F7F8F8; --i080:#EDEFF0; --i150:#DEE1E3; --i200:#CDD1D4;
  --i300:#9BA2A8; --i500:#5A6066; --i700:#24272A; --i900:#0B0C0D;

  --serif:"Newsreader",Georgia,serif;
  --sans:"Archivo",Helvetica,Arial,sans-serif;
  --serif-tr:-.018em;
  --frame:1px solid var(--i150);
  --hard:1px solid var(--i900);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--i900);
  font-family:var(--serif);font-size:21px;line-height:28px;font-weight:400;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
:focus-visible{outline:1.5px solid var(--i900);outline-offset:2px}

/* ---- the type scale. six sizes and one label. GRID.md section 4.
   Every leading is a whole number of half-lines, so a block of any size
   resolves back onto the 28 grid. A seventh size is an argument to be had in
   GRID.md, not a value typed in here. ---- */
.t-label{font-family:var(--sans);font-size:10px;line-height:14px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase}
.t-cap{font-family:var(--sans);font-size:13px;line-height:14px;font-weight:400;
  letter-spacing:.005em;color:var(--i500)}
.t-cap b{font-weight:600;color:var(--i900)}
/* Sizes revised 2026-09-10 against three references Oliver named. Trias sets
   body at 15/24 and he read it as slightly small; McLean Quinlan at 31.6/38
   and he read it as slightly big; Chipperfield at 24/30 was the one that made
   him say ours needed to grow. 21 sits between them and the leading tightens
   from 1.65 to 1.33, which is where most of the airiness was coming from.
   Still one line per line, so nothing else in the grid moves. */
.t-body{font-size:21px;line-height:28px}
.t-body p+p{margin-top:var(--L)}   /* paragraphs of one opening, a line apart */
/* a note beside a picture: a step down from the body, on the same line, so a
   story told through the scroll reads at a different scale from the opening.
   Oliver, 2026-09-16: more variation in scale. */
.t-note{font-size:18px;line-height:28px}
.t-note p+p{margin-top:var(--L)}
/* a link in the copy is ink, underlined thin; the outcome's link to the
   finished house on Venice Beach, 2026-09-17 */
.t-body a,.t-note a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.t-sub{font-size:26px;line-height:28px;letter-spacing:var(--serif-tr)}
.t-sec{font-size:38px;line-height:42px;letter-spacing:var(--serif-tr)}
/* Editorial pulls, 2026-09-15. A sentence of the record set at the section
   size beside a picture, and a figure set at the title size with its label
   beneath, so the page is not one block of one size. No new sizes: the
   scale's six do it. */
.t-sec.pull{color:var(--i900);text-wrap:balance}
.t-sec.pull cite{display:block;font-style:normal;margin-top:var(--L)}
/* the one size beyond the scale, for numbers only: three lines */
.t-display{font-size:84px;line-height:84px;letter-spacing:var(--serif-tr);
  font-variant-numeric:tabular-nums lining-nums}
.cell .row{display:flex;gap:var(--L)}
.cell .row > .cell{flex:1;margin-top:0}
.cell .row > .cell > * + *{margin-top:var(--half)}
/* a page section heading takes three lines on the grid: 42px of type and 42px
   of air, so the block beneath starts on the fourth line. Two lines left it
   14px, which read as none at this size. */
.t-sec.sec{padding-bottom:calc(var(--L) * 3 - 42px)}
.t-head{font-size:55px;line-height:56px;letter-spacing:var(--serif-tr)}

/* Headings sit on their cap line and baseline rather than inside the leading
   box. This is what lets an image top edge meet the cap line of the text
   beside it, which is the alignment the book is actually about, and it is why
   the scale can be this short without headings floating off the grid.
   Verified in Chrome. Browsers without it lose the trim and keep the grid. */
@supports (text-box: trim-both cap alphabetic){
  .t-sec,.t-head,.t-sub{text-box:trim-both cap alphabetic}
}
p,h1,h2,h3,h4,h5,h6,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:400}

/* ---- the sheet. section 1. Above 1468 the type area is fixed and the page
   centres in white; below it the columns compress and the derived ratios
   drift a percent or two, which object-fit absorbs. ---- */
.sheet{max-width:var(--area);margin:0 auto;
  padding:var(--s4) var(--margin) var(--s8)}

/* A band is a 12 column grid on 28px rows. Bands stack in whole lines, so the
   page never leaves the grid between them. */
.band{display:grid;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--L);row-gap:0;grid-auto-rows:var(--L)}
/* Rhythm revised 2026-09-10. Eight lines between sections was reading as a
   hole rather than as a pause, and it was doing it a dozen times down the
   page. Four is the section break now, eight is reserved for the two moments
   that genuinely change subject. gap1 groups images into a cluster. */
.band + .band{margin-top:var(--s2)}
.band.gap1 + .band,.band + .band.gap1{margin-top:var(--s1)}
.band.gap4 + .band,.band + .band.gap4{margin-top:var(--s4)}
.band.gap8 + .band,.band + .band.gap8{margin-top:var(--s8)}

/* ---- figures. The image is exactly n lines tall and is cropped to it, so
   the frame is the grid's decision. Orientation never changes, GRID.md 5. ---- */
figure{margin:0;min-width:0}
figure .fr{position:relative;overflow:hidden;contain:paint;background:var(--i030)}
figure .fr img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Documents are shown whole, not cropped. Unchanged from VISUAL-DIRECTION 9. */
/* the loop behind a still: same frame, same crop. The still sits on top and
   fades away while the loop plays, so nothing is shown until there is
   something to show */
figure .fr video.loop{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none}
figure.moves .fr img{position:relative;transition:opacity .6s cubic-bezier(.16,.84,.28,1)}
figure.moves.playing .fr img{opacity:0}
/* a disc: the frame is a circle and the picture fills it. Dubai's swatch,
   pattern and mark beside a district's name, as its presentation page has them */
/* Two columns are 212px and eight lines are 224, so the frame is not
   square; the circle is drawn on the picture instead, 212 across, and sits
   at the top of the frame level with the name beside it. */
figure.round .fr{background:var(--paper);display:flex;align-items:flex-start}
figure.round .fr img{width:140px;height:140px;border-radius:50%;
  object-fit:cover;mix-blend-mode:normal}   /* five lines across */
/* A drawing sits on the ground its record sets, a slightly warm off-white on
   Riccione (Oliver, 2026-09-16) and the page's white elsewhere; the
   picture's own white multiplies to it. The
   lightest lines of a CAD sheet were going, so the ink filter beneath
   darkens the greys without touching the white: a gamma on the picture,
   which is what a heavier pen would have done. */
figure.doc .fr{background:var(--ground,var(--paper))}   /* a record sets --ground; Riccione does */
figure.doc .fr img{filter:url(#ink)}
figure.doc.left .fr img{object-position:left center}   /* a small icon flush to its caption's edge */
figure.doc .fr img{object-fit:contain;mix-blend-mode:multiply}
figcaption{margin-top:var(--L);max-width:24em}
figure.tight figcaption{margin-top:var(--half)}
/* the stepped figure's controls: dots, the step's label, a numbered legend */
.seqnav{display:flex;align-items:center;gap:var(--half)}
.seqnav .dots{display:flex;gap:6px}
.seqnav .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--i900);
  background:var(--paper);padding:0;cursor:pointer}
.seqnav .dot.on{background:var(--i900)}
.seqnav .lab{color:var(--i900)}
.legend{list-style:none;margin:var(--half) 0 0;padding:0;columns:3;column-gap:var(--L);
  font-family:var(--sans);font-size:13px;line-height:14px;color:var(--i500);max-width:none}
.legend li{break-inside:avoid;padding:2px 0}
.legend b{display:inline-block;min-width:1.6em;color:var(--i900);font-weight:600;
  font-variant-numeric:tabular-nums}
.seqtext{margin-top:var(--half)}
figure .seqcap{max-width:none}

/* ---- furniture ---- */
.rule{border-top:var(--hard);height:0;font-size:0}
.rule.thin{border-top:var(--frame)}
.lab{color:var(--i500)}
.dim{color:var(--i500)}

/* ---- the overlay. Press G. Twelve columns and every 28px line, drawn from
   the same custom properties the layout uses, so it cannot lie about the
   grid it is checking. ---- */
#ov{position:fixed;inset:0;pointer-events:none;display:none;z-index:99}
body.ov #ov{display:block}
#ov .cols{max-width:var(--area);margin:0 auto;padding:0 var(--margin);height:100%;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--L)}
#ov .cols i{background:rgba(255,0,80,.06)}
#ov .lines{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(255,0,80,.16) 0 1px, transparent 1px var(--L));
  background-position:0 var(--ovy,0px)}

#hud{position:fixed;left:0;bottom:0;z-index:100;background:var(--i900);color:#fff;
  padding:8px 14px;font-family:var(--sans);font-size:10px;line-height:14px;
  letter-spacing:.12em;text-transform:uppercase}
#hud a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
  margin-left:14px}
#hud a.on{border-bottom-color:#fff;color:#fff}
#hud b{font-weight:500;color:var(--i300)}

/* ---- small screens. GRID.md section 8 item 2: the leading steps, which is a
   breakpoint change and not a second system. ---- */
@media (max-width:60rem){
  :root{--L:24px;--half:12px;--s1:24px;--s2:48px;--s4:96px;--s8:192px;--s16:384px}
  body{font-size:19px;line-height:24px}
  .t-body{font-size:19px;line-height:24px}
  .t-sub{font-size:23px;line-height:24px}
  .t-sec{font-size:30px;line-height:36px}
  .t-head{font-size:40px;line-height:48px}
  .band{grid-template-columns:repeat(6,1fr)}
}

/* Items take their content height rather than stretching to the cell, so the
   snap pass can measure them. */
.band > *{align-self:start;min-width:0}

@media (max-width:60rem){
  /* Twelve column placements are meaningless on six. Everything goes full
     measure and the line grid carries the page on its own. */
  .band > *{grid-column:1 / -1 !important}
}

/* A flagged crop. GRID.md section 5: a crop costing more than a fifth of
   either dimension is shown rather than made, on the placeholder principle. */
figure.flag .fr{outline:1px solid #C0392B;outline-offset:-1px}
figure.flag figcaption::after{content:" Crop exceeds one fifth. Flagged, not cropped.";
  color:#C0392B;font-weight:600}

.cell{min-width:0}
/* Inside a cell the children are in normal flow, and text-box-trim has taken
   the leading box away, so their spacing has to be stated rather than
   inherited from the line box. That is what trim is for: the gap you set is
   the gap you see. The cell as a whole still snaps to a whole line count. */
.cell > * + *{margin-top:var(--half)}
.cell figure + *{margin-top:var(--L)}

/* a second labelled note in a zone cell stands two lines below the first, or
   on the foot of the cell, level with the picture beside it */
.cell.zone{display:flex;flex-direction:column}
.cell .lab.gap{margin-top:calc(var(--L)*2)}
.cell .lab.gap.push{margin-top:auto;padding-top:calc(var(--L)*2)}
/* a note over a picture: the picture fills what the note leaves */
.cell.over figure.fill{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.cell.over figure.fill .fr{flex:1 1 0;min-height:0}
/* a drawing set inside a ground with room at its edges: a line above and
   below, three columns' worth at the sides (Oliver, 2026-09-17: wider) */
figure.inset .fr img{box-sizing:border-box;padding:var(--L) calc(var(--L)*3)}
/* a render shown on the ground, whole, is not a drawing: the ink filter and
   the multiply that suit a CAD sheet darkened the kitchen versions and the
   section (Oliver, 2026-09-17), so a plate may say ink:false */
figure.doc.plain .fr img{filter:none;mix-blend-mode:normal}

/* ---- the site's furniture on a record, 2026-09-17: the index's masthead
   and footer, at the sheet's width and on its lines. ---- */
.sheet.has-mast{padding-top:var(--s2);padding-bottom:var(--s4)}
.site-mast{display:flex;align-items:center;justify-content:space-between;gap:var(--L);
  height:calc(var(--L)*2);margin-bottom:var(--s4)}
.site-mast > a,.site-foot-top > a{color:var(--i900);display:block;text-decoration:none}
.wm{width:86px;height:auto;fill:currentColor;display:block}
.nav{display:flex;gap:calc(var(--L)*1.5);align-items:baseline}
.nav a{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--i500);
  border-bottom:1px solid transparent;padding-bottom:4px}
.nav a:hover{color:var(--i900);border-bottom-color:var(--i900)}
.nav .conv{color:var(--i900);border-bottom-color:var(--i200)}
@media (max-width:40rem){ .nav{gap:var(--half)} .nav .conv{display:none} }
.site-foot{border-top:var(--hard);margin-top:var(--s4);padding:var(--s2) 0 0}
.site-foot-top{display:flex;align-items:center;justify-content:space-between;gap:var(--L);flex-wrap:wrap}
.site-foot .wm{width:62px}
.site-foot-meta{display:flex;flex-wrap:wrap;gap:var(--half) calc(var(--L)*2);align-items:baseline;
  margin-top:var(--s2);font-family:var(--sans);font-size:13px;line-height:28px;color:var(--i500)}
.site-foot-meta .lab{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;margin-right:6px}
.site-foot-meta a{color:inherit;text-decoration:none;border-bottom:1px solid var(--i200)}
.site-foot-meta a:hover{color:var(--i900);border-bottom-color:var(--i900)}