/* Home page: the lead, The Record, the operator, the disciplines, one way to reach Jacob. */

/* ---------- first viewport: the headline, one line, one action ---------- */
.lead{padding-block:clamp(34px,6vw,72px) clamp(36px,5vw,60px)}
.lead .display{max-width:13ch}
.lead .lede{margin-top:20px}
.lead .actions{margin-top:28px}

/* ---------- The Record ---------- */
.records{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--rule-strong)}
.rec{border-bottom:1px solid var(--rule)}
.rec-row{width:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 28px;align-items:start;gap:6px 24px;padding:18px 0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
@media (min-width:900px){.rec-row{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1fr) 28px}}
.rec-title{display:block;font-size:19px;font-weight:700;font-stretch:92%;letter-spacing:-.01em;line-height:1.2}
.rec-client{display:block;margin-top:3px;font-size:14px;color:var(--ink-3);font-weight:600}
.rec-sys{display:none;font-size:14px;color:var(--ink-2);padding-top:3px}
@media (min-width:900px){.rec-sys{display:block}}
.rec-out{font-size:15px;font-weight:650;color:var(--ink);padding-top:2px}
.rec-chev{width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink-2);transition:transform 220ms var(--ease-out),background-color 160ms ease}
.rec-row[aria-expanded="true"] .rec-chev{transform:rotate(180deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.rec-row:hover .rec-title{color:var(--accent)}}
.rec-row:focus-visible{outline-offset:4px}
@media (max-width:899px){.rec-row{grid-template-columns:minmax(0,1fr) 28px}.rec-out{grid-column:1;grid-row:2}.rec-chev{grid-column:2;grid-row:1}}

.rec-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows 260ms var(--ease-out)}
.js .rec-panel:not(.open){grid-template-rows:0fr}
.rec-panel > div{overflow:hidden}
.rec-body{display:grid;gap:18px 28px;padding:0 0 24px}
@media (min-width:760px){.rec-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.rec-body img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;background:var(--paper-2)}
.rec-story{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.rec-facts{margin-top:16px}
.rec-facts .ledger th,.rec-facts .ledger td{font-size:14.5px;padding-block:9px}
.rec-facts .ledger td{font-weight:600}

/* the rest of the record, one click away */
.more-work > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule);cursor:pointer;list-style:none;font-size:15px;font-weight:650;color:var(--accent)}
.more-work > summary::-webkit-details-marker{display:none}
.more-work > summary:focus-visible{outline-offset:4px}
.more-work[open] > summary .rec-chev{transform:rotate(180deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.more-work > summary:hover{color:var(--band-deep)}}
.more-work .records{border-top:0}

/* ---------- the operator ---------- */
.operator{display:grid;gap:28px}
@media (min-width:860px){.operator{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:start}}
.portrait{width:100%;max-width:300px;height:auto;aspect-ratio:800/992;object-fit:cover;border-radius:12px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;background:var(--paper-2)}
.portrait-cap{margin-top:10px;font-size:14px;color:var(--ink-3)}
.portrait-cap b{color:var(--ink);font-weight:650}
.operator .copy p{font-size:17.5px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.operator .copy p + p{margin-top:14px}
.operator .copy strong{color:var(--ink);font-weight:650}
.operator .copy .pull{margin-top:22px;font-size:clamp(20px,2.6vw,26px);line-height:1.3;font-weight:700;font-stretch:90%;letter-spacing:-.015em;color:var(--ink);max-width:30ch}
.figures{margin-top:26px;max-width:560px}
.figures .ledger td{font-size:clamp(22px,3vw,28px);font-weight:720;font-stretch:86%;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.figures .ledger th[scope=row]{font-weight:500;color:var(--ink-2);padding-right:18px}

/* ---------- disciplines ---------- */
.disciplines{border-top:1.5px solid var(--rule-strong)}
.disc{display:grid;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--rule)}
@media (min-width:860px){.disc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.disc h3{font-size:21px;font-weight:700;font-stretch:90%;letter-spacing:-.01em}
.disc p{margin-top:6px;color:var(--ink-2);font-size:16px;max-width:52ch}
.disc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.disc li{font-size:14px;font-weight:600;color:var(--ink-2);padding:6px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
@media (min-width:860px){.disc ul{align-content:start;padding-top:4px}}
.stack{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;font-size:15px;color:var(--ink-2)}
.stack .label{margin-right:14px}
.stack span:not(.label):not(:last-child)::after{content:"·";margin:0 9px;color:var(--ink-3)}

/* ---------- contact: one action ---------- */
.contact{max-width:640px}
.contact .lede{margin-top:14px}
.contact .actions{margin-top:26px}
.direct{margin-top:14px;display:flex;flex-wrap:wrap;gap:0 22px}
.direct a{font-size:16px;font-weight:650;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:10px 0}
@media (hover:hover) and (pointer:fine){.direct a:hover{color:var(--band-deep)}}

html:not(.js) .rec-chev{display:none}