/** Shopify CDN: Minification failed

Line 217:2 Unexpected "}"

**/
/* Copied from prototype/terms.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);
  }
  /* Since the big title went, 22-10-2026: the heading keeps its own 40. */
  .run { margin-bottom: 0; }
  /* The FAQ's heading: caps-lg, centred, 40px above, 18px to the first rule. */
  .page-head { margin: 40px 0 0; padding: 0 0 18px; text-align: center; font-weight: 500; }
  .page-head + .cols { margin-top: 0; }

  /* 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. */
  /* ---- WE / ARE / ODAKA -------------------------------------------------
     Moved here from the story page on 17 Sep 2026, David: the window takes its
     place there, and this title is too good to lose. It was built for that
     page over 15 and 16 Sep - the merged outlines, the rows measured to touch,
     the ink wandering under the pointer - and everything about it is measured
     off the face at runtime, so it needed no adjusting to sit on a different
     sheet. The <h1> it replaced said ODAKAHOME, like the other sheets.
     ---------------------------------------------------------------------- */
  .title { margin: 0; }
  /* The words are an SVG now, which is what lets them fill the measure at every
     width with no clamp at all: a viewBox scales to whatever box it is given,
     so one drawing serves a 375px phone and a 1600px monitor. The height is
     written on by the script once it has measured the face. */
  .title-ink {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    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;
    touch-action: manipulation;
  }
  /* The outline is the resting state; the fill is what the brush uncovers.

     ONE PIXEL, at every size and on every screen. David, 15 Sep 2026: "make
     outlines the thinnest they can be on each screen, 1px if possible."
     `non-scaling-stroke` is what makes that possible: the stage is 1000 units
     wide and scales to whatever box it is given, so a stroke measured in those
     units would be four times heavier on a monitor than on a phone. This one is
     measured on the screen instead, after the scaling, so 1 means 1 wherever it
     is read. It is also why the width is not written by the script: there is
     nothing left for it to compute. */
  /* What was taken from Web Effects/Ink Reveal is the TECHNIQUE and not the
     palette: the word set twice, once as a hairline with no fill and once
     filled behind the brush's mask. David, 16 Sep 2026: "don't match the ink."
     So the stroke is the site's own --ink at full strength.

     ⚠️ The outline is PATHS, not text, and that is the whole difference between
     this and a construction drawing. Instrument Sans builds each letter out of
     overlapping pieces - an E is a stem plus three arms, each its own closed
     rectangle lying across the stem. Filled you never see it; stroked, every
     piece is drawn and the stem's edge rules straight through all three arms.
     `-webkit-text-stroke` does exactly the same thing for exactly the same
     reason, so it is no escape. tools/build-wordmark.py merges the pieces into
     one outline per letter, counters kept, and those are what get stroked. */
  .title-ink .ti-measure { visibility: hidden; }
  .title-ink .ti-outline path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    /* not inherited, so it belongs on the drawn element: on the group it did
       nothing and the stroke stayed 1 STAGE unit, a third of a pixel here and a
       different weight on every screen */
    vector-effect: non-scaling-stroke;
  }
  .title-ink .ti-fill { fill: var(--ink); stroke: none; }

  /* 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; }

  .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 policy itself ------------------------------------------------
     The FAQ's numbered list with the numbers taken off: a hairline over the
     first section and under every one, the heading at the question's size and
     the prose at the answer's. So Terms, Privacy and FAQ are one kind of page
     rather than three, and a policy reads as a list of short answers, which is
     what a buyer actually wants from one. 46em is the FAQ's measure too. */
  .pol { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 46em; }
  .pol li { padding: 24px 0 18px; border-bottom: 1px solid var(--rule); }
  .pol h2 { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; }
  .pol p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; letter-spacing: 0.01em; color: var(--ink-soft); }
  .pol a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
  /* The date the policy last changed, under the last rule rather than in the
     table at the top: it is the kind of fact you look for when you have
     finished reading. */
  .pol-date { margin: 18px 0 0; color: var(--ink-soft); }

  /* 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. */
  .two-up {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10px;
  }
  .two-up img, .two-up .field {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .two-up .field { background: var(--clay); }

  /* 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; }

  @media (min-width: 700px) {
    .cols > .spec { grid-column: span 3; }
    .cols > .copy { grid-column: span 5; }
  }
  @media (min-width: 1024px) {
    /* An empty column each side, as Our Story, David 25-10-2026: the table
       from the 2nd column, the prose to the end of the 11th, where it is
       about the 34em it was capped at, so the cap goes. */
    .cols > .spec { grid-column: 2 / span 4; }
    .cols > .copy { grid-column: 6 / span 6; max-width: none; }
    /* The policy below on columns 2 to 8, one column as before, David
       25-10-2026: 700px at 1280, near the 46em it had. It is no grid's
       child, so a column is worked out from the width the grid splits. */
    .pol, .pol-date { --col: calc((100% - 11 * var(--gap)) / 12); margin-left: calc(var(--col) + var(--gap)); }
    .pol { width: calc(7 * var(--col) + 6 * var(--gap)); max-width: none; }
  }
    .person { padding-left: 40px; padding-right: 40px; }
    .person:first-child { border-right: 1px solid var(--rule); }
  }