/* Morten Benestad — visuell dagbok. Lys papirflate, Marcellus, bildene bærer. */
@font-face{font-family:"Marcellus";src:url("../fonts/marcellus.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";src:url("../fonts/marcellus-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--paper:#F2EEE6;--hold:#E4DFD4;--ink:#24221E;--quiet:#77726A;--gutter:clamp(1.25rem,4vw,3.5rem);--gap:clamp(1rem,2.4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Marcellus",serif;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap;padding:clamp(1.2rem,2.6vw,2rem) var(--gutter)}
.name{font-size:1.0625rem;letter-spacing:.14em;text-transform:uppercase}
.menu{display:flex;gap:1.8rem;font-size:.9375rem;letter-spacing:.08em}
.menu a{color:var(--quiet);padding-bottom:.15rem;border-bottom:1px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:currentColor}

/* oversikt */
.posts{padding:clamp(3rem,10vh,6.5rem) var(--gutter) clamp(4rem,10vh,8rem);display:grid;row-gap:clamp(4rem,10vw,8rem)}
.card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.card .ph{grid-column:1 / span 9}
.card .meta{grid-column:10 / span 3;padding-bottom:.2rem}
.card h2{font-weight:400;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:.02em;margin:0 0 .4rem}
.card .where{color:var(--quiet);font-size:.9375rem;letter-spacing:.06em;margin:0}

/* plassholdere: grå flate til bildet er på plass */
.ph{position:relative;margin:0;background:var(--hold);overflow:hidden}
.ph .lbl{position:absolute;left:1rem;bottom:.8rem;font-size:.8125rem;color:var(--quiet);letter-spacing:.06em}
.ph img,.ph video{position:relative;z-index:1}
.ph.ok{background:none}
.ph.ok .lbl{display:none}
.ph:not(.ok){aspect-ratio:var(--r,3/2)}
.ph:not(.ok) img,.ph:not(.ok) video{position:absolute;inset:0;height:100%;object-fit:cover}

/* innlegg */
.lead{padding:clamp(3rem,10vh,6.5rem) var(--gutter) clamp(2rem,6vh,4rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.lead h1{grid-column:1 / span 7;font-weight:400;font-size:clamp(3rem,8vw,6.5rem);line-height:.95;letter-spacing:.02em;margin:0}
.lead .where{grid-column:1 / span 7;color:var(--quiet);letter-spacing:.08em;margin:.9rem 0 0}
.lead p.text{grid-column:8 / span 4;align-self:end;font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;margin:0}
.film{padding:0 var(--gutter) clamp(4rem,10vw,8rem)}
.seq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(3.5rem,9vw,7.5rem);padding:0 var(--gutter) clamp(4rem,10vw,8rem)}
.full{grid-column:1 / -1}
.wl{grid-column:1 / span 8}
.wr{grid-column:5 / span 8}
.tl{grid-column:2 / span 5}
.tr{grid-column:7 / span 5}
.tc{grid-column:4 / span 6}
.pair-l{grid-column:1 / span 6}
.pair-r{grid-column:7 / span 6}
.next{padding:0 var(--gutter) clamp(4rem,10vh,7rem);color:var(--quiet);letter-spacing:.06em}
.next a{color:var(--ink);border-bottom:1px solid currentColor}

/* about */
.about{min-height:calc(100svh - 10rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:clamp(2rem,6vh,4rem) var(--gutter)}
.about .ph{grid-column:2 / span 4;--r:4/5}
.about p{grid-column:7 / span 5;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.35;margin:0}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem;padding:1.6rem var(--gutter) 2.2rem;font-size:.875rem;letter-spacing:.06em;color:var(--quiet)}
.foot a{color:var(--ink)}
.foot a:hover{border-bottom:1px solid currentColor}

@media (max-width:760px){
  .card .ph,.card .meta,.lead h1,.lead .where,.lead p.text,.about .ph,.about p{grid-column:1 / -1}
  .card .meta{padding-top:1rem}
  .lead p.text{margin-top:2rem}
  .about p{margin-top:2rem}
  .wl,.wr,.tc,.pair-l,.pair-r{grid-column:1 / -1}
  .tl,.tr{grid-column:2 / -2}
}