/* Chest identity shared by the central site and the Chest portal: type, layout, controls, brand marks. Tokens and fonts come from brand.css. */
:root{--fg:var(--black);--bg:var(--white);--fg-2:var(--text-2);--rule:var(--rule-grey);--hover:var(--grey);--gutter:clamp(20px,2.4vw,36px);font-family:var(--sans);font-synthesis:none;font-size:15px;line-height:1.45;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
.invert{--fg:var(--white);--bg:var(--black);--fg-2:#9a9a9a;--rule:#2e2e2e;--hover:#161616;--relief-face:linear-gradient(135deg,#171717,#0b0b0b);--relief-hi:rgba(255,255,255,.13);--relief-lo:rgba(0,0,0,.95);color:var(--fg);background:var(--bg)}
.grey{--bg:var(--grey);--hover:#e8e8e5;--relief-face:linear-gradient(135deg,#f6f6f4,#eaeae7);--relief-hi:#fff;--relief-lo:rgba(0,0,0,.16);background:var(--bg)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,p,ol,ul,dl,dd,form{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}

/* Type */
h1,h2,h3{font-weight:400}
h1,h2,.display{text-wrap:balance}
.display{font-size:clamp(44px,6.4vw,100px);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.03em}
h3{font-size:19px;line-height:1.2;letter-spacing:-.02em}
em{font-family:var(--serif);font-style:italic;letter-spacing:-.03em}
.works{font-family:var(--serif);letter-spacing:-.03em}
.label{font-size:11px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.idx{font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.muted,p{color:var(--fg-2)}
.fg{color:var(--fg)}
.lede{font-size:clamp(18px,1.55vw,23px);line-height:1.25;letter-spacing:-.015em;color:var(--fg);max-width:27em}
.small{font-size:13px}
.link{text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Layout */
.wrap{width:100%;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px}
.stack{display:grid;gap:var(--gap,16px);align-content:start}
.row{display:flex;align-items:center;gap:var(--gap,12px);flex-wrap:wrap}
.spread{justify-content:space-between}
.section{padding-block:clamp(36px,5vw,72px)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:22px}
.clip{position:relative;overflow:hidden;isolation:isolate}
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}.c12{grid-column-end:span 12}
.s9{grid-column-start:9}
.end{justify-self:end;text-align:right}

/* Header */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px var(--gutter);min-height:60px}
.top>:first-child{justify-self:start}
.top>:last-child{justify-self:end}
.top .brand{font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:-.035em;text-decoration:none}
.top form{display:contents}
.top>form:first-child>button{justify-self:start}
.top>form:last-child>button{justify-self:end}
.top .brand-signature{display:inline-block;line-height:0}
.top .signature{--size:20px;vertical-align:middle}
.top .quiet{font:inherit;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}

/* Controls */
.btn{font:inherit;font-size:14px;line-height:1;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:6px 6px 6px 20px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn i{font-style:normal;width:30px;height:30px;background:var(--bg);color:var(--fg);display:grid;place-items:center;font-size:13px;transition:transform .2s ease}
.btn:hover i{transform:translateX(2px)}
.btn.line{background:transparent;color:var(--fg)}
.btn.line i{background:var(--fg);color:var(--bg)}
label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
input{display:block;width:100%;font:inherit;font-size:18px;letter-spacing:-.015em;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--fg);border-radius:0;padding:8px 0 10px;min-height:44px;appearance:none}
input:focus-visible{outline:0;border-bottom:2px solid var(--blue);padding-bottom:9px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:5px 9px;border:1px solid var(--rule);white-space:nowrap;color:var(--fg)}
.tag.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tag.now{border-color:var(--blue);color:var(--blue)}
.tag.now::before{content:"";width:6px;height:6px;background:var(--blue)}
.spinner{width:12px;height:12px;border:1px solid var(--ghost);border-top-color:var(--fg);display:inline-block;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

/* Brand: one approved drawing, the exported signature. --size is the height of the name's type. */
.signature{--size:64px;display:inline-block;width:calc(var(--size)*2.52);aspect-ratio:2520/1243;background:currentColor;-webkit-mask:url("/assets/brand/exports/chest-by-argentic.svg") center/contain no-repeat;mask:url("/assets/brand/exports/chest-by-argentic.svg") center/contain no-repeat}
.relief{position:absolute;z-index:-1;aspect-ratio:1/1;pointer-events:none}
.relief i{position:absolute;inset:0;-webkit-mask:url("/assets/brand/exports/argentic-symbol.svg") center/contain no-repeat;mask:url("/assets/brand/exports/argentic-symbol.svg") center/contain no-repeat}
.relief i:nth-child(1){background:var(--relief-hi);transform:translate(-2px,-2px)}
.relief i:nth-child(2){background:var(--relief-lo);transform:translate(3px,3px);filter:blur(2px)}
.relief i:nth-child(3){background:var(--relief-face)}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;background:url("/assets/grain.svg")}

/* Hero: the headline takes the width; under a rule, the action and its supporting text. */
.hero{padding-block:clamp(28px,4vw,56px) clamp(40px,6vw,80px);display:grid;gap:clamp(36px,6vw,96px)}
.hero.full{min-height:calc(100vh - 60px);align-content:space-between;position:relative}
.hero-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;border-top:1px solid var(--fg);padding-top:18px;row-gap:24px}
.hero-foot>*{grid-column:span 2}
.hero-foot>.lede{padding-left:18px}
.hero-foot.flip>.lede{padding-left:0}
.hero-foot.flip>:last-child{padding-left:18px}
.home{min-height:100vh;display:flex;flex-direction:column}
.home .hero{flex:1}

/* Footer line */
.foot-bar{margin-top:auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--gutter)}

/* Numbered columns with a left hairline */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px}
.col{border-left:1px solid var(--rule);padding:0 var(--gutter) 4px 18px;display:flex;flex-direction:column;gap:12px;min-height:230px}
.col h3{margin-top:22px}
.col .glyph{font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;letter-spacing:-.04em;margin:22px 0 4px}
.col p{font-size:13px;max-width:22em}
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.halves>.col{min-height:0;padding-bottom:8px;gap:20px}
.halves>.col h2{font-size:clamp(28px,3.2vw,48px);line-height:1.02;letter-spacing:-.04em;max-width:13em;margin:0}
.halves>.col p{font-size:16px;max-width:30em}

/* Large index rows: every cell trimmed to its capital height, hanging from one line. */
.rows>*{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;border-top:1px solid var(--rule);padding:20px 0}
.rows>:last-child{border-bottom:1px solid var(--rule)}
.rows>*>*{text-box:trim-both cap alphabetic}
.rows .big{font-size:clamp(24px,3vw,44px);line-height:1.05;letter-spacing:-.04em}

/* Entrance: the headline lines rise once. */
@media(prefers-reduced-motion:no-preference){
  .reveal>*{opacity:0;transform:translateY(.35em);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal>:nth-child(2){animation-delay:.08s}.reveal>:nth-child(3){animation-delay:.16s}
  @keyframes rise{to{opacity:1;transform:none}}
}

@media(max-width:900px){
  .grid,.rows>*{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid>*{grid-column:1/-1!important}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .halves{grid-template-columns:1fr;row-gap:40px}
  .hide-s{display:none!important}
  /* The step in progress keeps its explanation on a small screen. */
  .rows>[aria-current="step"] .hide-s{display:block!important;grid-column:1/-1!important;padding-top:8px}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot>*{grid-column:1/-1!important;padding-left:0!important}
  .rows .big{grid-column:span 3!important}
  .rows .end{grid-column:span 2!important;justify-self:end;text-align:right}
  .end{justify-self:start;text-align:left}
}
@media(max-width:520px){.cols{grid-template-columns:1fr}.col{min-height:0}}
.plain{text-decoration:none}