/* Morten Benestad — personlig side. Par: ett oppdragsbilde og ett notat, samme blikk. */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{--ground:#EEECE6;--ink:#1D1D1A;--quiet:#6A6A61;--hold:#DEDBD2;--gutter:clamp(1.25rem,4vw,3.5rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Fraunces",serif;font-weight:300;font-size:1rem;line-height:1.55;
  font-variation-settings:"SOFT" 50,"WONK" 0;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block}
a{color:inherit;text-decoration-thickness:.5px;text-underline-offset:.28em}
a:hover{text-decoration-thickness:1.5px}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}

.intro{padding:clamp(1rem,2.2vw,1.6rem) var(--gutter) clamp(3.5rem,11vh,7rem)}
.intro h1{font-size:1.125rem;font-style:italic;font-weight:300;margin:0 0 clamp(3rem,12vh,7rem)}
.intro p{font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.25;font-weight:250;letter-spacing:-.008em;max-width:20em;margin:0}

.pairs{display:grid;row-gap:clamp(4rem,11vw,9rem);padding:0 var(--gutter) clamp(4rem,11vw,9rem)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(.75rem,1.6vw,1.5rem);max-width:74rem;width:100%;margin-inline:auto}
.pair figure{margin:0}
.frame{position:relative;aspect-ratio:4 / 5;background:var(--hold);overflow:hidden}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .wait{position:absolute;left:1rem;bottom:.8rem;color:var(--quiet);font-size:.9375rem}
.pair figcaption{padding-top:.8rem;color:var(--quiet);font-size:.9375rem}
.pair figcaption a{color:var(--ink)}

.out{border-top:.5px solid color-mix(in oklab,var(--quiet) 55%,transparent);margin:0 var(--gutter);padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(3rem,8vh,5rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--gutter)}
.out h2{font-size:.9375rem;font-weight:300;color:var(--quiet);margin:0 0 .4rem}
.out a{font-size:clamp(1.2rem,2vw,1.5rem);font-style:italic;text-decoration:none}
.out a:hover{text-decoration:underline;text-decoration-thickness:1px}
@media (max-width:760px){.out{grid-template-columns:1fr}.pair{column-gap:.5rem}}