@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-roman.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("assets/fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --paper:#F1ECE3;
  --ink:#120F0A;
  --night:#13100B; /* matches the portrait's own background */
  --soft:#5A5248;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --pad:clamp(20px,4.4vw,72px);
  --gap:clamp(14px,1.7vw,28px);
  /* spacing: 48 / 96 / 160 */
  --s1:clamp(28px,3.34vw,48px);
  --s2:clamp(56px,6.67vw,96px);
  --s3:clamp(96px,11.1vw,160px);
  /* type: two display sizes, two reading sizes, one note size */
  --d1:clamp(46px,7.3vw,106px);
  --d2:clamp(34px,4vw,58px);
  --large:clamp(21px,1.8vw,26px);
  --body:clamp(18px,1.4vw,20px);
  --note:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--body);line-height:1.55;font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,blockquote,figure,ol{margin:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip{position:absolute;left:var(--pad);top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;font-family:var(--sans);font-size:14px;z-index:10}
.skip:focus{top:12px}

/*
  A manuscript page on a 12-column grid:
  two left edges only: the page edge (headline, labels, notes, numerals, figure, quote, email)
  and the reading column, 6–11.
*/
.masthead,.hero,.block,.site-footer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad);max-width:1600px;margin-inline:auto}
.block{padding-bottom:var(--s3);align-items:first baseline}
.block>h2,.block>.text{grid-column:6/12}
.block>h2{grid-row:1;font-size:var(--d2);line-height:1.02;margin-bottom:var(--s1)}
.block>.text{grid-row:2}
h1,h2{font-weight:340;letter-spacing:-.02em;text-wrap:balance}
h2 em{font-weight:320;display:block}
.text p{text-wrap:pretty}
.text p+p{margin-top:.95em}
.dash{margin-inline:.08em}

.label{grid-column:1/5;grid-row:1;font-family:var(--sans);font-size:var(--note);font-weight:500;line-height:1.4}
.note{grid-column:1/5;max-width:30ch;font-family:var(--sans);font-size:var(--note);line-height:1.5;color:var(--soft);text-wrap:pretty}

.action{font-size:var(--large);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.action:hover{text-decoration-thickness:2px}

/* masthead */
.masthead{align-items:start;padding-block:32px 0}
.brand{width:max-content}
.masthead .brand{grid-column:1/5}
.brand img{width:156px}
.masthead nav{grid-column:6/13;display:flex;justify-content:flex-end;gap:clamp(18px,2.4vw,36px);font-family:var(--sans);font-size:var(--note);padding-top:10px}
.masthead nav a{text-decoration:none;color:var(--soft)}
.masthead nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}

/* hero */
.hero{padding-block:var(--s3) var(--s2);align-items:first baseline}
.hero h1{grid-column:1/13;font-size:var(--d1);line-height:.95;letter-spacing:-.028em;margin-bottom:var(--s2)}
.lead{grid-column:6/12;grid-row:2;font-size:var(--large);line-height:1.36;letter-spacing:-.006em;text-wrap:pretty}
.hero-note{grid-row:2}
.hero-action{grid-column:6/12;margin-top:var(--s1)}

/* approach: steps set as paragraphs with hanging numerals */
.steps{grid-column:6/12;grid-row:2;list-style:none;padding:0;counter-reset:step}
.steps li{position:relative;counter-increment:step}
.steps li+li{margin-top:var(--s1)}
.steps li::before{content:counter(step);position:absolute;top:0;right:calc(100% + var(--gap) * 1.6);text-align:right;font-size:var(--d2);line-height:.8;font-weight:250;letter-spacing:-.03em;color:var(--soft)}
.steps h3{font-weight:360;font-size:clamp(24px,2vw,30px);line-height:1.15;letter-spacing:-.01em;margin-bottom:10px}
.steps p{text-wrap:pretty}

/* testimonial breaks out to the right */
.testimonial blockquote{grid-column:1/12;grid-row:2;margin-top:var(--s1)}
.testimonial blockquote p{text-wrap:balance!important;font-style:italic;font-weight:320;font-size:clamp(30px,3.6vw,54px);line-height:1.13;letter-spacing:-.015em;text-wrap:pretty}
.hang{margin-left:-.42em}
.testimonial{padding-bottom:calc(var(--s3) * 1.25)}
.testimonial figcaption{grid-column:1/12;margin-top:var(--s1);font-size:var(--large)}
.testimonial figcaption::before{content:"— ";margin-left:-1em}

/* the dark half: the person */
.dark{background:var(--night);color:var(--paper);padding-top:var(--s2);--soft:#B7AE9F}
.dark .contact .text p{color:var(--soft)}
/* the portrait sits on the ink it was photographed against */
.about{align-items:start}
.portrait{grid-column:1/6;grid-row:1/4;width:calc(100% + var(--pad));max-width:none;margin-left:calc(var(--pad) * -1)}
.portrait{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%),linear-gradient(to left,transparent,#000 18%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 16%),linear-gradient(to left,transparent,#000 18%);mask-composite:intersect}
.about>h2{grid-column:7/12;margin-top:var(--s2)}
.about>.text{grid-column:7/12}
.about .text>p{font-size:var(--large);line-height:1.4;letter-spacing:-.006em}
.speaking{margin-top:var(--s1);max-width:none}
.speaking{color:var(--soft)}
.speaking h3{font-weight:500;color:var(--paper);font-size:var(--note)}

.contact{padding-bottom:var(--s2)}
.contact>h2{grid-column:6/13}
.contact-action{margin-top:var(--s1)}
.contact>h2{grid-row:4;margin-top:var(--s3)}
.contact>.text{grid-row:5}
.email-row{grid-column:1/13;grid-row:2;margin-top:var(--s1);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px}
.email{display:inline-block;font-size:var(--d1);font-weight:320;letter-spacing:-.03em;line-height:.95;white-space:nowrap;text-decoration:none}
.email:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
#copy-email{font:500 var(--note) var(--sans);color:var(--soft);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
#copy-email:hover{color:var(--paper)}
.status{grid-column:1/13;grid-row:3;min-height:1.5em;margin-top:10px;font-family:var(--sans);font-size:var(--note);color:var(--soft)}

.footer-band{background:var(--night);color:var(--paper)}
.site-footer{align-items:last baseline;padding-block:0 40px;font-family:var(--sans);font-size:var(--note);color:#B7AE9F}
.site-footer::before{content:"";grid-column:1/-1;height:1px;background:rgba(241,236,227,.3);margin-bottom:28px}
.site-footer .brand{grid-column:1/5}
.site-footer .brand img{width:120px}
.site-footer span{grid-column:6/13}

/* tablet: margins fold into the column */
@media (max-width:980px){
  .block>h2,.block>.text,.lead,.hero-action,.steps,.contact>h2{grid-column:4/13}
  .note{grid-column:1/-1;grid-row:auto!important;margin-top:var(--s1)}
  .portrait{grid-column:1/-1;grid-row:1;width:calc(100% + 2 * var(--pad));margin-inline:calc(var(--pad) * -1);margin-top:calc(var(--s2) * -1)}
  .about>h2{grid-row:2;grid-column:1/-1;margin-top:var(--s1)}
  .about>.text{grid-row:3;grid-column:1/-1}
}
/* mobile: one column */
@media (max-width:680px){
  .masthead,.hero,.block,.site-footer{grid-template-columns:minmax(0,1fr)}
  .masthead>*,.hero>*,.block>*,.site-footer>*,.site-footer::before{grid-column:1/-1!important;grid-row:auto!important}
  .masthead{row-gap:20px}
  .masthead nav{padding-top:0;gap:20px;justify-content:flex-start}
  .hero{padding-top:64px}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .label{margin-bottom:20px}
  .testimonial figcaption::before{margin-left:0}
  .steps li::before{position:static;display:block;text-align:left;font-size:44px;margin-bottom:14px}
  .email{white-space:normal;overflow-wrap:anywhere;font-size:clamp(30px,8.6vw,40px)}
  .site-footer{row-gap:16px}
}