:root{
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:clamp(16px,5vw,88px); --gap:clamp(14px,2vw,32px); --maxw:1360px;
  --sec:clamp(88px,11vw,168px);
}
/* palettes: the page is espresso, .papir sections turn to paper */
:root,.espresso{
  --ground:#1a1512; --ground-2:#231c18; --ink:#ece4d8; --ink-2:#a3958a; --line:#3b322b; --accent:#b8713d;
  color-scheme:dark;
}
.papir{
  --ground:#ebe4d8; --ground-2:#e2dacd; --ink:#1b1613; --ink-2:#6f645a; --line:#cdc2b3; --accent:#9a5a2c;
  color-scheme:light;
}
.espresso,.papir{background:var(--ground);color:var(--ink)}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:5px}

/* one grid for every band: gutter | 12 columns | gutter */
.band{display:grid;column-gap:var(--gap);
  grid-template-columns:[full-start] minmax(var(--gut),1fr) repeat(12,[c] minmax(0,calc((var(--maxw) - 11*var(--gap))/12))) [c] minmax(var(--gut),1fr) [full-end]}
.c-all{grid-column:c 1 / c 13}

/* type */
.eyebrow{font:500 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin:0 0 22px}
h1,h2{font-family:var(--display);font-weight:300;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,6.4vw,96px);line-height:1;}
h1 em{font-style:italic;font-weight:300}
h2{font-size:clamp(34px,4.6vw,66px);line-height:1.02;margin-bottom:26px}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:36ch;margin:28px 0 0}
p{margin:0 0 1.1em}
.txt p{max-width:40ch}
.cap{font:400 11.5px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}
.cap i{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:0;font-size:13.5px}
.more{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;margin-top:14px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.more::after{content:"→";font-family:var(--display);font-size:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.more:hover{border-color:var(--ink)}
.more:hover::after{transform:translateX(6px)}

/* header */
header{grid-column:c 1 / c 13;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-block:26px 0;flex-wrap:wrap}
.wordmark{font:500 19px/1 var(--display);letter-spacing:-.01em}
header nav{display:flex;gap:26px}
header nav a{font:500 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
header nav a:hover{color:var(--ink)}

/* hero: text left, portrait bleeding right */
.hero{padding-block:clamp(48px,7vw,110px) 0;align-items:start}
.hero .txt{grid-column:c 1 / c 7}
.hero .art{grid-column:c 7 / full-end;position:relative}
.hero .art img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero .art .cap{position:absolute;left:0;bottom:0;margin:0;transform:translateX(-100%) rotate(180deg);padding:0 0 0 0;writing-mode:vertical-rl;margin-left:-14px}

/* doors: photo (art right) and drawing (art left) */
.door{padding-block:var(--sec) 0}
.door .txt{align-self:start;padding-top:2px}
.door .art{position:relative}
.door .art .main img{width:100%;aspect-ratio:3/4;object-fit:cover}
.door .art .inset{position:absolute;width:36%;bottom:-17%}
.door .art .inset img{aspect-ratio:1;object-fit:cover;width:100%}
.door .art .inset .cap{max-width:100%}
.door-r .txt{grid-column:c 1 / c 6}
.door-r .art{grid-column:c 7 / full-end}
.door-r .art .inset{left:0;transform:translateX(-42%)}
.door-l .art{grid-column:full-start / c 8;grid-row:1}
.door-l .txt{grid-column:c 9 / c 13;grid-row:1}
.door-l .art .inset{right:0;transform:translateX(30%)}
.door-l .art .main .cap{padding-left:var(--gut)}
.door-r .art .main .cap{padding-right:var(--gut);text-align:right}
.door .art{margin-bottom:clamp(40px,9vw,140px)}
/* room below, so the hanging inset stays inside its own colour */
.door.espresso,.door.papir{padding-bottom:var(--sec)}

/* footer */
footer{padding-block:var(--sec) 40px}
footer .c-all{border-top:1px solid var(--line);padding-top:36px}
.big{font:300 clamp(48px,9vw,132px)/1 var(--display);letter-spacing:-.02em;margin:0 0 34px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline;font:400 12px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.foot nav{display:flex;gap:26px}
.foot nav a:hover{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .door .art .main img,.hero .art img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .door .art:hover .main img{transform:scale(1.015)}
}
@media (max-width:1000px){
  .door .art .inset{width:40%}
  .door-r .art .inset{transform:translateX(-24%)}
  .door-l .art .inset{transform:translateX(18%)}
}
@media (max-width:760px){
  .hero{align-items:start}
  .hero .txt{grid-column:c 1 / c 13;grid-row:1;padding-block:0 34px}
  .hero .art{grid-column:full-start / full-end;grid-row:2}
  .hero .art .cap{padding-inline:var(--gut)}
  .hero .art .cap{position:static;transform:none;writing-mode:horizontal-tb;margin:12px 0 0}
  .door .txt,.door .art,.door-l .txt,.door-l .art{grid-column:c 1 / c 13;grid-row:auto}
  .door .txt{padding-top:26px}
  .door .art{grid-column:full-start / full-end;margin-bottom:0}
  .door-l .txt{order:-1}
  .door .art .main .cap{padding-inline:var(--gut)}
  .door .art .inset{position:static;transform:none;width:52%;margin:22px var(--gut) 0 auto;}
  .door-l .art .inset{margin:22px auto 0 var(--gut)}
  header{padding-top:20px}
  header nav{width:100%;gap:22px}
}

/* current page in the menu */
header nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* gallery pages: a title, then one band per picture */
.page-head{padding-block:clamp(48px,7vw,110px) 0}
.page-head h1{grid-column:c 1 / c 13}

/* foto.html: photos keep their proportions and never get taller than the screen.
   Placement: wide, left, right, tall-left, tall-right or pair. Phones show every photo full width. */
.shot{padding-top:clamp(56px,9vw,150px)}
.shot figure{grid-column:full-start / full-end}
.shot figure + figure{margin-top:clamp(56px,9vw,150px)}
.shot img{width:100%;max-height:86vh;max-height:86svh;object-fit:contain;object-position:left}
.shot .cap{padding-inline:var(--gut)}
@media (min-width:761px){
  .shot figure{grid-column:c 1 / c 13}
  .shot .cap{padding-inline:0}
  .shot.left figure{grid-column:c 1 / c 10}
  .shot.right figure{grid-column:c 4 / c 13}
  .shot.tall-left figure{grid-column:c 2 / c 7}
  .shot.tall-right figure{grid-column:c 8 / c 13}
  .shot.pair figure:first-child{grid-column:c 2 / c 6}
  .shot.pair figure:last-child{grid-column:c 8 / c 12;margin-top:clamp(48px,10vw,180px)}
  .shot.right img,.shot.tall-right img{object-position:right}
  .shot.right .cap,.shot.tall-right .cap{text-align:right}
}

/* tegninger.html: one drawing at a time, centred and printed onto the paper, so white turns to paper */
.sheet{padding-top:clamp(80px,12vw,200px)}
.sheet figure{grid-column:c 1 / c 13}
.sheet img{width:100%;max-height:78vh;max-height:78svh;object-fit:contain;mix-blend-mode:multiply}
.sheet .cap{text-align:center}
@media (min-width:761px){
  .sheet figure{grid-column:c 4 / c 10}
}