/** Shopify CDN: Minification failed

Line 322:2 Unexpected "}"

**/
/* Copied from prototype/faq.html by tools/port-page.py. */
/* The page as a museum sheet, after the Rijksmuseum poster David sent on
     22 Aug 2026. Five things carry it, and they are all things this site already
     does rather than a new language:

       1  a tiny caps run-head, the same type as the bar and the footer
       2  a long empty drop, so the sheet begins low and the eye falls into it
       3  the name enormous and lowercase, with a smaller bold word on its
          baseline - type at two extremes, which is the house rule already
       4  a ruled specification table, which is the footer ledger and the
          Explore grid by another name
       5  a photograph beside a field of flat colour

     It replaces a centred 34em reading column. The copy keeps a measure of its
     own, because prose still needs one; the sheet around it does not. */

  .sheet {
    /* The run-head sits just under the bar, the way it sits at the very top of
       the poster's sheet. The emptiness belongs BELOW it, not above: putting it
       in both places, which the first pass did, spends two screens of nothing
       before the name and reads as a loading error rather than as air. */
    padding: calc(var(--bar) + 26px) var(--gutter) 0;
  }

  /* The run-head. Date and place on the poster; place and year here, which are
     the two facts the studio leads with everywhere else. */
  .run {
    display: flex;
    gap: 40px;
    color: var(--ink-soft);
    /* The drop, and the only one. Bounded at both ends so a short phone does not
       lose the name below the fold and a tall desktop does not open on nothing. */
    margin: 0 0 clamp(150px, 40svh, 340px);
  }

  /* The name, enormous and lowercase. Tight tracking because at this size the
     default spacing reads as gappy, and the negative figure is what makes it a
     mass rather than a row of letters. */
  .title {
    margin: 0;
    font-size: clamp(52px, 17vw, 132px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    font-weight: 700;
    /* Capitals, David 22 Aug 2026. The Rijksmuseum sheet sets its name lowercase
       and this followed it; the studio's own wordmark is capitals everywhere
       else on the site, and the two were disagreeing. */
    text-transform: uppercase;
  }
  /* The second word sits on the same baseline at about a quarter the size, the
     way the poster sets the surname against the given name. */
  .title span {
    font-size: 0.26em;
    letter-spacing: -0.01em;
    margin-left: 0.12em;
  }

  /* The two columns under the name. One on a phone: the table, then the prose. */
  /* On the grid, 11 Sep 2026, as About: the table three of eight then five
     of twelve, the prose the rest; the sheet's side padding the page gutter. */
  .cols { row-gap: 30px; margin-top: 26px; }
  .cols > * { grid-column: span 4; }

  /* The specification table. Hairline over every row and under the last, label
     left and value right, which is exactly the footer's ledger at a smaller
     size. Values are facts the studio already states elsewhere, not new copy. */
  .spec { margin: 0; border-top: 1px solid var(--rule); }
  .spec .row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rule);
  }
  .spec dt { margin: 0; }
  .spec dd { margin: 0; color: var(--ink-soft); text-align: right; }
  /* The model names in the drinks table go to their pages, David, 16 Sep 2026.
     Ink rather than soft, and a hairline under, so they read as links. */
  .spec dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  /* The volumes start on one line, David, 16 Sep 2026: "all the volume numbers
     ... to start on the same alignment". It was about 312px on a phone until
     the ounces arrived and pushed the column left. */
  .spec .vol { display: inline-block; margin-left: 0.6em; text-align: left; white-space: nowrap; }
  .spec dd { white-space: nowrap; }
  /* And "ml" on its own line too, David, the same day: the figure sits in a
     box of a fixed width, so the unit starts in the same place whatever the
     digits are. The width is the widest figure's ink and tracking, measured. */
  /* And ounces beside them, David, the same day, to a tenth. Each piece of
     the figure sits in a box its widest content wide plus a space, measured
     at the site's 10px caps, so the millilitres, "ml /", the ounces and "oz"
     each start on one line down the table: "300" 24.9, "ml /" 28.5, "10.0"
     26.0, and a space 3.8. Reword or resize the caps and these want
     measuring again. */
  .spec .num, .spec .u { display: inline-block; }
  .spec .num { width: 28.7px; }
  .spec .u { width: 32.3px; }
  .spec .num.oz { width: 29.8px; }

  .copy { max-width: 34em; }
  /* The prose, quiet: 13px, the line height opened, a hair of tracking and
     the soft ink, so it sits beside the table as a note rather than an
     article. David, 11 Sep 2026, on the 16px it was: "too big and not so
     odaka". Proposed with the face and kept once the face was chosen. */
  .copy p { margin: 0 0 18px; font-size: 13px; line-height: 1.8; letter-spacing: 0.01em; color: var(--ink-soft); }
  .copy p:last-child { margin-bottom: 0; }

  /* The section label, bold and lowercase, the poster's "the menagerie". */
  .sub {
    margin: 40px 0 12px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: lowercase;
  }

  /* A photograph beside a field of flat colour. The field is --clay, the
     studio's own colour, which base.css keeps precisely so there is something
     true to judge the rest against. Inventing a red for it would have been the
     one wrong move here. The photograph is the narrower of the two, as it is on
     the poster. */
  /* David, 16 Sep 2026: one photograph, spread. The field of clay and the
     narrow portrait beside it are gone; the picture takes the whole sheet.

     16/9 is the LOU photograph's own proportion (2000x1116 is 1.79), so it is
     shown as it was shot and object-fit crops nothing at any width. Give this
     block a picture of another shape and the ratio is what wants changing,
     not the crop. */
  /* The span belongs on the figure: .spread carries on-grid, so it is the
     grid CONTAINER and the figure is the item. Put 1 / -1 on the wrapper
     instead and the photograph comes out one column wide. */
  .spread-fig {
    grid-column: 1 / -1;
    position: relative;
    margin: 0;
  }
  /* Edge to edge and flush under the bar, David 22-10-2026: "make the faq
     illustration fill the sides, with no margins and even begin under the
     header". The 26px the sheet keeps under the bar is taken back, and the
     sides break out of the gutters and, on a desktop, out of the 1280 page
     too: 50% - 50vw is the distance from the sheet's edge to the window's.
     ⚠️ 100vw counts a desktop's visible scrollbar, so on its own it hung
     7px past both edges and scrolled sideways at 1600; --sbw, the
     scrollbar's width, is measured by the script at the foot and taken off. */
  /* And behind the header since the same day, "maybe we should try that":
     the drawing starts at the top of the window, the bar goes white over it
     the way it does over the home page's hero, and turns back to paper once
     the drawing's foot passes under it (the script at the foot). */
  .spread {
    margin-top: calc(-1 * (var(--bar) + 26px));
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  }
  /* David, 18 Oct 2026: the TOMMA FAQ drawing (Drawings/Projects/
     Cups and Coffee/tomma-portfolio-astra, round 6) in place of 60B. It is landscape,
     1376x768, so the ratio is 43/24 and the block is full width at every size
     again, as the LOU photograph was. 60B was portrait at 5/7 and took half the
     grid from 700px; that rule went with it. */
  .spread-fig img {
    display: block;
    width: 100%;
    aspect-ratio: 43 / 24;
    object-fit: cover;
    height: auto; /* the img carries width and height for Shopify's checker */
  }
  /* Taller on a phone, David 22-10-2026: "we can crop it from right on
     phone... to have bigger view", then "i want most of the bowl with the
     cookies to be seen", then "cut from the right, and cut 1/3 of the cookie
     plate... not from the left". The drawing is 1376x768 and the bowl runs
     from x 967 to 1252 (measured off the file); its right third off leaves
     x 0 to 1157, so the box is 1157/768, held to the left edge, and the cut
     is the same at every phone width. About 250px tall on a 375 screen, where
     the full drawing was a 210px strip. Then framed in Crop the same day
     (Crop/crops.json): the same full-height window, 2.3% in from the left,
     which is 14.7% as object-position. */
  @media (max-width: 699px) {
    .spread-fig img { aspect-ratio: 1157 / 768; object-position: 14.7% center; }
  }

  /* ---- FAQ, over the photograph ----------------------------------------
     The story page's title, with the two changes David asked for on 16 Sep
     2026. The ink is WHITE, because this one lies on a photograph rather than
     on paper. And the letters are transparent: at rest the only thing drawn is
     the hairline and the picture shows through the letters themselves, until a
     pointer arrives and the cloud brush inks them in.

     ⚠️ The size is deliberately NOT written here. The script sets it from a
     hidden ODAKA measured the same way the story page measures its own, so a
     capital on this page is exactly as tall as a capital on that one at every
     width. Type a figure in instead and the two pages drift apart the first
     time the face, the weight or the gutter changes.

     The title sits at the foot of the picture, its ink flush with the left
     edge as the story page's words are flush with the sheet's, and the stage is
     as tall as the letters actually are - the Q's tail included, which is
     measured off the drawn outline rather than assumed. */
  .title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  .title-ink {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-transform: uppercase;
    touch-action: manipulation;
  }
  .title-ink .ti-measure { visibility: hidden; }
  /* David, 16 Sep 2026: "no need for the letters outline." So at rest nothing
     at all is painted - the word is not there until the brush finds it. That is
     what transparent means on this page, and it is the difference from the
     story page, which keeps its hairline.

     ⚠️ The merged outlines are still DRAWN here, unpainted, and they are not
     dead weight: the stage's height is measured off them. The Q's tail has to
     fall inside the mask or it is never inked, and a text element's getBBox
     cannot say where it ends - that answers with the em box, ascender to
     descender, rather than the ink. tools/build-wordmark.py is what makes them
     one path per letter; F and Q were added to it for this page, and the union
     still matters the day the outline is wanted back. */
  .title-ink .ti-outline path { fill: none; stroke: none; }
  /* David, 16 Sep 2026: ten per cent transparent where the ink is at full
     strength. It goes on the FILL, not into the brush's gradient or the
     filter's threshold: those two shape the torn edge, and thinning them would
     eat the tear rather than the colour. fill-opacity multiplies whatever the
     mask lets through, so the solid core lands at 0.9 and every softer part of
     the cloud stays in proportion to it. */
  .title-ink .ti-fill { fill: #fff; fill-opacity: 0.9; stroke: none; }

  /* The people, in the footer's own ruled cells. */
  .people {
    display: grid;
    grid-template-columns: 1fr;
    margin: 44px calc(var(--gutter) * -1) 0;
    border-top: 1px solid var(--rule);
  }
  .person {
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .person .role { color: var(--ink-soft); }

  .about-end { height: 48px; }

  /* ---- the questions, as on uaq.html ----
     Copied rather than shared because the two pages are the only users and a
     new stylesheet for eight rules is more to keep than it saves. Change one,
     change the other. The drinks table keeps its own .spec rules above. */
  /* As wide as the questions, so on a desktop FAQ centres over them rather
     than over the page: the list stops at 46rem (it said 46em, the same
     736px at its 16px; rem so the 12px heading can share the figure). */
  .faq-head { margin: 40px 0 0; padding: 0 0 18px; text-align: center; font-weight: 500; max-width: 46rem; }
  .faq-head + .uaq { margin-top: 0; }
  /* A link in an answer's words: the paragraph's own color and a 1px line,
     the site's underline since 22-10-2026. Until then these fell through to
     the browser's blue, the 07 email included. The cups in 01's table keep
     their own style; they are not in a p. */
  .uaq .a > p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .uaq .a > p a:active { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .uaq .a > p a:hover { color: var(--ink); } }
  .uaq { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 46rem; }
  /* The number moved off the left so the text takes the full width. David,
     16 Sep 2026: "maybe above the paragraph, maybe on the right down corner".
     The corner won, the way the shop tiles carry their 001 bottom right.
     The rule under each number sits close to it and well clear of the next
     question, so a number reads as the foot of its own answer: David, the
     same day. */
  .uaq li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 0 6px;
    border-bottom: 1px solid var(--rule);
  }
  .uaq .n { order: 3; align-self: flex-end; margin-top: 8px; color: var(--ink-soft); }
  .uaq .q { margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -0.005em; }
  .uaq .a { margin: 8px 0 0; }
  .uaq .a p { margin: 0; font-size: 13px; line-height: 1.8; letter-spacing: 0.01em; color: var(--ink-soft); }
  .uaq .a .spec { margin: 12px 0; max-width: 360px; }

  /* The only way into the unfrequently asked questions. David, 16 Sep 2026:
     not in the footer, "only reachable through a button on the FAQ". A quiet
     caps link under the last answer, ruled like the table, so it is found by
     whoever read to the end. */
  .uaq-link {
    display: inline-block;
    margin-top: 30px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
  }

  @media (min-width: 700px) {
    .cols > .spec { grid-column: span 3; }
    .cols > .copy { grid-column: span 5; }
  }
  @media (min-width: 1024px) {
    .cols > .spec { grid-column: span 5; }
    .cols > .copy { grid-column: span 7; }
  }
    .person { padding-left: 40px; padding-right: 40px; }
    .person:first-child { border-right: 1px solid var(--rule); }
  }