/* Domaine Display Italic (Klim), licensed for robinbery.com */
@font-face{font-family:"Domaine Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/DomaineDisplay-RegularItalic.woff2") format("woff2")}
/* One page, four screens. On desktop a pinned scroll scene carries the name from the video into the bio; then works, then What We Carry.
   Day: ink on a soft white like the magazine. Night (follows the device): ink and paper swap to a warm darkened studio. */
:root{
  --paper:#F9F8F5;
  --ink:#151514;
  --stone:#7D7B76;
  --rule:#DAD8D3;
  --on-video:#FBFBF9;   /* text over the video stays light in both modes */
  /* Real fonts first (Adobe Fonts kit / Klim web licence), Google stand-ins after */
  --f-display:"Domaine Display","Newsreader",Georgia,serif;
  --f-text:"Domaine Text","Newsreader",Georgia,serif;
  --f-sans:"Aktiv Grotesk","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,7vw,128px);
  /* What We Carry: lifted from the Daughters of the Dust still (linen dress, dry sand, grey-blue sea) */
  --sand:#7A6347;
  --wwc-fg:#F4EFE6;
  --wwc-stone:rgba(244,239,230,.62);
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* Type scale: one label size for all small capitals (menu, index, captions, logo subline).
     The name is sized from it so the subline is always exactly a label: 11 / .132 = 83px */
  --label:11px;
  --name-size:min(calc(var(--label) / .132), 17vw);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#141413;--ink:#ECE9E2;--stone:#8E8A83;--rule:#2C2B29;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#141413;--ink:#ECE9E2;--stone:#8E8A83;--rule:#2C2B29;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Drawn arrow for links that leave the site (the ↗ character turns into an emoji on iPhone) */
.arr{display:inline-block;width:.85em;height:.85em;margin-left:.35em;vertical-align:-.05em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
[hidden]{display:none !important}
/* ---------- Phone menu ---------- */
.menu-btn{display:none;font:inherit;font-family:var(--f-sans);font-size:var(--label);font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  background:none;border:0;color:inherit;padding:8px 0;cursor:pointer;pointer-events:auto}
.mmenu{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(env(safe-area-inset-top,0px) + 22px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);opacity:0;transition:opacity .22s var(--ease-out)}
.mmenu.open{opacity:1}
.mm-close{display:block;justify-self:end;color:var(--ink)}
.mm-links{display:grid;align-content:center;gap:10px}
.mm-links a,.mm-links button{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;background:none;border:0;padding:4px 0;text-align:left;cursor:pointer;
  opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.mmenu.open .mm-links > *{opacity:1;transform:none}
.mmenu.open .mm-links > *:nth-child(2){transition-delay:.04s}
.mmenu.open .mm-links > *:nth-child(3){transition-delay:.08s}
.mm-ext{display:flex;gap:28px}
.mm-ext a{font-family:var(--f-sans);font-size:var(--label);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none}
@media (prefers-reduced-motion:reduce){.mmenu,.mm-links a,.mm-links button{transition:none}}
.caps{font-family:var(--f-sans);text-transform:uppercase;letter-spacing:.09em;font-size:var(--label);font-weight:500}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:flex-end;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 28px) var(--gutter) 28px;color:var(--navfg,var(--ink));pointer-events:none;
  transition:color .25s ease,transform .24s var(--ease-out),opacity .24s var(--ease-out);--navbg:var(--tint,var(--paper))}
html.on-dark .nav{color:var(--on-video)}
/* Menu bar: solid page colour, no rule */
html:not(.on-dark) .nav{background:var(--navbg);padding-bottom:22px;padding-top:calc(env(safe-area-inset-top,0px) + 22px)}
.nav > *{pointer-events:auto}
html.nav-hidden .nav{transform:translateY(-100%);opacity:0}
.nav-links{display:flex;gap:clamp(16px,3vw,40px)}
.nav-links a,.nav-links button{font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:none;
  font-family:var(--f-sans);font-size:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.09em}
@media (hover:hover) and (pointer:fine){.nav-links a:hover,.nav-links button:hover{text-decoration:underline;text-underline-offset:4px}}

/* ---------- Identity block (name + subline) ---------- */
/* Lockup: italic name with the two-line caps subline tucked under the baseline */
.id{display:inline-flex;flex-direction:column;align-items:flex-start;font-size:var(--name-size);--m:1;color:color-mix(in srgb,var(--ink) calc(var(--m)*100%),var(--on-video))}
.id .name{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1em;line-height:1;letter-spacing:-.02em;margin:0;white-space:nowrap}
.id .sub{font-family:var(--f-sans);font-weight:500;text-transform:uppercase;font-size:max(9px,.132em);letter-spacing:.09em;line-height:1.25;margin:-.47em 0 0;padding-left:.08em}
.id .sl,.id .name{display:block}
.id .sl{width:max-content}

/* ---------- Hero (screen 1) ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#111;color:var(--on-video)}
.hero-media{position:absolute;inset:0}
.hero-media picture{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.hero-media video{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero.has-video .hero-media video{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.12) 40%,rgba(0,0,0,.42))}
.hero-name{position:absolute;inset:0;display:grid;place-items:center;padding-inline:var(--gutter)}
.hero-name .id{--m:0}
.hero-meta{position:absolute;inset:auto var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);display:flex;justify-content:space-between;align-items:end;color:rgba(255,255,255,.82)}
/* Line first, then the word; the word sits on the same baseline as COPENHAGEN */
.scroll-cue{display:flex;align-items:flex-end;gap:12px}
.scroll-cue i{display:block;width:1px;height:40px;background:currentColor;transform-origin:top;animation:cue 2.4s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scroll-cue i{animation:none}}

/* ---------- About (screen 2) ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px clamp(40px,8vw,160px);
  padding:clamp(140px,24vh,260px) var(--gutter) 120px;min-height:100svh;align-content:start}
.about .id{align-self:start}
.copy{align-self:start;max-width:30em;display:grid;gap:56px;min-width:0;padding-top:.6em}
.bio{font-size:15.5px;line-height:1.65;margin:0;text-wrap:pretty}
.bio em{font-style:italic}
.index{display:grid}
.index a,.index button,.index .row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border:0;
  background:none;color:inherit;text-decoration:none;font:inherit;cursor:pointer;text-align:left;width:100%}
.index span:last-child{color:var(--stone);font-family:var(--f-sans);font-size:12px;font-variant-numeric:tabular-nums;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.index a:hover span:last-child,.index button:hover span:last-child{transform:translateX(-4px);color:var(--ink)}}
@media (max-width:859px){
  .about{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:120px;padding-bottom:72px}
  .works{padding-top:72px}
  .copy{padding-top:0}
  /* Phones: the name was just on the video, so here it leaves a quiet space instead (still read by screen readers) */
  .stage .about .lockup .id{opacity:0 !important}
  .stage .about .lockup{height:0;overflow:hidden}
  .stage .about{padding-top:82px}
  /* Phones: the subline is exactly a label, like every other small-capitals line */
  .id .sub{font-size:var(--label)}
}

/* ---------- Pinned scene (desktop, motion allowed) ---------- */
html.anim .scene{height:260vh;position:relative}
/* Phones and reduced motion: no pinning, so the video comes first in the normal page flow */
html:not(.anim) .stage{display:flex;flex-direction:column}
html:not(.anim) .stage .hero{order:-1}
html.mob .stage .hero{position:sticky;top:0;z-index:0}
html.mob .stage .about{position:relative;z-index:1;background:var(--paper)}
html.anim .stage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow:hidden}
html.anim .hero{position:absolute;inset:0;height:auto;z-index:2}
html.anim .hero-name{display:none}
html.anim .stage .about{position:absolute;inset:0;min-height:0;height:100%;padding-block:0;align-items:center;align-content:center}
html.anim .lockup{position:absolute;left:0;top:50%;width:100%;padding-inline:var(--gutter);z-index:3;pointer-events:none}
html.anim .lockup .id{pointer-events:auto}
html.anim #copy{opacity:0;grid-column:2;align-self:center;padding-top:0}

/* ---------- Works (screen 3) ---------- */
.works{padding:clamp(140px,20vh,240px) var(--gutter) clamp(80px,12vh,140px);background:var(--tint,var(--paper))}
.sec-head{display:grid;justify-items:center;text-align:center;gap:18px;margin-bottom:clamp(80px,14vh,160px)}
.sec-head h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(36px,4.2vw,68px);line-height:.95;letter-spacing:-.02em;margin:0}
.sec-head p{margin:0;color:var(--stone)}
/* As the sand comes in under the paintings, their text crossfades to the light colour instead of sinking into the brown */
.works{--w-ink:var(--ink);--w-stone:var(--stone)}
html.works-light .works{--w-ink:var(--wwc-fg);--w-stone:var(--wwc-stone)}
.works .sec-head,.works .cap,.works .cap .t,.works .cap .btn-link{transition:color .35s ease}
.works .sec-head{color:var(--w-ink)}
.works .sec-head p{color:var(--w-stone)}
/* At night, collectors can see the paintings on white, the way they will hang */
.cap.wall{display:none;margin-top:4px}
.cap .wall-link{text-decoration:none}
@media (hover:hover) and (pointer:fine){.cap .wall-link:hover{text-decoration:underline}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cap.wall{display:block}}
:root[data-theme="dark"] .cap.wall{display:block}
html.nav-wall:not(.on-dark) .nav{--navbg:#F9F8F5;color:#151514}
html.white-wall .works{--paper:#F9F8F5;--ink:#151514;--stone:#7D7B76;--rule:#DAD8D3;background:var(--paper);color:var(--ink);transition:background-color .4s ease}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(100px,16vh,180px) clamp(40px,7vw,128px);align-items:start}
.work{--r:.8;width:min(100%,calc(42vh * var(--r)));justify-self:center}
@media (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.grid{grid-template-columns:1fr;gap:96px}.work{width:min(100%,calc(58vh * var(--r)))}}
.work-img{margin:0 0 13px;overflow:hidden;background:var(--rule);max-width:100%}
.work-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),opacity .5s ease}
.work-img img:not(.loaded){opacity:0}
@media (hover:hover) and (pointer:fine){.work:hover .work-img img{transform:scale(1.02)}}
/* Caption: same type as the index on screen 2; the title is the only label */
.cap{font-family:var(--f-sans);font-size:12px;font-weight:400;line-height:1.5;margin:0;color:var(--w-stone,var(--stone))}
.cap.ttl{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.cap .t{text-transform:uppercase;letter-spacing:.09em;font-weight:500;font-size:var(--label);color:var(--w-ink,var(--ink))}
.cap .y{font-variant-numeric:tabular-nums}
.cap .btn-link{font:inherit;color:var(--w-ink,var(--ink));padding:0;text-underline-offset:3px}
.btn-link{background:none;border:0;padding:6px 0;cursor:pointer;color:inherit;font-family:var(--f-sans);font-size:14px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:transform .16s var(--ease-out)}
.btn-link:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .work{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:0;transform:translateY(28px)}}
  }
}

/* ---------- What We Carry (screen 4): same layout as screen 2, sand ground ---------- */
.about.wwc{background:var(--sand);color:var(--wwc-fg);--stone:var(--wwc-stone);min-height:100svh;padding-bottom:clamp(140px,20vh,220px)}
.wwc .index span:last-child{color:var(--wwc-stone)}
.wwc .id{color:inherit}
/* Moving film grain over the whole section, text included; clicks pass through */
.about.wwc{position:relative;isolation:isolate;overflow:hidden}
.wwc .id,.wwc .copy{position:relative;z-index:1}
.wwc-cue{display:none;position:fixed;pointer-events:none;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 40px);z-index:1;color:var(--wwc-stone);opacity:0}
html.anim .wwc-cue{display:flex}
.intro-cue{display:none;position:fixed;pointer-events:none;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 40px);z-index:4;color:rgba(255,255,255,.82)}
html.anim .intro-cue{display:flex}
html.anim .hero-meta .scroll-cue{visibility:hidden}
/* Film grain over the opening video, under the name */
.vgrain{position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.28;mix-blend-mode:overlay;background-size:220px 220px}
.hero-name,.hero-meta{z-index:2}
.grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.15;mix-blend-mode:multiply;background-size:220px 220px}
html.anim .wwc-scene{height:200vh;position:relative}
html.anim .wwc-stage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow:hidden}
html.anim .about.wwc{height:100%;min-height:0;padding-block:0;grid-template-rows:1fr;align-content:stretch;background:var(--paper)}
html.anim .wwc .id{align-self:center}
html.anim .wwc .copy{align-self:end;margin-bottom:var(--copy-bottom,120px);padding-top:0}
.index .row{cursor:default}

/* ---------- Enquiry dialog ---------- */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px)}
dialog::backdrop{background:rgba(21,21,20,.55)}
@media (prefers-reduced-motion:no-preference){
  dialog[open]{animation:pop .22s var(--ease-out)}
  dialog[open]::backdrop{animation:fade .22s var(--ease-out)}
  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
  @keyframes fade{from{opacity:0}}
}
.dlg{padding:clamp(24px,5vw,40px);display:grid;gap:22px}
.dlg-top{display:flex;justify-content:space-between;align-items:start;gap:16px}
.dlg h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:36px;line-height:1;margin:6px 0 0}
.dlg .about-work{color:var(--stone);margin:6px 0 0;font-size:15px}
.x{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px}
.field{display:grid;gap:6px}
.field label{font-family:var(--f-sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:8px 0;border-radius:0;outline:none;width:100%}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{border-bottom-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dlg-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.dlg-foot small{color:var(--stone);font-size:13px;max-width:28em;line-height:1.45}
.send{font-family:var(--f-sans);font-size:14px;font-weight:500;background:var(--ink);color:var(--paper);border:0;padding:14px 26px;cursor:pointer;transition:transform .15s var(--ease-out)}
.send:active{transform:scale(.97)}
/* Sent: the form gives way to a calm confirmation, so nobody mistakes it for a fresh form */
.dlg-done h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(40px,7vw,56px);line-height:1;margin:8px 0 0;outline:none}
.dlg-done .done-text{margin:0;font-size:16px;line-height:1.6;color:var(--stone);max-width:30em}
.dlg-done .done-text b{font-weight:400;color:var(--ink)}
.dlg-done .dlg-foot{margin-top:18px}
@media (prefers-reduced-motion:no-preference){
  .dlg-done:not([hidden]){animation:doneIn .32s var(--ease-out)}
  @keyframes doneIn{from{opacity:0;transform:translateY(8px)}}
}
.form-msg{margin:0;font-size:15px;border-left:2px solid var(--ink);padding-left:12px}
/* Phones: no bar at all, just the word in a small chip of page colour, in the same spot on every screen;
   it slips away while scrolling down. Placed last so it wins over the desktop bar rules. */
@media (max-width:859px){
  .hero-meta{right:22px}
  .vgrain{opacity:.18}
  .nav .nav-links{display:none}
  .nav .menu-btn{display:block}
  html .nav,html:not(.on-dark) .nav{background:transparent;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px}
  html:not(.on-dark) .nav .menu-btn{background:var(--navbg)}
  html .nav .menu-btn{padding:8px 10px}
}