/* OSMEA — the product drawer.
   ------------------------------------------------------------------------
   Reference material that would otherwise have to interrupt a page: the
   nutrition panel, the ingredients and the comparison, slid in from the right
   over about half the screen. Used by the homepage's bottle panel and by the
   product page.

   ONE implementation, at every width. An earlier pass showed J's exported
   artwork on wide panels and markup on narrow ones, which meant two documents
   saying slightly different things, text that could not be selected or found,
   and a hard breakpoint instead of scaling. The artwork is still the spec --
   docs/reference/drawer-sheet.svg -- but everything here is real type.

   Scaling: the panel is the query container, so the nutrition panel's type is
   set in cqw and tracks the panel's width rather than the viewport's. Note
   that an element declaring container-type resolves its OWN cq units against
   the next container up, so nothing inside here declares one.
   ------------------------------------------------------------------------ */

/* ---------- the trigger ---------- */
.pd__open{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:44px;padding:.5em 1.2em;
  background:var(--paper);color:var(--blue);
  border:1px solid var(--blue);border-radius:10px;
  font:inherit;cursor:pointer;
}
.pd__open::after{content:"\2192";transition:transform .25s ease}
.pd__open:hover::after,.pd__open:focus-visible::after{transform:translateX(.25em)}
/* When the trigger is already one of the page's buttons, .btn owns how it
   looks. .pd__open paints a paper background for the standalone pill on the
   product page; on the tide panel that filled a .btn--line whose text is
   also paper, so the button came out blank. And .btn draws its own arrow. */
.btn.pd__open{background:none}
.btn.pd__open::after{content:none}

/* ---------- the panel ---------- */
.pd__scrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(16,6,159,.85);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.pd.is-open .pd__scrim{opacity:1;visibility:visible}

.pd__panel{
  position:fixed;top:0;right:0;bottom:0;z-index:41;
  width:min(50vw,680px);max-width:100%;
  background:var(--paper);
  border-left:1px solid var(--blue);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),visibility .42s;
  display:flex;flex-direction:column;
  container-type:inline-size;
  /* a scroll that reaches the end of this panel must not chain out to the
     page behind it, which on the product page drives the bottle's rotation */
  overscroll-behavior:contain;
}
.pd__panel:focus{outline:none}   /* it takes focus on open; the ring is not for it */
.pd.is-open .pd__panel{transform:translateX(0);visibility:visible}

/* no title and no rule; the close button sits on its own line above the body
   so it never floats over content scrolling underneath */
/* A bare back arrow at the top left, not a boxed close. It still keeps a 40px
   target for touch; only the box is gone. */
.pd__head{display:flex;justify-content:flex-start;padding:var(--s1) var(--s2) 0}
.pd__close{
  appearance:none;background:none;border:0;padding:0;
  cursor:pointer;color:var(--blue);
  /* drawn, not a text glyph: a glyph carries side bearing inside its box, so
     lining its ink up with the artwork's rule is guesswork. The path starts at
     x=1.5 of 30, so the box sits flush and the stroke lands on the rule. */
  min-width:40px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:flex-start;
  margin-left:-1.5px;
}
.pd__back{display:block;width:30px;height:16px}
.pd__close:hover{opacity:.7}
/* focus moves here when the drawer opens, so the ring is always on show
   for a moment; a tight default square around a bare glyph reads as a
   box the design does not have */
.pd__close:focus-visible{outline:2px solid var(--blue);outline-offset:5px;
  border-radius:10px}

.pd__body{padding:var(--s2);overflow-y:auto;flex:1}
.pd__body>*+*{margin-top:var(--s2)}
.pd__body h3{
  margin:0 0 .6em;font-family:Carentro,Georgia,serif;font-weight:400;
  text-transform:uppercase;font-size:var(--t-body);color:var(--blue);
}
.pd__body p{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--ink)}

/* The faces J's export names, declared under those exact family names so the
   artwork resolves them when it is injected inline. The export asks for
   HelveticaRDCondensed, HelveticaRDCondensed-Bold (so 77, not 67 -- the file
   settles it), HaasGrotDispR-65Medium and Carentro.

   Caveat for a later audit: the Helvetica files carry fsType 0x0004
   ("Preview & Print"), inherited from the base Helvetica. J confirmed the cut
   is his and cleared its use; a scanner will still flag it. */
/* Each family name here maps to exactly one file, and the export asks for
   font-weight 500 and 700 against them. Declared at 400 the browser SYNTHESISES
   the difference -- faking bold on top of an already-bold face -- which widens
   every string and overflows the panel. The range accepts whatever is asked
   and never synthesises. */
@font-face{font-family:HelveticaRDCondensed;src:url(hrdc-400.woff2) format("woff2");
  font-weight:100 900;font-display:block}
@font-face{font-family:"HelveticaRDCondensed-Bold";src:url(hrdc-700.woff2) format("woff2");
  font-weight:100 900;font-display:block}
@font-face{font-family:"HaasGrotDispR-65Medium";src:url(haas-disp-65.woff2) format("woff2");
  font-weight:100 900;font-display:block}
@font-face{font-family:"Carentro-Regular";src:url(carentro.woff2) format("woff2");
  font-weight:100 900;font-display:block}
/* and stop the browser inventing weight inside the artwork */
.pd__sheet svg text,.pd__sheet svg tspan{font-synthesis:none}

/* the markup layer, for narrow panels, uses the same two Helvetica cuts */
@font-face{font-family:HRDC;src:url(hrdc-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HRDC;src:url(hrdc-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- the nutrition panel ---------- */
.pd__nfp{
  /* its own container, so the type below can be set against the panel's
     interior rather than the drawer's. Self-referential values stay in %,
     because an element with container-type resolves its OWN cq units against
     the next container up. */
  container-type:inline-size;
  border:1.5px solid var(--blue);
  padding:2.41%;
  background:var(--paper);
  font-family:HRDC,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:auto;
}
.pd__nfp h3{
  font-family:inherit;font-weight:700;text-transform:none;margin:0;
  font-size:clamp(17px,17.30cqw,56px);line-height:1.02;letter-spacing:0;
  /* the artwork carries a hairline here, measured at 0.30 units */
  padding-bottom:.5cqw;border-bottom:max(1px,.31cqw) solid var(--blue);
}
/* the label sets nutrient NAMES bold and their values regular */
.pd__nfp table{font-weight:400}
.pd__nfp b{font-weight:700}
.pd__serving{
  margin:.34cqw 0 0;color:var(--blue);line-height:1.18;
  font-size:clamp(9px,9.28cqw,30px);
  padding-bottom:.6cqw;border-bottom:max(2px,6.53cqw) solid var(--blue);
}
/* ceiling at 24px: the string measures 11.8x its font-size, so a 324px
   interior (a full-width panel on a phone) wraps it above about 27px */
.pd__serving b{font-size:clamp(8px,8.58cqw,24px);font-weight:700}
.pd__nfp table{
  width:100%;border-collapse:collapse;color:var(--blue);
  /* solved at 8.12cqw off "Total Sugars 3g", but that string is indented in
     the artwork and carries its tracking; at 8.12 "Total Carbohydrate 7g"
     wraps, which it never does on the label. 7.4 fits the longest row. */
  font-size:clamp(9px,7.4cqw,24px);line-height:1.15;
}
/* Row pitch solved from the artwork: its rows sit 9.9 units apart on a
   71.70 interior, mine were 26px against its ~37px, which left the box
   at a 1.896 height/width ratio where the label's is 2.092. */
.pd__nfp td{border-bottom:max(1px,.31cqw) solid var(--blue);padding:1.29cqw 0;
  vertical-align:baseline}
.pd__nfp td:first-child{white-space:nowrap}
.pd__nfp td:last-child{text-align:right;white-space:nowrap}
/* a colspan cell is also a last child, so it would catch that right-align */
.pd__nfp .is-amt td{border-bottom:0;padding-top:.8cqw;text-align:left;
  font-size:clamp(8px,5.9cqw,19px)}
.pd__nfp .is-cal td{border-bottom:max(2px,2.18cqw) solid var(--blue);
  padding-bottom:.2cqw;font-size:clamp(14px,15.4cqw,50px);font-weight:700;line-height:1}
.pd__nfp .is-dv td{font-size:clamp(8px,5.54cqw,18px);padding-top:.3cqw;font-weight:700}
.pd__nfp .is-sub td:first-child{padding-left:4.6cqw}
.pd__nfp .is-last td{border-bottom:max(2px,5.44cqw) solid var(--blue)}
.pd__nfp small{display:block;margin-top:1.1cqw;color:var(--blue);
  font-size:clamp(7px,4.2cqw,13px);line-height:1.3}

/* ---------- ingredients and badges ---------- */
.pd__aside>*+*{margin-top:var(--s2)}
.pd__juice{
  margin-top:.6em!important;
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);
}
.pd__badges{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);justify-items:start}
.pd__badges li{font-size:var(--t-small);color:var(--blue)}

/* Drawn here rather than cut out of the export: the export reflows its own
   coordinates every time it is saved, so an offset into it breaks silently.
   Swap in the real marks whenever they are exported on their own. */
.pd__ico{display:block;width:30px;height:auto;margin-bottom:.35em;color:var(--blue)}
.pd__ico--usa{width:34px}
.pd__ico-knock{stroke:var(--paper)}

/* ---------- the comparison ---------- */
.pd__cmp{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.pd__cmp th,.pd__cmp td{text-align:left;padding:.7em .6em;vertical-align:top;line-height:1.4}
.pd__cmp tbody th{font-weight:600;color:var(--blue)}
/* the brand takes the display face, the benchmark stays in the grotesk */
.pd__cmp thead .is-osmea{
  color:var(--paper);background:var(--blue);padding-block:.55em;
  font-family:Carentro,Georgia,serif;font-size:20px;letter-spacing:.07em;
}
.pd__cmp .is-osmea{color:var(--blue)}
/* The artwork's benchmark column is #999, which measures 2.71:1 on this paper
   where body copy needs 4.5:1. This is 5.07:1 and reads the same weight. */
.pd__cmp thead th:not(.is-osmea),
.pd__cmp tbody td:not(.is-osmea){color:#6b6b6b}
.pd__fn{margin:.9em 0 0;padding-left:1.4em;list-style:decimal;
  font-size:var(--t-small);line-height:1.5;color:#6b6b6b}
.pd__fn li{margin-top:.35em}

/* ---------- narrow panel: one column, and the comparison stops being a table
   Three columns in a 390px panel gives each cell about 110px and wraps
   "Whole-Ingredients: Atlantic Seawater & Coconut Water" onto seven lines, so
   each row becomes a block and the column headings move onto the cells they
   label, carried on data-label. ---------- */
@container (max-width:559px){
  .pd__cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .pd__cmp,.pd__cmp tbody,.pd__cmp tr,.pd__cmp th,.pd__cmp td{display:block;width:auto}
  .pd__cmp tbody tr{border-top:var(--rule);padding-block:var(--s2)}
  .pd__cmp tbody tr:first-child{border-top:0}
  .pd__cmp th,.pd__cmp td{border:0;padding:0}
  .pd__cmp tbody th{
    font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
    font-size:var(--t-body);letter-spacing:.01em;color:var(--blue);margin-bottom:.5em;
  }
  .pd__cmp tbody td{margin-top:.6em}
  .pd__cmp tbody td::before{
    content:attr(data-label);display:block;
    font-size:var(--t-small);color:#6b6b6b;margin-bottom:.1em;
  }
}

/* ---------- the artwork ----------
   Shown at EVERY width. It used to appear only above 580px of panel, with a
   markup rebuild standing in below that, because the artwork's footnotes are
   2.5 units on a 158.74-unit sheet and only clear 9px at about 580. J's call
   is that the two should not be different designs: the desktop one is the
   design, so a phone gets the same sheet, smaller. At a 390px panel the
   footnotes land near 5px, which is about where they sit on the printed
   bottle; the body of the panel stays readable and the page pinch-zooms.

   The markup is CLIPPED rather than removed, so the panel, the ingredients
   and the comparison are still there for a screen reader and a crawler. */
.pd--facts .pd__sheet{display:block}
.pd--source .pd__sheet{display:none}
.pd__sheet svg{display:block;width:100%;height:auto}

/* Floating the button into the artwork's own right margin put it level with
   the artwork's top rule -- the rule ends exactly where the button starts,
   which reads as crammed. It keeps its own band instead, and the artwork
   still sits high because its 17 units of dead artboard are cropped out. */
.pd--facts .pd__body{display:block;padding:var(--s1) var(--s2) var(--s2)}
.pd--facts .pd__nfp,.pd--facts .pd__aside,.pd--facts .pd__compare{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- phones ----------
   THE NUTRITION PANEL IS REBUILT HERE, NOT SHRUNK (J, 2026-10-28).

   Above this width the drawer shows J's artwork, a fixed-layout sheet two
   columns wide: the facts box on the left, the ingredients and the three
   marks stacked down the right. An SVG cannot reflow, so on a phone that
   same sheet is simply scaled down -- which is what put a 170px facts box
   next to two thirds of a column of dead paper, and J marked it "redesign
   this panel".

   So the phone stops using the sheet and uses the markup underneath it,
   which has been in the DOM all along for a screen reader and a crawler
   and is the same panel set in live type. Opt-in, on .pd--stacked: the
   same drawer is on /dev/product-new, which is signed off with the scaled
   sheet, so the page asks for this rather than getting it. One column, in reading order:
   the facts box full width, the ingredients under it, the three marks in
   a row across the foot. Nothing here is a second design -- it is the
   sheet's own content, stacked, which is the only thing the width allows.

   (This is also why the facts box is a container: at full width its type
   resolves against 346px instead of 170 and the label reads at its own
   size rather than at half of it.) */
@media(max-width:760px){
  .pd__panel{width:100%;border-left:0}

  .pd--stacked .pd__sheet{display:none}
  .pd--stacked .pd__nfp,.pd--stacked .pd__aside{
    position:static;width:auto;height:auto;
    overflow:visible;clip:auto;white-space:normal;
  }
  /* The box keeps the proportion it has on the bottle rather than taking
     the width it is offered. Every size inside it is a cqw of its own
     interior, so a full-width box sets "Nutrition Facts" at 60px -- twice
     the printed size and twice the sheet's. Two thirds lands it where the
     artwork had it and leaves the ingredients the full measure below. */
  .pd--stacked .pd__nfp{max-width:62%}
  /* Both of these are solved to fill the measure exactly, and both only
     ever fitted because the clamp's px ceiling shaved the last point off
     them at the one width the sheet was drawn for. Off that width they
     wrap, and a wrapped "Nutrition Facts" is not the panel. Three per cent
     of slack, which is below the eye and above the rounding. */
  .pd--stacked .pd__nfp h3{font-size:clamp(17px,16.5cqw,56px)}
  .pd--stacked .pd__serving b{font-size:clamp(8px,8.2cqw,24px)}
  /* on the bottle this is a grey whisper under the ingredient line; at the
     body face's own weight it reads as a second claim */
  .pd--stacked .pd__juice{font-size:10px}
  /* three across the foot, each mark over its own name. justify-items
     stays start so the row reads as three items and not as a justified
     band, and the names are allowed the two lines the longest one needs. */
  /* align-items:end rather than the grid's default stretch: the three
     marks are not the same height (the flag is 20 units to the others'
     24), so left to themselves the names sit on three different lines. */
  .pd--stacked .pd__badges{
    grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;
    /* J, 2026-10-28: "lets add some space and a line between 'contains'
       and the icons". The marks are a third thing, not the tail of the
       ingredient statement, and stacked they were reading as one block
       with it. Same rule weight and colour as the table's. */
    margin-top:var(--s2);padding-top:var(--s2);
    border-top:1px solid rgba(16,6,159,.24);
  }
  .pd--stacked .pd__badges li{font-size:12px;line-height:1.3}
}


/* ---------- the tide film and its scrub ----------
   The frame can be dragged too, but the bar below it is the control: it says
   which way the tide runs and where you are in it. pan-y on both leaves a
   vertical swipe to the drawer. */
.pd__film{margin:0}
.pd__filmwrap{
  position:relative;display:block;cursor:ew-resize;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.pd__filmwrap video{
  display:block;width:100%;height:auto;aspect-ratio:960/816;
  object-fit:cover;background:var(--blue);pointer-events:none;
}
.pd__filmwrap.is-scrubbing{cursor:grabbing}

.pd__scrub{display:flex;align-items:center;gap:.9em;margin-top:.9em}
.pd__scrub-end{
  flex:none;font-family:Carentro,Georgia,serif;text-transform:uppercase;
  font-size:var(--t-small);letter-spacing:.05em;color:var(--blue);
  white-space:nowrap;
}
.pd__scrub-bar{
  position:relative;flex:1;height:22px;cursor:ew-resize;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
/* the rail is a pseudo-element so the hit area stays 22px while the line
   itself stays a hairline */
.pd__scrub-bar::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  transform:translateY(-50%);background:var(--blue);opacity:.3;
}
.pd__scrub-fill{
  position:absolute;left:0;top:50%;height:1px;width:0;
  transform:translateY(-50%);background:var(--blue);
}
.pd__scrub-dot{
  position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--blue);
}
.pd__scrub-bar:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.pd__scrub-bar.is-scrubbing{cursor:grabbing}

/* ---------- the source drawer ----------
   Set as a piece of writing rather than a stack of blocks: an opening with
   its standfirst, the film breaking the margin, then movements separated by
   a rule and a lot of air. The measure is held at 62ch even though the panel
   is wider, because that is what makes it read like a page.

   The vertical rhythm is in cqw, so it opens up with the panel instead of
   staying at whatever the page's --s scale happens to be. The site's steps
   are tuned to full-bleed sections and read cramped against type this size
   in a column this narrow. */
.pd--source .pd__body{
  padding-top:clamp(26px,5cqw,48px);
  padding-bottom:clamp(56px,11cqw,104px);
}
.pd--source .pd__body>*+*{margin-top:0}

.src__eyebrow{
  font-size:12px!important;text-transform:uppercase;letter-spacing:.14em;
  color:#6b6b6b!important;margin:0 0 1.6em!important;
}
.src__open{padding-bottom:clamp(34px,6.5cqw,60px)}
.src__title{
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  /* against the PANEL, not the viewport: --t-display is 7.6vw and resolved to
     109px inside a 632px drawer */
  font-size:clamp(30px,8.6cqw,58px);line-height:1;letter-spacing:.005em;
  color:var(--blue);margin:0 0 .55em;text-wrap:balance;
}
.src__stand{
  font-size:var(--t-lead)!important;line-height:1.4!important;
  color:var(--blue)!important;max-width:30ch;
}

/* the film breaks the margin; its controls come back to the measure */
.src__film{margin:0 calc(-1 * var(--s2))}
.src__filmfoot{padding:0 var(--s2)}
.pd--source .pd__scrub{margin-top:1.2em}

/* Scoped to beat `.pd--source .pd__body>*+*{margin-top:0}`, which is (0,2,0)
   and was quietly discarding every bit of space above these rules -- so the
   rule sat hard against the paragraph before it and floated away from the
   eyebrow it introduces. The rule belongs to the section it opens, so the
   space above it is the break and the space below is a lead-in, not the
   other way round. */
.pd--source .src__mv{
  border-top:var(--rule);
  margin-top:clamp(50px,9.5cqw,88px);
  padding-top:clamp(16px,3.4cqw,28px);
}
.src__mv h3{
  font-family:Carentro,Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,5.2cqw,38px);line-height:1.06;color:var(--blue);
  margin:0 0 .8em;max-width:18ch;text-wrap:balance;
}
.src__mv p{
  font-size:var(--t-body);line-height:1.7;color:var(--ink);
  max-width:62ch;margin:0;
}
.src__mv p+p{margin-top:1.4em}


/* ---------- the harvest photograph ----------
   Full bleed across the panel, on the same negative margin the film uses --
   the drawer has one way of showing a picture and this is it. It closes the
   drawer, under the founder's note, so it needs a full section break above
   it and nothing below: `.pd__body`'s own bottom padding is the end of the
   document. (0,2,0) to clear `.pd--source .pd__body>*+*{margin-top:0}`,
   which would discard that margin silently -- the same trick
   `.pd--source .src__mv` uses. */
.pd--source .src__shot{
  margin:clamp(50px,9.5cqw,88px) calc(-1 * var(--s2)) 0;
}
.pd--source .src__shot img{display:block;width:100%;height:auto}
/* the picture breaks the margin; its caption comes back to the measure,
   exactly as the film's controls do two rules above */
.pd--source .src__shot figcaption{
  padding:1.1em var(--s2) 0;
  line-height:1.45;color:#6b6b6b;
  /* No measure on this one: it is a single credit line and it has to sit on
     one. 44ch was breaking it after "the source off the".
     Sized against the PANEL rather than the viewport, the way the rest of
     this drawer is, so it keeps to one line as the panel narrows instead of
     only at full width -- 14px in a 680px panel, 11px in a 512px one, where
     a fixed 14 would have wrapped. Below that it is a phone, the panel is
     the screen, and it takes two lines; the alternative is type under 10px,
     which is worse than a wrap. */
  font-size:clamp(11px,2.1cqw,14px);
  text-wrap:pretty;
}

/* ---------- the arrow in the founder heading ----------
   Neither Carentro nor Haas has U+2192 -- both cmaps checked -- so a →
   in this heading is drawn by whatever the system falls back to, in a face
   that is not the brand's. That is why it never matched the back arrow at
   the top of the drawer, which is drawn.

   So it is the same drawing, mirrored: the same 30x16 box, the same path
   shape, the same square caps and mitred joins, and the same 1.5px stroke
   -- non-scaling, so the two read at one weight however large the heading
   gets. Sized just under a capital and nudged up to the optical centre of
   the caps, which sits above `vertical-align:middle` (that aligns to half
   the x-height, and this line has no lowercase in it).

   It carries aria-label="to", so the heading still reads as a sentence. */
.src__arrow{
  display:inline-block;width:.92em;height:calc(.92em * 16 / 30);
  vertical-align:baseline;transform:translateY(-.26em);
  overflow:visible;
}

/* The note's signature was here. It has gone: the caption under the
   photograph below names him, and the two sat four lines apart.
   ("Whole foods" is still held together with a non-breaking space, so the
   heading's 18ch measure breaks the line after the arrow, not before it.) */

/* ---------- the four ingredients (.pd--method) ----------
   The homepage's ingredient band, inside a drawer. The markup reuses the
   band's own .u-method__ classes so the 3/5 crop and the measure come from
   union.css and cannot drift from /; what is left here is only the things
   the drawer itself would otherwise impose on it.

   Two columns always, not at a viewport width: the panel is min(50vw,680px)
   on a desktop, so the band's four-up would be four thumbnails however wide
   the window is. Two is what the band itself falls to on a phone, which is
   the shape J pointed at. */
.pd--method .mth__images{
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:var(--s2);
  /* its own head-to-band gap, over .pd__body>*+*'s --s2 */
  margin-top:var(--s3);
}
/* .pd__body h3 is the sheet's heading -- Carentro, uppercase -- and these
   are the band's ingredient names, which are the body face in sentence
   case. Same specificity, and drawer.css loads after union.css, so the
   band's own rule cannot win on its own. */
.pd--method .mth__images h3{
  font-family:inherit;text-transform:none;
  font-size:var(--t-body);font-weight:400;letter-spacing:.01em;
  color:var(--blue);margin:0 0 var(--s1);
}
.pd--method .mth__images figcaption p{color:var(--ink);line-height:1.5}
/* The gutter is NOT widened for the panel. It was, and it should not have
   been: the band's own near-edge-to-edge gap is what makes four pictures
   read as one strip, and J asked for this to match what is live, not to be
   improved on the way through. The captions sit close for the same reason
   they do on /. */
.pd--method .mth__head{margin:0}