/* ABOUT (2026-10-09, his call: "try a mix of current style and my website style"). The opening and the
   statement are avikshith.in's (Newsreader, the Pinyon capital, pictures set inline in the line); the rest
   is this site's own (Neue Montreal, grey labels, braces, the 60/40 split, N.0x rows). Figures are his
   hairline package (npm @lucasmarkes/hairline). Built by site_pass.about(). */


@font-face{font-family:Pinyon;src:url(/a/fonts/pinyon-script-400.woff2)}
.ab{--ink:#efeee8;--grey:#8d8c86;--line:#ffffff1f;--gut:clamp(20px,4.5vw,64px);font-family:InstrumentSerif,Georgia,serif;color:var(--ink);margin:0 calc(-5vw)}
.ab *{box-sizing:border-box}
.ab .lab{font-size:13px;color:var(--grey);margin:0}
.ab .reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ab .reveal.seen{opacity:1;transform:none}

/* 1  the opening: his site's headline */
.ab-open{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px var(--gut) 60px;gap:clamp(28px,5vh,56px)}
.ab-open h1{font:400 clamp(44px,7.2vw,124px)/1.04 Newsreader,Georgia,serif;letter-spacing:-.035em;margin:0}
.ab-open h1 em{font-style:italic}
.ab-open .dc{font-family:Pinyon,cursive;font-size:1.5em;line-height:.6;vertical-align:-.12em;letter-spacing:0;margin-right:.02em}
.ab-pic{display:inline-block;vertical-align:-.06em;height:.78em;aspect-ratio:3/2;border-radius:.12em;overflow:hidden;margin:0 .04em;transform:rotate(var(--r,0deg));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ab-pic.sq{aspect-ratio:1}
.ab-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ab-pic:hover{transform:rotate(0) scale(1.08)}

/* 2  the statement: this site's split */
.ab-split{display:grid;grid-template-columns:60fr 40fr;border-top:1px solid var(--line)}
.ab-split>div{padding:clamp(40px,7vh,80px) var(--gut)}
.ab-split>div+div{border-left:1px solid var(--line)}
.ab-statement{font-size:clamp(26px,2.6vw,42px);line-height:1.18;letter-spacing:-.01em;color:#d9d8d2;margin:28px 0 48px;max-width:24ch}
.ab-interests{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--grey)}
.ab-portrait{aspect-ratio:4/5;overflow:hidden;margin:0 0 28px;background:#151514}
.ab-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ab-skills h3{font-weight:400;font-size:15px;margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.ab-skills ul{list-style:none;margin:0;padding:0}
.ab-skills li{font-size:15px;color:#a9a8a2;padding:10px 0;border-bottom:1px solid var(--line)}

/* 3  how he works: his site's reading voice, a figure beside it */
.ab-how{display:grid;grid-template-columns:60fr 40fr;align-items:center;border-top:1px solid var(--line)}
.ab-how>div{padding:clamp(48px,9vh,110px) var(--gut)}
.ab-how p.big{font:400 clamp(26px,2.5vw,40px)/1.3 Newsreader,Georgia,serif;margin:24px 0 0;max-width:30ch;color:#d9d8d2}
.ab-how p.big+p.big{color:#9b9a94}

/* 4  experience: this site's numbered rows */
.ab-exp{border-top:1px solid var(--line)}
.ab-exp>header{display:flex;justify-content:space-between;align-items:baseline;padding:28px var(--gut)}
.ab-row{display:grid;grid-template-columns:90px 1fr 1fr minmax(220px,320px);gap:24px;align-items:center;padding:28px var(--gut);border-top:1px solid var(--line)}
.ab-row .n{font-size:13px;color:var(--grey);align-self:start;padding-top:10px}
.ab-row h2{font-weight:400;font-size:clamp(34px,4vw,64px);letter-spacing:-.03em;line-height:1;margin:0}
.ab-row h3{font-weight:400;font-size:15px;margin:14px 0 0;color:#cfcec8}
.ab-row .when{font-size:13px;color:var(--grey);margin:6px 0 0}
.ab-row p.copy{font:400 19px/1.5 Newsreader,Georgia,serif;color:#b9b8b2;margin:0;max-width:34ch}

/* the hairline figures: 5:4, drawn at the box's width */
.ab-fig{width:100%;aspect-ratio:5/4;color:var(--ink)}

/* 5  the end */
.ab-end{border-top:1px solid var(--line);padding:clamp(70px,14vh,150px) var(--gut);display:flex;flex-direction:column;gap:36px}
.ab-end h2{font:400 clamp(48px,7vw,116px)/1 Newsreader,Georgia,serif;letter-spacing:-.035em;margin:0}
.ab-end h2 em{font-style:italic;color:#9b9a94}
.ab-end nav{display:flex;gap:32px;flex-wrap:wrap;font-size:15px}
.ab-end nav a{border-bottom:1px solid #ffffff55;padding-bottom:8px;transition:border-color .3s}
.ab-end nav a:hover{border-color:var(--ink)}

@media(max-width:860px){
 .ab-split,.ab-how{grid-template-columns:1fr}
 .ab-split>div+div{border-left:0;border-top:1px solid var(--line)}
 .ab-row{grid-template-columns:1fr;gap:14px}
 .ab-row .n{padding:0}
 .ab-row .ab-fig{max-width:340px}
}
@media(prefers-reduced-motion:reduce){.ab .reveal{opacity:1;transform:none;transition:none}}
body:has(.ab)>footer{display:none}   /* the page ends on its own contact line */

/* HUEY SETTING, About (2026-10-10, his call: "do about and work too"): EB Garamond replaces Newsreader and Neue
   Montreal for every headline and reading line; Herbik caps tracked 10% for labels, interests, dates and the links;
   the Pinyon capital stays (his site's mark). Before: _bak5-about.css */



.ab{font-family:InstrumentSerif,Georgia,serif}
.ab-open h1,.ab-how p.big,.ab-row p.copy,.ab-end h2,.ab-statement,.ab-row h2,.ab-skills h3,.ab-skills li{font-family:InstrumentSerif,Georgia,serif;letter-spacing:0;font-weight:400}
.ab-open h1{letter-spacing:-.01em;line-height:1.02}
.ab-row h2{letter-spacing:-.005em;line-height:1.02}
.ab-statement{line-height:1.2}
.ab-row p.copy{font-size:20px;line-height:1.35}
.ab .lab,.ab-interests,.ab-row .n,.ab-row .when,.ab-row h3,.ab-end nav,.ab-exp>header{font-family:InterTight,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.ab-row h3{color:#cfcec8;margin-top:16px}
.ab-end nav a{font:400 11px/1.3 InterTight,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}

/* PROCESS (2026-10-10, his call: "add an about my process section", then "P1 replacing How I work"). His four chapters
   from avikshith.in in place of How I work: mark (Ch. n, numeral, title), the chapter's drawing, his copy; set like the
   Experience rows below. The experience drawings are kernel figures now (about-do-orbit, about-pr-pen, about-ch-crate).
   Before: _bak6-about.css */
.ab-proc{border-top:1px solid var(--line)}
.ab-proc>header{display:flex;justify-content:space-between;align-items:baseline;padding:28px var(--gut);font-family:InterTight,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.ab-ch{display:grid;grid-template-columns:170px minmax(220px,320px) 1fr;gap:clamp(24px,3vw,48px);align-items:center;padding:28px var(--gut);border-top:1px solid var(--line)}
.ab-ch-mark{display:flex;flex-direction:column;gap:8px;align-self:start;padding-top:10px}
.ab-ch-mark .lab{font:11px InterTight,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ab-ch-mark i{font:400 clamp(48px,4.4vw,68px)/1 InstrumentSerif,Georgia,serif;font-style:normal}
.ab-ch-mark .t{font:400 24px/1.1 InstrumentSerif,Georgia,serif;color:var(--ink)}
.ab-fig-none{width:100%;aspect-ratio:5/4}
.ab-ch-body{font:400 clamp(20px,1.7vw,26px)/1.35 InstrumentSerif,Georgia,serif;color:#b9b8b2;margin:0;max-width:36ch}
.ab-ch-body b{font-weight:400;color:var(--ink)}
@media(max-width:860px){
 .ab-ch{grid-template-columns:1fr;gap:14px}
 .ab-ch-mark{padding:0}
 .ab-ch .ab-fig{max-width:340px}
 .ab-fig-none{display:none}
}

/* TYPE N (2026-10-10, his pick "Go with N" from _proposals/type-board.html; body text his call "Instrument Serif"):
   Americaine Condensed (Alan Madić, XCicero, OFL) for numbers, titles and headings; Inter Tight (OFL) for labels and
   links in tracked caps; Instrument Serif (OFL) for reading text. Replaces the Huey setting (Herbik is not licensed
   to him). Before: _bak7-about.css */
@font-face{font-family:Americaine;src:url(/a/fonts/americaine-condensed.woff2) format("woff2")}@font-face{font-family:InterTight;font-weight:100 900;src:url(/a/fonts/inter-tight.woff2) format("woff2")}@font-face{font-family:InterTight;font-style:italic;font-weight:100 900;src:url(/a/fonts/inter-tight-italic.woff2) format("woff2")}@font-face{font-family:InstrumentSerif;src:url(/a/fonts/instrument-serif-400.woff2) format("woff2")}@font-face{font-family:InstrumentSerif;font-style:italic;src:url(/a/fonts/instrument-serif-400-italic.woff2) format("woff2")}
.ab-open h1,.ab-row h2,.ab-end h2,.ab-ch-mark i,.ab-ch-mark .t{font-family:Americaine,serif;font-weight:400;letter-spacing:0}
.ab-open h1{line-height:1}
.ab-open h1 em,.ab-end h2 em{font-family:InstrumentSerif,Georgia,serif;font-style:italic}
.ab-row h2{font-size:clamp(44px,5.4vw,88px);line-height:1}
.ab-ch-mark i{font-size:clamp(64px,6vw,96px)}
.ab-ch-mark .t{font-size:34px}
.ab .lab,.ab-interests,.ab-row .n,.ab-row .when,.ab-row h3,.ab-end nav,.ab-exp>header,.ab-proc>header,.ab-ch-mark .lab{font-family:InterTight,Arial,sans-serif;font-weight:500}
.ab-statement,.ab-row p.copy,.ab-ch-body,.ab-skills h3,.ab-skills li{font-family:InstrumentSerif,Georgia,serif}

/* SPACING + HEADLINE (2026-10-10, his calls: "fix spacing in the about page" on the chapter rows, "fix the type
   setting here" on "clear ... stories."). The chapters sit on the Experience rows' grid (label, mark, copy, drawing),
   so both sections share their columns and padding; the copy no longer leaves a wide empty right side. The
   headline's emphasis is Americaine like the rest of the line (an italic serif inside a condensed line read as a
   different size). Before: _bak8-about.css */
.ab-ch{grid-template-columns:90px 1fr 1fr minmax(220px,320px);gap:24px;align-items:center;padding:28px var(--gut)}
.ab-ch>.n{font:500 11px InterTight,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);align-self:start;padding-top:10px}
.ab-ch-mark{flex-direction:row;align-items:baseline;gap:18px;align-self:center;padding:0}
.ab-ch-mark i{font-size:clamp(44px,5.4vw,88px);line-height:1}
.ab-ch-mark .t{font-size:clamp(28px,2.6vw,40px)}
.ab-ch-body{font-size:20px;line-height:1.35;max-width:34ch}
.ab-open h1 em,.ab-end h2 em{font-family:Americaine,serif;font-style:normal;font-synthesis:none}
@media(max-width:860px){.ab-ch{grid-template-columns:1fr;gap:14px}.ab-ch>.n{padding:0}.ab-ch .ab-fig{max-width:340px}}