/** Shopify CDN: Minification failed

Line 200:2 Unexpected "}"

**/
/* Copied from prototype/shipping.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 boxes, edge to edge and flush under the bar: the 26px the sheet keeps
     under the bar taken back, the sides out of the gutters and the 1280 page,
     less the scrollbar (--sbw). No background since 22-10-2026, David's ask:
     transparent webp from Astra's -clear files, the empty top trimmed to 60px
     of air, so the boxes and their see-through shadows sit on the page's own
     paper. */
  .ship-art {
    /* 29 below: the 44 it was less half a table row (29.5), David 22-10-2026. */
    margin: 0 calc(50% - (100vw - var(--sbw, 0px)) / 2) 29px;
  }
  /* A fifth of the picture's own height above it, then "a tiny bit more",
     22.5%, David 22-10-2026. A margin
     in % is a share of the WIDTH, so it is the fifth times each file's
     height/width: 685/1200 on a phone, 693/1400 from 700px. */
  .ship-art img { display: block; width: 100%; height: auto; margin-top: calc(22.5% * 685 / 1200); }
  @media (min-width: 700px) { .ship-art img { margin-top: calc(22.5% * 693 / 1400); } }
  /* It stops growing at 1024px, David 24-10-2026: edge to edge it reached 1730 on his
     screen. Centred, and the space above it stops with it, so the gap stays the same
     share of the picture (a percentage margin is a share of the window, not the picture). */
  /* 0.8 of that since 25-10-2026, David: "the largest photo of the shipping
     packages on desktop should be smaller". 819px, and the space above it
     follows the picture's width, whichever is smaller, window or cap. */
  .ship-art img { max-width: 819px; margin-left: auto; margin-right: auto; }
  @media (min-width: 700px) { .ship-art img { margin-top: calc(min(100%, 819px) * 0.225 * 693 / 1400); } }
  /* The run-head back in its place under the bar, as on every page, and the
     boxes straight after it, David 22-10-2026: they sat too high, and now end
     at about 300px down on a phone. No drop after the run-head: the picture
     is the air. */
  .run:has(+ .ship-art) { margin: 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; }

  .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); }
  }