/* Privacy and Terms, in the home page's language: the lit Paper first screen at display scale, the
   short version as an orange band with numbered discs (the offer's own drawing), a reading column
   with no rules in it, and the Ink close and footer. The frame, the gutter, the bar, the button and
   the footer match assets/css/site.css by hand, so the wordmark does not move between pages. */
:root{
  color-scheme:light;
  --page:#EBEBE8; --ink:#0A0A0B; --ink-2:#55555A; --ink-read:#2C2C30; --mute:#67676C; --rule:#D6D6D2;
  --accent:#C2552A; --accent-ink:#A9461F; --accent-lit:#F07A3C;
  --on-ink:#F5F5F1; --on-ink-2:rgba(245,245,241,.7); --on-ink-3:rgba(245,245,241,.52); --rule-ink:rgba(245,245,241,.16);
  --pad:clamp(20px,3.6vw,72px);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --disp:"Bricolage Grotesque","Mona Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --mark:8px; --markgap:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--page);color:var(--ink);font:400 16px/1.5 "Mona Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(194,85,42,.24);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}
.wrap{width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:11.5px;line-height:1.4;letter-spacing:.055em;text-transform:uppercase}
.nb{white-space:nowrap}
.stop{display:inline-block;width:.17em;height:.17em;margin-left:.06em;border-radius:50%;background:var(--accent)}
.end .stop{background:var(--accent-lit)}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:60;background:var(--ink);color:var(--on-ink);padding:14px 16px;border-radius:4px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.end :focus-visible,.bar.is-ink :focus-visible{outline-color:var(--on-ink)}
.eye{display:flex;align-items:center;gap:var(--markgap);color:var(--ink-2)}
.eye i{width:var(--mark);height:var(--mark);border-radius:50%;background:var(--accent)}
.lnk{position:relative;display:inline-block;padding:6px 0}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.lnk:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover) and (pointer:fine){.lnk:hover::after{transform:scaleX(1);transform-origin:left}}

/* ---- the bar: the home page's, standing from the start, dark while it is over the Ink close ---- */
.bar{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;background:rgba(235,235,232,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);border-bottom:1px solid transparent;
  transition:background-color .22s var(--ease-soft),border-color .22s var(--ease-soft),color .22s var(--ease-soft)}
/* at the very top the bar is clear, so the first screen's lit ground runs up behind the wordmark
   as it does on the home page; without script it simply stays Paper */
.bar.is-top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar.is-scrolled{border-bottom-color:rgba(10,10,11,.09)}
.bar.is-ink{background:rgba(10,10,11,.92);border-bottom-color:rgba(245,245,241,.12);color:var(--on-ink)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.bar__mark{position:relative;display:block;line-height:0;padding:12px 0;flex:none}
.bar__mark img{height:20px;width:auto;max-width:none;transition:opacity .2s var(--ease-soft)}
.bar__mark .k{position:absolute;left:0;top:12px;opacity:0}
.bar.is-ink .bar__mark .p{opacity:0}
.bar.is-ink .bar__mark .k{opacity:1}
.bar nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.bar nav .lnk{padding:12px 0}
.bar nav .lnk::after{bottom:8px}
.bar nav [aria-current]::after{transform:scaleX(1)}
.bar nav .btn{margin-left:8px}
.bar.is-ink .btn{background:var(--on-ink);color:var(--ink)}
.bar.is-ink .btn i{background:var(--accent)}
.bar.is-ink .btn:hover i,.bar.is-ink .btn:focus-visible i{background:var(--ink)}
.bar.is-ink .lnk::after{background:var(--accent-lit)}

/* ---- the first screen: the home page's lit Paper, the title at its scale, and ONE rule with the
   page's facts hanging from it, as the client index hangs from the hero's rule ---- */
.hero{background-image:linear-gradient(128.9deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 46%,rgba(122,51,23,.075) 100%);margin-top:-64px;padding-top:64px}
.hero .wrap{padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(36px,6vh,64px)}
h1{margin-top:clamp(16px,2.4vh,24px);font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(38px,6.35vw,116px);line-height:1;letter-spacing:-.04em;max-width:12em;text-wrap:balance}
.meta{margin-top:clamp(36px,6vh,72px);border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-wrap:wrap;gap:18px clamp(28px,4.4vw,80px)}
.meta dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
.meta dd{font-size:15.5px;letter-spacing:-.005em}
.meta dd a{position:relative;display:inline-block;padding:2px 0 4px}
.meta dd a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){.meta dd a:hover{color:var(--accent-ink)}}

/* ---- the short version: the offer band's orange and its numbered discs. Every piece of text on this
   ground is full Ink (4.8:1); any grey of it would fall under AA ---- */
.short{background:#D05828;color:var(--ink);padding:clamp(56px,8.5vh,104px) 0 clamp(60px,9vh,112px);
  background-image:linear-gradient(128.9deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 62%)}
.short .eye{color:var(--ink)}
.short .eye i{background:var(--ink)}
.short ::selection{background:rgba(10,10,11,.85);color:var(--on-ink)}
.short__row{margin-top:clamp(32px,5vh,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,3.2vw,64px)}
.disc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:500;letter-spacing:.04em}
.short__h{margin-top:clamp(18px,2.6vh,28px);font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(28px,3.3vw,56px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.short li p{margin-top:clamp(12px,1.6vh,18px);max-width:26em;font-size:clamp(15.5px,1.15vw,18px);line-height:1.45;text-wrap:balance}

/* ---- the document: a sticky index that marks where you are, and a reading column. Sections are
   divided by space and by their own headings; nothing is ruled ---- */
.doc{display:grid;grid-template-columns:minmax(210px,22%) minmax(0,1fr);gap:clamp(32px,6vw,120px);padding-top:clamp(56px,9vh,112px);padding-bottom:clamp(72px,11vh,140px)}
.index{position:sticky;top:96px;align-self:start;max-height:calc(100svh - 128px);overflow-y:auto;overflow-x:hidden;padding:0 8px 8px 0}
.index summary{display:block;color:var(--mute);margin-bottom:14px;list-style:none;cursor:default}
.index summary::-webkit-details-marker{display:none}
.index ol{counter-reset:s}
.index li{counter-increment:s}
.index a{position:relative;display:grid;grid-template-columns:28px 1fr;gap:6px;padding:7px 0;color:var(--mute);font-size:14.5px;line-height:1.3;transition:color .24s var(--ease-soft)}
.index a::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.055em;padding-top:2px;transition:color .24s var(--ease-soft)}
.index a[aria-current="true"]{color:var(--ink)}
.index a[aria-current="true"]::before{color:var(--accent-ink)}
.index a:focus-visible{outline-offset:2px}
@media (hover:hover) and (pointer:fine){.index a:hover{color:var(--ink)}.index a:hover::before{color:var(--accent-ink)}}
.body{counter-reset:sec;max-width:46em}
.body section{counter-increment:sec}
.body section + section{margin-top:clamp(52px,8vh,88px)}
.body h2{font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(26px,2.5vw,40px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance;margin-bottom:clamp(14px,2vh,20px)}
.body h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:12px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.055em;color:var(--accent-ink)}
.body p,.body ul{color:var(--ink-read);font-size:clamp(16px,1.1vw,17.5px);line-height:1.62;text-wrap:pretty}
.body p + p,.body ul,.body ul + p{margin-top:14px}
.body li{position:relative;padding:5px 0 5px 22px}
.body li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1.5px;background:var(--accent)}
.body strong{font-weight:600;color:var(--ink)}
.body a{color:var(--ink);padding-bottom:2px;background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(#B9B9B4,#B9B9B4);
  background-position:0 100%,0 100%;background-repeat:no-repeat;background-size:0 1.5px,100% 1px;transition:background-size .4s var(--ease-out),color .24s var(--ease-soft)}
.body a:hover,.body a:focus-visible{color:var(--accent-ink);background-size:100% 1.5px,100% 1px}
.body .stamp{margin-top:clamp(40px,6vh,64px);color:var(--mute);font-size:11.5px;line-height:1.7}

/* ---- the close and the footer, as on the home page ---- */
.end{background:#0A0A0B;color:var(--on-ink);padding-top:clamp(72px,11vh,140px);
  background-image:linear-gradient(128.9deg,rgba(250,250,250,.095) 0%,rgba(250,250,250,.02) 40%,rgba(250,250,250,0) 66%)}
.end .eye{color:var(--on-ink-3)}
.end .eye i{background:var(--accent-lit)}
.end .lnk::after{background:var(--accent-lit)}
.end__h{margin-top:clamp(18px,2.4vh,28px);font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(40px,6.6vw,112px);line-height:1;letter-spacing:-.04em;max-width:11em;text-wrap:balance}
.end__acts{margin-top:clamp(28px,4.4vh,52px);display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(28px,4vw,64px)}
.end__mail{font-family:var(--disp);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(24px,2.6vw,42px);letter-spacing:-.035em;line-height:1.1;padding:8px 0}
.foot{margin-top:clamp(88px,13vh,168px);border-top:1px solid var(--rule-ink);padding:26px 0 clamp(28px,4vh,44px);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px clamp(48px,7vw,128px)}
.foot__mark{display:inline-block}
.foot__mark img{height:20px;width:auto}
.foot__say{margin-top:16px;max-width:34ch;color:var(--on-ink-2);font-size:15px}
.foot__k{color:var(--on-ink-3);margin-bottom:8px}
.foot__col a{display:block;width:fit-content;padding:7px 0;font-size:15px}
.foot__legal{grid-column:1 / -1;color:var(--on-ink-3);padding-top:8px}

/* the first screen arrives the way the home page's does; nothing here waits on script */
@keyframes rise{from{opacity:0;transform:translate3d(0,var(--ty,22px),0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero .eye{animation:fade .9s var(--ease-soft) 60ms backwards}
.hero h1{animation:rise 1.1s var(--ease-out) 80ms backwards;--ty:.3em}
.hero .meta{animation:fade .9s var(--ease-soft) 420ms backwards}

@media (max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0}
  /* on a small screen the index folds away: nineteen rows is a screenful before the first word */
  .index{position:static;max-height:none;overflow:visible;padding:0 0 clamp(36px,5vh,48px)}
  .index summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);color:var(--ink);cursor:pointer}
  .index summary::after{content:"+";font-size:16px;line-height:1}
  .index details[open] summary::after{content:"‘2"}
  .index details[open] summary{margin-bottom:10px}
  .index ol{columns:2;column-gap:28px}
  .index a{padding:13px 0;break-inside:avoid}
  .body{max-width:none}
  .short__row{grid-template-columns:minmax(0,1fr);gap:36px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__id{grid-column:1 / -1}
  .foot__col a{padding:12px 0;min-width:44px}
  .foot__mark{display:flex;align-items:center;min-height:44px}
  .meta dd a{padding:12px 0 14px}
  .meta dd:has(a){margin:-12px 0 -14px}
  .bar nav .lnk{min-width:44px;text-align:center}
}
@media (max-width:620px){
  html{scroll-padding-top:80px}
  .bar nav{gap:16px}
  .bar nav .lnk{padding:14px 0}
  .bar nav .btn{display:none}
  .bar__mark img{height:17px}
  .bar__mark{padding:14px 0}
  .bar__mark .k{top:14px}
  .index ol{columns:1}
  .end__mail{padding:10px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1{animation-name:fade}
  .lnk::after,.body a,.index a{transition:none}
}

/* The same button as the home page (assets/css/site.css). Kept in step by hand: two pages do not
   earn a shared file, and this one must not pull in the home page's layout. */
/* ---- the button ----
   A block of Ink with the brand's full stop closing the label. Pointing at it floods the block
   from that stop, and the label goes to Ink. No circle, no porthole, nothing drawn inside it.
   The flood is a DISC THAT SCALES, clipped by the button. It used to be an animated clip-path,
   which the browser repaints on the main thread every frame: it hitched part way through, most
   visibly on the way back. A transform is carried by the compositor and cannot.
   The fill is --flood: the lit orange everywhere except on the orange band, where an orange fill
   would lose the button's edge, so there it is Paper. Same motion, same timing, either way. */
.btn{--h:52px;--px:24px;--dot:7px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--h);padding:0 var(--px);border:0;border-radius:4px;background:var(--ink);color:var(--on-ink);cursor:pointer;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap;
  /* the label changes colour as the flood's edge crosses its middle: .2s into the way back, .05s into
     the way in. Changed at once on the way back, it sat Paper on a Paper flood and vanished. */
  transition:color .14s var(--ease-soft) .2s,transform .2s var(--ease-out)}
.btn__x{display:inline}
.btn::before{content:"";position:absolute;z-index:-1;left:calc(100% - var(--px) - var(--dot) / 2);top:58%;width:240%;aspect-ratio:1;border-radius:50%;
  background:var(--flood,var(--accent-lit));transform:translate3d(-50%,-50%,0) scale(0);will-change:transform;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.btn i{flex:none;width:var(--dot);height:var(--dot);margin-left:3px;border-radius:50%;background:var(--accent-lit);align-self:center;transform:translateY(3px);transition:background-color .2s var(--ease-soft)}
.btn--sm{--h:44px;--px:18px;--dot:6px;font-size:12px}
.btn--paper{background:var(--on-ink);color:var(--ink)}
.btn--paper i{background:var(--accent)}
.band--signal .btn{--flood:var(--on-ink)}
.btn:focus-visible{outline-offset:3px}
.btn:active{transform:scale(.985)}
.btn:active::before,.btn:focus-visible::before{transform:translate3d(-50%,-50%,0) scale(1);transition:transform .7s cubic-bezier(.3,.7,.15,1)}
.btn:active,.btn:focus-visible{color:var(--ink);transition:color .16s var(--ease-soft) .05s,transform .2s var(--ease-out)}
.btn:active i,.btn:focus-visible i{background:var(--ink)}
.band--signal .btn:active i,.band--signal .btn:focus-visible i{background:var(--accent)}
.btn[disabled]{opacity:.6;cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn:hover{color:var(--ink);transition:color .16s var(--ease-soft) .05s,transform .2s var(--ease-out)}
  .btn:hover::before{transform:translate3d(-50%,-50%,0) scale(1);transition:transform .7s cubic-bezier(.3,.7,.15,1)}
  .btn:hover i{background:var(--ink)}
  .band--signal .btn:hover i{background:var(--accent)}
}
@media (prefers-reduced-motion:reduce){.btn::before,.btn:hover::before,.btn:focus-visible::before,.btn:active::before{transition:none}}