/* OSMEA — home, v3.
   One grid, one type scale, one spacing scale. Everything below the hero is
   placed on the same twelve columns, on paper and over photography alike:
   the heading always sits in columns 1–7, its support always in 8–12. The
   variety comes from format and surface — film, paper, portrait, blue —
   never from moving the type around.
   Palette: paper #FCF9F2 · Blue 072C #10069F · ink #222.
   Sea-glass #BBCDCC is a brand color but is pulled as a SURFACE for now —
   it read as jarring green against the paper. */

@font-face{font-family:Haas;src:url(haas.otf);font-display:swap}
@font-face{font-family:Carentro;src:url(carentro.woff2) format("woff2");font-display:swap}

:root{
  --paper:#fcf9f2;
  --glass:#bbcdcc;      /* brand color; not used as a surface at present */
  --blue:#10069f;
  --ink:#222222;
  /* Not part of the brand palette. The one red on the site: a form that will
     not submit, and anything on a page that is not ready to publish. */
  --flag:#b3261e;

  /* ---- grid ---- */
  --gut:clamp(20px,3.4vw,56px);
  --colgap:clamp(12px,1.6vw,28px);
  --hairline:1px solid rgba(16,6,159,.24);

  /* ---- type scale: four steps, no per-section sizes ---- */
  --t-display:clamp(52px,7.6vw,128px);  /* the close, once */
  --t-title:clamp(32px,3.6vw,60px);     /* every section head */
  --t-lead:clamp(19px,1.5vw,24px);      /* the support paragraph */
  --t-body:17px;
  --t-small:14px;
  --t-micro:11px;

  /* ---- spacing scale ---- */
  --s1:clamp(10px,1.2vh,16px);
  --s2:clamp(20px,2.6vh,36px);
  --s3:clamp(40px,5.4vh,72px);
  --s4:clamp(72px,10vh,124px);
  --s5:clamp(110px,16vh,210px);

  /* ---- motion: one ease, one duration scale ---- */
  --e:cubic-bezier(.19,1,.22,1);
  --d1:.9s;   /* text */
  --d2:1.4s;  /* imagery */
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--blue);
  font:var(--t-body)/1.55 Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* No -webkit-font-smoothing:antialiased. It thins strokes on macOS, and
     the only Haas cut here is a DISPLAY face ("Haas Grot Disp R 55 Roman"),
     which at body sizes then reads as a light. Subpixel is the default and
     renders it at the weight it was drawn. */

  /* There was an overflow-x:clip here. It was doing no work -- measured on
     all three launch pages at 390, the document is 390 wide with it and 390
     wide without it, because the two things that sit outside the viewport
     (the closed drawer panel and the hero film) are position:fixed or
     already inside an overflow:hidden parent, and neither contributes
     scrollable overflow.

     It was doing harm. overflow-x on the body is a long-standing iOS Safari
     hazard for position:fixed descendants: the pinned nav was landing ~50px
     down the screen with the page running through the strip above it, which
     no amount of padding or pseudo-element on the bar itself could cover.
     If horizontal overflow ever reappears, clip the element that causes it,
     not the body. */
}
img,video{display:block;width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
button,input{font:inherit;border-radius:0}
section{position:relative}

/* film grain on the paper — depth without noise */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{position:fixed;left:12px;top:-100px;z-index:50;background:var(--paper);color:var(--blue);padding:10px 14px;border:1px solid var(--blue)}
.skip:focus{top:12px}

/* ---------- the grid ----------
   One declaration. Sections are transparent to it: a full-bleed photograph
   and a sheet of paper hang their type on exactly the same columns. */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  /* in landscape the notch eats into the side; the gutter takes whichever
     is larger. 0 elsewhere, so this is --gut on every other platform. */
  padding-inline:max(var(--gut),env(safe-area-inset-left,0px))
                 max(var(--gut),env(safe-area-inset-right,0px));
}
.grid>*{min-width:0}
/* the two invariant measures */
.col-head{grid-column:1/8}
.col-body{grid-column:8/13}
.col-full{grid-column:1/13}
/* a nested row that re-uses the same twelve tracks */
.subgrid{
  grid-column:1/13;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);
}

/* ---------- type ---------- */
.voice{
  font-family:Carentro,Georgia,serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;text-wrap:balance;
}
.display{font-size:var(--t-display);line-height:.94;letter-spacing:-.02em}
.title{font-size:var(--t-title);line-height:1.02;letter-spacing:-.015em}
.lead{font-size:var(--t-lead);line-height:1.45;text-wrap:pretty}
.small{font-size:var(--t-small);line-height:1.55}
.fine{font-size:12px;letter-spacing:.02em}
.micro{
  font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;line-height:1.4;
}
.arrow-link{
  display:inline-block;font-size:var(--t-small);letter-spacing:.02em;padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;
  transition:background-size .6s var(--e);
}
.arrow-link:hover{text-decoration:none;background-size:0% 1px}

/* ---------- motion system ---------- */
[data-plx]{will-change:transform}
.motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--d1) var(--e),transform var(--d1) var(--e)}
.motion img[data-reveal],.motion [data-reveal].fig{transform:translateY(34px) scale(1.03);transition-duration:var(--d2),var(--d2)}
.motion [data-reveal].in{opacity:1;transform:none}

.motion [data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.motion [data-split] .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--e)}
.motion [data-split].in .w>span{transform:none}

/* hero copy eases up as the orb finishes opening */
.orb-on .orb-pin .hero-copy{transform:translateY(calc((1 - var(--copy,0))*34px))}

/* ---------- header over the hero ---------- */
/* padding-top carries the status bar. With viewport-fit=cover the page --
   and a fixed header with it -- reaches the physical top of the screen, and
   env(safe-area-inset-top) is the height to keep clear. The bar's own
   background then covers that strip, which is the whole point: a
   pseudo-element hung above a fixed element is clipped away on iOS, so the
   cover has to come from the element's own box.
   env() is 0 on every other platform, so these all reduce to the old
   values. */
header{
  position:absolute;top:0;left:0;right:0;z-index:10;color:#fff;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut) 22px;
}
.brand{font-family:Carentro,Georgia,serif;font-size:22px;letter-spacing:.1em}
.nav-links{display:flex;gap:clamp(16px,3vw,44px);font-size:var(--t-small)}
.nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}

/* ---------- orb opening, ported from the original landing ----------
   Default (no JS / reduced motion): the orb stage is hidden and the hero
   shows the sea at rest. With .orb-on, the pin holds while the orb's radius
   is repainted outward until it owns the screen, then the sea surfaces. */
:root{
  /* Gaussian falloff sampled off the original artboards — Klein blue */
  --orb-stops:
    rgba(0,47,167,1.0000) 0.0%, rgba(0,47,167,0.9966) 2.5%, rgba(0,47,167,0.9863) 5.0%,
    rgba(0,47,167,0.9694) 7.5%, rgba(0,47,167,0.9463) 10.0%, rgba(0,47,167,0.9174) 12.5%,
    rgba(0,47,167,0.8832) 15.0%, rgba(0,47,167,0.8445) 17.5%, rgba(0,47,167,0.8019) 20.0%,
    rgba(0,47,167,0.7562) 22.5%, rgba(0,47,167,0.7082) 25.0%, rgba(0,47,167,0.6587) 27.5%,
    rgba(0,47,167,0.6085) 30.0%, rgba(0,47,167,0.5582) 32.5%, rgba(0,47,167,0.5085) 35.0%,
    rgba(0,47,167,0.4601) 37.5%, rgba(0,47,167,0.4135) 40.0%, rgba(0,47,167,0.3690) 42.5%,
    rgba(0,47,167,0.3270) 45.0%, rgba(0,47,167,0.2878) 47.5%, rgba(0,47,167,0.2516) 50.0%,
    rgba(0,47,167,0.2184) 52.5%, rgba(0,47,167,0.1883) 55.0%, rgba(0,47,167,0.1612) 57.5%,
    rgba(0,47,167,0.1371) 60.0%, rgba(0,47,167,0.1158) 62.5%, rgba(0,47,167,0.0971) 65.0%,
    rgba(0,47,167,0.0809) 67.5%, rgba(0,47,167,0.0669) 70.0%, rgba(0,47,167,0.0549) 72.5%,
    rgba(0,47,167,0.0448) 75.0%, rgba(0,47,167,0.0363) 77.5%, rgba(0,47,167,0.0292) 80.0%,
    rgba(0,47,167,0.0234) 82.5%, rgba(0,47,167,0.0185) 85.0%, rgba(0,47,167,0.0146) 87.5%,
    rgba(0,47,167,0.0114) 90.0%, rgba(0,47,167,0.0089) 92.5%, rgba(0,47,167,0.0069) 95.0%,
    rgba(0,47,167,0.0053) 97.5%, rgba(0,47,167,0.0040) 100.0%;
}
.orb-stage{display:none}
.orb-on .orb-open{height:230svh}
.orb-on .orb-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.orb-on .orb-stage{display:block;position:absolute;inset:0;z-index:1;background:var(--paper)}
.orb{
  position:absolute;inset:0;
  /* repainted, never transform-scaled: scaling a rasterised layer blurs the
     core and bands the falloff */
  background:radial-gradient(circle var(--orbR,24vmax) at 50% var(--orbY,39%),var(--orb-stops));
  opacity:0;transition:opacity 1700ms cubic-bezier(.16,.7,.3,1) 160ms;
}
.orb-open.ready .orb{opacity:1}
.orb-wordmark{
  position:absolute;left:0;right:0;top:64%;text-align:center;
  font-size:clamp(40px,5.4vw,76px);letter-spacing:.01em;opacity:var(--wm,1);
}
.orb-note{
  position:absolute;left:0;right:0;bottom:30px;text-align:center;
  font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;opacity:var(--wm,1);
}
.orb-note .down{
  display:block;margin-top:12px;font-size:15px;letter-spacing:0;
  animation:cue-drift 2.6s ease-in-out infinite;
}
@keyframes cue-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.orb-on .orb-pin .hero{position:absolute;inset:0;z-index:2;height:100%;min-height:0;background:transparent}
.orb-on .orb-pin .hero .sea{opacity:var(--sea,0)}
.orb-on .orb-pin .hero-copy,.orb-on .orb-pin .hero-foot{opacity:var(--copy,0)}
/* Nav sits out the orb opening, arrives with the film, then stays fixed:
   transparent white over the hero, a paper bar past it. */
.orb-on header{
  position:fixed;color:#fff;opacity:0;pointer-events:none;
  transition:opacity .9s var(--e),color .3s,background .3s,padding .3s;
}
.orb-on header.nav-in{opacity:1;pointer-events:auto}
/* THE BAR STOPS BEING PINNED ONCE THE OPENING IS BEHIND IT, ON A PHONE.
   A fixed bar on iOS leaves a sliver of the page above itself -- the
   fixed layer is placed against the layout viewport while the visual one
   is still travelling -- and over a full-bleed blue panel that sliver is
   a blue band under the status bar. Five passes aimed at the bar itself
   failed on this site before; what settled it was not pinning it, and
   that is what this does. See the note in index.html.

   Hiding it on a downward scroll was the first try here and is not
   enough: it comes back on the way up, and the sliver comes back with it.

   The switch is seamless rather than clever. --nav-top is set to the
   height of the orb opening, so at the moment of the swap the absolute
   bar is at exactly the viewport position the fixed one held, and it
   then scrolls up and out like anything else. Scroll back and it comes
   back in the same place. The opening keeps the pinned bar it was
   designed with: there is nothing but the film behind it there, so there
   is no band for a sliver to be out of line with.

   Desktop keeps the bar pinned throughout -- there is room for it, and
   none of this happens on a pointer device. */
@media(max-width:760px){
  .orb-on header.nav-let-go{position:absolute;top:var(--nav-top,0px)}
}
.orb-on header.past-hero{
  background:var(--paper);color:var(--blue);
  border-bottom:var(--hairline);
  padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px;
}
/* Two earlier attempts at this lived here: a strip hung above the bar with
   bottom:100%, sized first with env(safe-area-inset-top) (0 without
   viewport-fit=cover, so it painted nothing) and then at a flat 140px
   (which painted, but not where it was needed). Both are gone. A pseudo-
   element drawn above a fixed element is the thing iOS clips to the safe
   area, so the cover can only come from the bar's own box -- which is what
   the padding-top above now does, with the page opted into the full screen
   by viewport-fit=cover. */

/* ---------- hero: the film (settled — do not retune) ---------- */
.hero{height:100svh;min-height:620px;color:#fff;overflow:hidden;background:#002fa7}
.sea{position:absolute;inset:0}
.hero-film{
  position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;
  transform:translate3d(0,var(--par,0%),0) scale(1.02);
  will-change:transform;
}
.sea-depth{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(12,25,66,0) 34%,rgba(10,20,54,.58) 72%,rgba(7,14,38,.9) 100%);
  opacity:var(--copy,1);
  display:none; /* off: the hero reads better on open water, unwashed */
}
.hero-copy{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px var(--gut) 40px;
}
.hero-copy h1{
  font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,78px);
  max-width:13em;
  text-shadow:0 1px 34px rgba(4,8,44,.38);
}
.hero-copy::before{ /* soft pool of depth behind the line, for bright frames */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 34% at 50% 50%,rgba(4,8,44,.30),rgba(4,8,44,0) 72%);
}
.hero-foot{
  position:absolute;left:0;right:0;bottom:30px;z-index:2;text-align:center;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
}

/* ---------- the beat: one shape for every section below the hero ----------
   head (cols 1–7) and support (cols 8–12) share a baseline row; anything
   further sits underneath on the full twelve. */
.beat{padding-block:var(--s5)}
/* two beats on the same surface share one gap; doubling the padding is what
   made the page feel like loose pages rather than one column */
.beat--paper+.beat--paper{padding-top:0}
.beat--paper{background:var(--paper);color:var(--blue)}
.beat .col-body>*+*,
.beat .bottle-copy>*+*{margin-top:var(--s2)}
/* a fact line belongs to the paragraph above it, not to the next thought */
.beat .lead+.spec-line{margin-top:var(--s1)}
.beat-rows{margin-top:var(--s4)}

/* the support column reads as a second voice, not a smaller first one */
.beat .col-body .lead{color:inherit}
.beat--paper .col-body .lead{color:var(--ink)}

/* ---------- a beat carried by one photograph ---------- */
.beat--figure{
  padding-block:0;color:#fff;overflow:hidden;
  min-height:min(96svh,900px);
  display:flex;align-items:flex-end;
}
.beat--figure>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.beat--figure>img[data-plx]{height:116%;top:-8%;transform:translateY(var(--drift,0%))}
.beat--figure::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(4,8,44,.68),rgba(4,8,44,.10) 52%,rgba(4,8,44,0) 78%);
}
.beat--figure>.grid{position:relative;z-index:2;width:100%;padding-block:var(--s4)}

/* ---------- four ingredients: a ruled table on the same columns ---------- */
.spec{
  align-items:baseline;
  padding-block:var(--s2);
  border-top:var(--hairline);
}
.spec:last-child{border-bottom:var(--hairline)}
.spec h3{
  grid-column:1/6;
  font-size:var(--t-lead);font-weight:400;letter-spacing:-.01em;line-height:1.2;
}
.spec p{grid-column:7/13;color:var(--ink);max-width:30em}
.beat--figure .spec{border-color:rgba(255,255,255,.34)}

/* ---------- the bottle ---------- */
.bottle-fig{grid-column:1/6;grid-row:2;margin-top:var(--s4)}
.bottle-fig img{
  width:auto;max-width:100%;height:auto;max-height:min(70vh,660px);
}
.bottle-copy{grid-column:8/13;grid-row:2;margin-top:var(--s4);align-self:center}
.spec-line{font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase}

/* ---------- three moments ---------- */
.moment{grid-column:span 4;border-top:var(--hairline);padding-top:var(--s1)}
.moment h3{
  font-size:var(--t-lead);font-weight:400;letter-spacing:-.01em;line-height:1.2;
  margin-bottom:var(--s1);
}
.moment p{color:var(--ink);max-width:24em}

/* ---------- founder pull-quote ---------- */
.founder-fig{
  grid-column:1/7;
  /* the portrait bleeds off the left edge; the type stays on the grid */
  margin-left:calc(var(--gut)*-1);
  aspect-ratio:4/5;overflow:hidden;
}
.founder-fig img{height:116%;margin-top:-8%;object-fit:cover;object-position:center 12%}
.founder-copy{
  grid-column:8/13;
  align-self:center;
}
.founder-copy>*+*{margin-top:var(--s2)}
.founder-copy blockquote{font-size:var(--t-lead);line-height:1.45;color:var(--ink);text-wrap:pretty}
.founder-copy cite{font-style:normal;font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase}

/* ---------- the taste passage: the quietest beat ---------- */
.beat--taste{padding-block:var(--s4)}
.beat--taste .col-head>p{margin-top:var(--s2);color:var(--ink);max-width:34em}

/* ---------- footer: the close ---------- */
footer{background:var(--blue);color:var(--paper)}
.signup{padding-block:var(--s5) var(--s4)}
.signup .display{grid-column:1/13}
.signup-copy{grid-column:8/13;margin-top:var(--s3)}
.signup-form{grid-column:8/13;margin-top:var(--s2)}
.signup-form label{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.signup-line{display:flex;gap:20px;align-items:baseline;border-bottom:1px solid var(--paper)}
.signup-line input{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);padding:12px 0;outline-offset:6px}
.signup-line input::placeholder{color:var(--paper);opacity:.55}
.signup-line button{background:none;border:0;color:inherit;cursor:pointer;padding:12px 0;white-space:nowrap}
.signup-line button:hover{opacity:.75}
.signup-form .fine{margin-top:14px;opacity:.8}

.footer-links{
  display:flex;flex-wrap:wrap;gap:14px 34px;
  padding:22px var(--gut);border-top:1px solid rgba(252,249,242,.35);font-size:var(--t-small);
}
.foot-mark-clip{overflow:hidden;line-height:0}
.foot-mark{
  font-size:24.6vw;line-height:.78;letter-spacing:-.03em;font-weight:400;
  padding:0 var(--gut);margin-left:-.04em;white-space:nowrap;
  transform:translateY(.06em);display:block;
}
.footer-legal{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px var(--gut);border-top:1px solid rgba(252,249,242,.35);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- mobile: the twelve columns fold to one ---------- */
@media(max-width:860px){
  header{padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px}
  .nav-links{gap:14px;font-size:13px}
  .hero-copy h1{font-size:clamp(26px,7.6vw,40px)}

  .col-head,.col-body,.col-full{grid-column:1/13}
  .col-body{margin-top:var(--s3)}
  .spec h3,.spec p,.moment,.bottle-fig,.bottle-copy,
  .founder-fig,.founder-copy,.signup-copy,.signup-form{grid-column:1/13}
  .spec p{margin-top:var(--s1)}
  .moment+.moment{margin-top:var(--s3)}
  .bottle-fig,.bottle-copy{grid-row:auto}
  .bottle-copy{margin-top:var(--s3)}
  /* left-bleed only: bleeding both edges makes the negative margins widen
     the box past the viewport and the page scrolls sideways */
  .founder-fig{margin-right:0;aspect-ratio:3/4}
  .founder-copy{margin-top:var(--s3)}
  .beat--figure{min-height:min(80svh,640px)}
  .orb-on .orb-open{height:180svh}
  .orb-wordmark{top:64%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- the cookie notice ----------
   Here rather than in union.css because this is the one stylesheet every
   page loads. The trade sell sheet used to be the exception -- it loaded
   swiss.css and spec.css and nothing else, and the notice arrived there as
   unstyled text with two default browser buttons on top of the document --
   and although that page is gone (the sell sheet is Adrien's PDF now), the
   notice stays here: it belongs with the stylesheet that cannot be left out.

   Its buttons are written out rather than borrowed from union.css's .btn for
   the same reason, and scoped to .u-cc so that on the pages which do load
   union.css these win on specificity and the notice looks identical
   everywhere. If .btn changes shape, this has to follow it.

   Paper with a blue hairline over it, which is the nav's treatment: the
   notice is this site speaking, not a widget bolted onto it. It sits at the
   foot of the window because that is where a notice belongs when it is not
   blocking anything -- there is one cookie behind it, and nothing a visitor
   is being stopped from reading. */
.u-cc{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--paper);color:var(--blue);
  border-top:1px solid var(--blue);
  box-shadow:0 -18px 40px rgba(16,6,159,.07);
  padding:var(--s2) var(--gut) calc(var(--s2) + env(safe-area-inset-bottom,0px));
  /* Off the bottom edge until the frame after it is inserted. Transform only:
     animating height or bottom on a bar this wide is a layout thrash on the
     whole page, and it arrives over a hero that is already moving. */
  transform:translateY(100%);transition:transform .5s var(--e);
}
.u-cc.is-open{transform:none}

.u-cc__inner{
  max-width:1600px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.u-cc__text{
  margin:0;max-width:62ch;
  font-family:Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--t-small);line-height:1.55;color:var(--ink);text-wrap:pretty;
}
.u-cc__text a{text-decoration:underline;text-underline-offset:4px;color:var(--blue)}
.u-cc__acts{display:flex;gap:var(--s1);flex:none}

.u-cc .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.55em 1.6em;
  border:1px solid currentColor;border-radius:10px;
  font-family:Haas,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--t-body);letter-spacing:.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;background:transparent;white-space:nowrap;
  transition:background-color .35s var(--e),color .35s var(--e);
}
.u-cc .btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* The two answers are the same size. Making Accept the larger of them is the
   dark pattern this notice exists in order not to be; the solid fill stays
   only because one of the two has to look like the default. */
.u-cc .btn--solid{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.u-cc .btn--solid:hover{background:transparent;color:var(--blue)}
.u-cc .btn--line{color:var(--blue);border-color:var(--blue)}
.u-cc .btn--line:hover{background:var(--blue);color:var(--paper)}

@media(max-width:720px){
  .u-cc__inner{display:block}
  .u-cc__acts{margin-top:var(--s2)}
  /* Full width and side by side rather than stacked: stacked, the lower
     button sits under the thumb and gets hit on the way to the upper one. */
  .u-cc .btn{flex:1 1 0}
}

@media(prefers-reduced-motion:reduce){
  .u-cc,.u-cc .btn{transition:none}
}

/* Not on paper: the sheet is a document that prints, and a fixed bar on it
   is neither part of the document nor any use once it is on paper. */
@media print{ .u-cc{display:none} }