/* =========================================================================
   Sapey website · About page styles
   Buttons, labels, the icon tile, the closing band and the footer are shared, in base.css.
   Only tokens from base.css; tints are made from them with color-mix.
   No answers on this page, so no jade, burgundy or amber. No motion except the shared reveal on scroll.
   ========================================================================= */

main{--az-line:color-mix(in srgb,var(--s-azure) 25%,var(--s-linen))}

/* standalone links get a 44px tall tap area: padding with an equal negative margin, so the text and
   the spacing around it stay where they are (the record link keeps its 6px gap above: -11px + 6px) */

/* a link lands below the sticky header, with the eyebrow in view */
#record,#research{scroll-margin-top:72px}

/* ---------- About 1 · Hero ---------- */
.a-hero{background:radial-gradient(50% 60% at 18% 30%,color-mix(in srgb,var(--s-sky) 28%,transparent),transparent),radial-gradient(40% 50% at 85% 20%,color-mix(in srgb,var(--s-violet) 10%,transparent),transparent),linear-gradient(180deg,var(--s-linen) 0%,var(--s-paper) 100%)}
.a-hero-in{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:var(--sp-7);align-items:center;padding-block:96px 104px}
.a-h1{margin-bottom:0}
.a-hero .lead{margin-top:var(--sp-4);font-size:19px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* the dated card: the same facts as the record section, so it can hide on phones */
.a-card{justify-self:end;width:100%;max-width:400px;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);box-shadow:0 12px 32px rgba(20,35,70,.08),0 1px 3px rgba(20,35,70,.06);overflow:hidden}
.a-card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--sp-3) 20px;border-bottom:1px solid var(--s-line);font-size:15px}
.a-card-list{list-style:none;margin:0;padding:0}
.a-card-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 20px;border-top:1px solid var(--s-mist);font-size:14px}
.a-card-list li:first-child{border-top:0}
.a-card-list .d{font-family:var(--f-mono);font-size:13px;color:var(--s-azure)}

/* ---------- About 2 · Where Sapey began ---------- */
/* the first paragraph starts level with the headline, not the eyebrow */
.began{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);column-gap:var(--sp-7);align-items:start}
.began .eb{grid-column:1}
.began .h2{grid-column:1;max-width:12ch;margin-bottom:0}
.began-txt{grid-column:2;grid-row:2;display:grid;gap:var(--sp-4);margin-top:var(--sp-3)}
.began-first{font-size:20px;line-height:1.5;color:var(--s-ink);max-width:58ch}

/* ---------- About 3 · Why now ---------- */
.a3-h2{max-width:22ch}
.events{list-style:none;margin:var(--sp-6) 0 0;padding:0;border-bottom:1px solid var(--s-line)}
.ev{display:grid;grid-template-columns:150px 120px minmax(0,1fr) 170px;gap:var(--sp-4);align-items:baseline;padding:var(--sp-4) 0;border-top:1px solid var(--s-line)}
.ev-date{font-family:var(--f-mono);font-size:16px;color:var(--s-ink)}
.ev-cat{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink2)}
.ev-cat::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--c)}
.ev-cat.m{--c:var(--s-mauve)} .ev-cat.v{--c:var(--s-violet)}
.ev-text{font-size:17px;line-height:1.5}
.ev-src{font-size:14px;justify-self:end;text-align:right;padding-block:11px;margin-block:-11px}

/* ---------- About 4 · Our record so far ---------- */
.rec{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:var(--sp-7);align-items:start}
.rec-l{position:sticky;top:96px}
.tl{list-style:none;margin:0;padding:0}
/* date, dot, text. Each entry but the last draws the dashed line from its dot down to the next dot,
   so deleting an entry never leaves a gap (same dashes as the Product placement drawing) */
.tl-i{position:relative;display:grid;grid-template-columns:180px 14px minmax(0,1fr);column-gap:var(--sp-4);padding-bottom:36px}
.tl-i:last-child{padding-bottom:0}
.tl-i:not(:last-child)::before{content:"";position:absolute;left:calc(180px + var(--sp-4) + 6px);top:14px;bottom:-14px;width:2px;background:repeating-linear-gradient(180deg,var(--az-line) 0 6px,transparent 6px 12px)}
.tl-d{font-family:var(--f-mono);font-size:20px;line-height:28px;color:var(--s-azure)}
.tl-dot{position:relative;z-index:1;width:14px;height:14px;margin-top:7px;border-radius:50%;background:var(--s-azure);box-shadow:0 0 0 5px color-mix(in srgb,var(--s-azure) 15%,var(--s-linen))}
.tl-t p{font-size:18px;line-height:1.5;color:var(--s-ink);padding-top:1px}
.tl-t a{display:inline-block;margin-top:-5px;margin-bottom:-11px;padding-block:11px;font-size:14px}

/* ---------- About 5 · Research ---------- */
.a5-h2{max-width:18ch}
.papers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--sp-6)}
.paper{background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:var(--sp-5) 28px;display:grid;gap:14px;align-content:start}
.paper.feat{grid-column:span 2;border:2px solid var(--s-azure);padding:40px 36px}
.paper.wide{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px var(--sp-6);align-items:end}
.paper-l,.paper-r{display:grid;gap:14px;align-content:start}
.paper-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink2)}
.paper-title{font-size:20px;line-height:1.3;font-weight:700;color:var(--s-ink);text-wrap:balance}
.feat .paper-title{font-size:25px;line-height:1.25}
.paper-text{font-size:15px;line-height:1.6;color:var(--s-ink2)}
.feat .paper-text{font-size:17px}
.paper-link{justify-self:start;font-size:15px;font-weight:600;padding-block:10px;margin-block:-10px}
.patent{display:flex;align-items:center;gap:var(--sp-3);margin-top:40px;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:20px var(--sp-4)}
.patent .icon-tile{width:40px;height:40px;flex:none}
.patent p{font-size:16px;color:var(--s-ink)}

/* ---------- smaller screens ---------- */
@media (max-width:860px){
  .a-hero-in{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:48px 64px}
  .a-card{justify-self:start}
  .began,.rec{grid-template-columns:minmax(0,1fr)}
  .began-txt{grid-column:1;grid-row:auto}
  .rec{gap:var(--sp-5)}
  .rec-l{position:static}
  /* each event stacks: date and category on one line, then the sentence, then the source */
  .ev{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-3)}
  .ev-text,.ev-src{grid-column:1 / -1}
  .ev-src{justify-self:start;text-align:left}
  .papers{grid-template-columns:minmax(0,1fr)}
  .paper.feat,.paper.wide{grid-column:auto}
  .paper.wide{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:760px){
  .a-card{display:none}
  .a-hero .lead{font-size:17px}
  .ctas .btn{width:100%}
  .events{margin-top:var(--sp-5)}
  .papers{margin-top:var(--sp-5)}
  .paper.feat{padding:var(--sp-5) 28px}
  .feat .paper-title{font-size:22px}
  /* the record: dot and line on the left, the date above the text */
  .tl-i{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"dot date" ". text";column-gap:20px}
  .tl-d{grid-area:date}
  .tl-dot{grid-area:dot}
  .tl-t{grid-area:text;margin-top:var(--sp-1)}
  .tl-i:not(:last-child)::before{left:6px}
}