/* ============================================================
   Anders Hedegaard — portfolio subpages
   Design system derived from the Figma layouts (frame width 3856):
   margin 70, gutter 40, 12 columns, heading 180  →  expressed as
   ratios of viewport width so it scales 1:1 with the design.
   ============================================================ */

/* ---- Adobe Fonts (Typekit) --------------------------------
   Paste your web-project kit in the page <head>:
   <link rel="stylesheet" href="https://use.typekit.net/XXXXXXX.css">
   Families used: neue-haas-grotesk-text (headings + body).
   Until the kit is added, the fallback grotesk below is used.    */

:root{
  --bg:#ffffff;
  --ink:#141312;            /* near-black text */
  --ink-soft:#141312;
  --accent:#E7402E;         /* Eva red — per-page overridable */
  --pink:#FFDCDC;           /* menu/burger hover — same as wheel */

  /* grid — 3856 frame: margin 70 (1.815%), gutter 40 (1.037%) */
  --gx: clamp(20px, 1.815vw, 70px);
  --gutter: clamp(10px, 1.037vw, 40px);
  --vgap: clamp(12px, 1.04vw, 40px);      /* gap between stacked media = gutter */

  /* type scale — Figma frame 3856: size/3856*100 = vw, cap = px value */
  --fs-h1:  clamp(40px, 4.767vw, 184px);   /* heading 164.8–183.81, cap 184, CAPS 75 bold */
  --fs-sub: clamp(17px, 1.219vw, 47px);    /* subtitle 47, 75 bold */
  --fs-meta:clamp(17px, 1.219vw, 47px);    /* meta / disciplines 47 */
  --fs-body:clamp(17px, 1.219vw, 47px);    /* body 47, 55 roman */

  --font-text: "neue-haas-grotesk-display","Helvetica Neue","Inter",Arial,sans-serif;
  --font-display: "neue-haas-grotesk-display","Helvetica Neue","Inter",Arial,sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-weight:400;
  font-size:var(--fs-body); line-height:1.32;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* cross-document page transition (Chrome/Safari) + load fade fallback */
@view-transition{ navigation:auto; }
body{ animation:pageIn .7s var(--ease) both; }
@keyframes pageIn{ from{opacity:0} to{opacity:1} }

/* når View Transitions understøttes: lad VT stå for overgangen alene (ingen dobbelt-fade) */
@supports (view-transition-name: none){
  body{ animation:none; }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:.62s;
    animation-timing-function:cubic-bezier(.33,0,.2,1);
    animation-fill-mode:both;
    mix-blend-mode:normal;
  }
  ::view-transition-old(root){ animation-name:ah-vt-out; }
  ::view-transition-new(root){ animation-name:ah-vt-in;  }
  @keyframes ah-vt-out{ to  { opacity:0; transform:scale(1.012); } }
  @keyframes ah-vt-in { from{ opacity:0; transform:scale(1.012); } }
}
@media (prefers-reduced-motion: reduce){
  @keyframes ah-vt-out{ to  { opacity:0; } }
  @keyframes ah-vt-in { from{ opacity:0; } }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.2s; }
}

/* ---------- layout primitives ---------- */
.wrap{ width:100%; padding-inline:var(--gx); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }

.full{ grid-column:1 / -1; }
.half-l{ grid-column:1 / 7; }
.half-r{ grid-column:7 / -1; }

/* ---------- media blocks ---------- */
.stack > *{ margin-top:var(--vgap); }
.stack > *:first-child{ margin-top:0; }

.media{ position:relative; overflow:hidden; background:#f2f0ee; }
/* hero sits inside the page frame (not full-bleed) — white margin all round */
.hero.media{ margin:var(--gx) var(--gx) 0; }
.media img,.media video{ display:block; width:100%; height:auto; will-change:transform; }
/* full-bleed row wrapper keeps grid alignment while cropping overflow */
.row{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); align-items:start; }
/* side-by-side pair: each cell only as tall as its own media (no bg frame under a shorter one) */
.row .media{ background:none; }
/* portræt-billede: fylder bredden på mobil, men centreret og højde-begrænset på desktop (ikke kæmpehøjt) */
.media.portrait{ display:flex; justify-content:center; background:none; }
.media.portrait img,.media.portrait video{ width:auto; max-width:100%; max-height:88vh; height:auto; }

/* ---------- intro / text block ---------- */
.intro{ padding-block: clamp(16px,1.7vw,44px) clamp(40px,4.6vw,150px); }
.intro .grid{ row-gap: clamp(20px,2vw,60px); align-items:start; }

.headwrap{ grid-column:1 / 8; }   /* heading cols 1–7 */
.rightcol{ grid-column:8 / -1; }  /* facts + body cols 8–12, stacked together */
h1.title{
  font-family:var(--font-text); font-weight:700; text-transform:uppercase;
  font-size:var(--fs-h1); line-height:.92; letter-spacing:-.02em;
  white-space:nowrap;   /* JS fits to the column so it never overlaps the facts */
}
.subtitle{
  font-weight:700; font-size:var(--fs-sub); line-height:1.16;
  margin-top: clamp(12px,0.95vw,34px); max-width:26em;
}

.metawrap{ /* stacked inside .rightcol */ }
.meta-rule{ border-top:1px solid var(--ink); padding-top: clamp(8px,.6vw,20px); }
.meta-cols{ display:grid; grid-template-columns:2fr 4fr; column-gap:var(--gutter); font-size:var(--fs-meta); line-height:1.3; }
.meta-cols .k{ font-weight:700; }        /* 75 bold */
.meta-cols .disc{ font-weight:400; }     /* 55 roman */
.meta-cols .k span{ display:block; }
.meta-cols .disc span{ display:block; }
.body{
  font-weight:400; font-size:var(--fs-body); line-height:1.34;
  margin-top: clamp(24px,3.0vw,116px); max-width:34em;
}
.body p + p{ margin-top:1.2em; }

/* ---------- reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(38px); }
.reveal.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.media img.rv,.media video.rv{ transform:scale(1.06); }
.media.in img.rv,.media.in video.rv{ transform:scale(1); transition:transform 1.4s var(--ease); }

@media (prefers-reduced-motion:reduce){
  body{ animation:none; }
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none; }
  .media img.rv,.media video.rv{ transform:none; }
}

/* ---------- top nav / burger (consistent w. wheel) ---------- */
/* burger — small, left, difference blend (black over light, white over dark).
   Fixed position + glyph match the wheel; navigation lives in the menu. */
#burger{ position:fixed; top:calc(var(--gx) - 3px); left:var(--gx); z-index:9999;   /* -3px kompenserer ikon-inset → øverste bar flugter præcist med billedets topkant */
  width:32px; height:28px; padding:0; border:0; background:none; cursor:pointer; }
#burger .ic{ position:absolute; inset:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
  background:var(--burger-col,#141312);   /* JS samples what's behind & sets black/white — always visible */
  transition:opacity .6s var(--ease), transform .6s var(--ease), background .25s ease; }
#burger .ic-burger{ -webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAABBCAYAAAC6jghZAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAItJREFUeAHt2rENwDAMA0E5++8c72BAX92N8CXBMzP/sOob1okcEDkgckDkgMgBkQMiB0QOiBwQOSByQOSAyAAAAPDsjHPLOttFQOSAyAGRAyIHRA6IHBA5IHJA5IDIAZEDIgdEBgAAgGfOLQHbRUDkgMgBkQMiB0QOiBwQOSByQOSAyAGRAyIHRA5ckG0DVfnow9gAAAAASUVORK5CYII="); mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAABBCAYAAAC6jghZAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAItJREFUeAHt2rENwDAMA0E5++8c72BAX92N8CXBMzP/sOob1okcEDkgckDkgMgBkQMiB0QOiBwQOSByQOSAyAAAAPDsjHPLOttFQOSAyAGRAyIHRA6IHBA5IHJA5IDIAZEDIgdEBgAAgGfOLQHbRUDkgMgBkQMiB0QOiBwQOSByQOSAyAGRAyIHRA5ckG0DVfnow9gAAAAASUVORK5CYII="); }
#burger .ic-x{ -webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc0MJxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAA1xJREFUeAHd3E9u2kAUx/EZuECOgGSxzxHIBliSE7Q9SduTVL1BukNs0p6gF8ASR8gJIPOzeMiA/4w978284SshDDGR8sGRbM9orPFovV7PTqfTL2vtt+12ezAP0HK5/I7n3W7302f/ad8OQDoej+9u89lhbebz+Z/9fv9hMu6M9MM9FkVRmLIs//V9phOqhjQ7v/WUO1YNifLCaoVqQKKyxWpAonqxGqE6kKjssDqQqE6sOygPJCobLA8kqhXrCmoAEqUeawAS1Yh1gRqBRKnFGoFE3WFVUAFIlDqsACTqCmvKgESpwWJAoi5YdrVavbs/cGH4Okwmk5dUZ/CMSPVeJ7gscY+D4as6QnGkmsgJIf12lzlvFlvnazkcWTPDV9QjSxDpKzYsvZMzljQSsvWf5IgVAwnZ2z1ywoqFhGzTnjlgxURCtu0TmrFiIyHb9UmNWCmQUCcU0oSVCgn1QiENWCmRkBcUSomVGgl5Q6EUWBqQ0CAoFBNLCxIaDIViYGlCQqOgkCSWu/vwxShCQqOhkBAWbvo9Gd6CkFAQFBLC4iwYCQVDIcVYLEiIBQopxGJDQmxQSBEWKxJihUIKsNiREDsUSoglgoREoFACLDEkJAaFImKJIiFRKBQBSxwJiUOh87D9f8N/xv3mkF5NhCYmQudrN24k9BxrRFr8iBK6C1AvyiCrKFQEJEocSwwqIhIliiUClQCJEsNih0qIRIlgsUIpQKLYsdigFCFRrFgsUAqRKDasYCjFSBQLVtCZudSQksY5paOhJMfdHNSLNqxR/3oxBie1TTkaDBVzBFcT1iCoFMPcWrC8oVLOBdCA5QWlYcJEaqxeKE2zSlJidUJpm3qDUmG1QmlEolJgNUJpRqJiY91B5YBExcS6gsoJiYqFdYHKEYmKgVVB5YxESWPZR0CiJLFwm4V7gCEJEqq+eeZbNO53Vc/Tsiz/FkWBVwsTXjIkCksJYEkBt7kxgcP4AAc8voBqgQgmrORIFAdWHQmvL0uOBGKpQaJCsG6R0NUiNiOx1CFRY7CakNDdskgDsdQiUUOw2pBQ40JbnljqkSgfrC4k1Lp0Ww9WNkhUF1YfEupcDLAFKzskqgnLBwn1Li95g5UtElXHckAfPkiDcpc6G/NA4XJnyIDoJ6FDBZOGUAQTAAAAAElFTkSuQmCC"); mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc0MJxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAA1xJREFUeAHd3E9u2kAUx/EZuECOgGSxzxHIBliSE7Q9SduTVL1BukNs0p6gF8ASR8gJIPOzeMiA/4w978284SshDDGR8sGRbM9orPFovV7PTqfTL2vtt+12ezAP0HK5/I7n3W7302f/ad8OQDoej+9u89lhbebz+Z/9fv9hMu6M9MM9FkVRmLIs//V9phOqhjQ7v/WUO1YNifLCaoVqQKKyxWpAonqxGqE6kKjssDqQqE6sOygPJCobLA8kqhXrCmoAEqUeawAS1Yh1gRqBRKnFGoFE3WFVUAFIlDqsACTqCmvKgESpwWJAoi5YdrVavbs/cGH4Okwmk5dUZ/CMSPVeJ7gscY+D4as6QnGkmsgJIf12lzlvFlvnazkcWTPDV9QjSxDpKzYsvZMzljQSsvWf5IgVAwnZ2z1ywoqFhGzTnjlgxURCtu0TmrFiIyHb9UmNWCmQUCcU0oSVCgn1QiENWCmRkBcUSomVGgl5Q6EUWBqQ0CAoFBNLCxIaDIViYGlCQqOgkCSWu/vwxShCQqOhkBAWbvo9Gd6CkFAQFBLC4iwYCQVDIcVYLEiIBQopxGJDQmxQSBEWKxJihUIKsNiREDsUSoglgoREoFACLDEkJAaFImKJIiFRKBQBSxwJiUOh87D9f8N/xv3mkF5NhCYmQudrN24k9BxrRFr8iBK6C1AvyiCrKFQEJEocSwwqIhIliiUClQCJEsNih0qIRIlgsUIpQKLYsdigFCFRrFgsUAqRKDasYCjFSBQLVtCZudSQksY5paOhJMfdHNSLNqxR/3oxBie1TTkaDBVzBFcT1iCoFMPcWrC8oVLOBdCA5QWlYcJEaqxeKE2zSlJidUJpm3qDUmG1QmlEolJgNUJpRqJiY91B5YBExcS6gsoJiYqFdYHKEYmKgVVB5YxESWPZR0CiJLFwm4V7gCEJEqq+eeZbNO53Vc/Tsiz/FkWBVwsTXjIkCksJYEkBt7kxgcP4AAc8voBqgQgmrORIFAdWHQmvL0uOBGKpQaJCsG6R0NUiNiOx1CFRY7CakNDdskgDsdQiUUOw2pBQ40JbnljqkSgfrC4k1Lp0Ww9WNkhUF1YfEupcDLAFKzskqgnLBwn1Li95g5UtElXHckAfPkiDcpc6G/NA4XJnyIDoJ6FDBZOGUAQTAAAAAElFTkSuQmCC"); opacity:0; transform:rotate(-90deg) scale(.55); }
body.menu-open #burger .ic-burger{ opacity:0; transform:rotate(90deg) scale(.55); }
body.menu-open #burger .ic-x{ opacity:1; transform:rotate(0) scale(1); }
#burger:hover .ic{ background:var(--pink); }

/* menu — identical to the wheel (Neue Haas Display, uppercase, staggered
   entrance, #464646 -> pink hover). frost = blur <main> (burger + menu are
   siblings of <main>, so they stay sharp; backdrop-filter can't blur the
   transform-composited images). */
#menu{ position:fixed; inset:0; z-index:55; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.06em;
  background:rgba(236,234,230,.30);
  opacity:0; pointer-events:none; transition:opacity .75s cubic-bezier(.22,1,.36,1); }
body.menu-open #menu{ opacity:1; pointer-events:auto; }
main{ transition:filter .5s cubic-bezier(.33,0,.2,1); }
body.menu-open main{ filter:blur(46px); }
#menu a, #menu .m-contact{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5.2vw,64px);
  letter-spacing:-0.02em; line-height:1.12; color:#464646; text-decoration:none; cursor:pointer;
  text-transform:uppercase; transform:translateY(14px); opacity:0;
  background:none; border:0; padding:0; font-family:var(--font-display);
  transition:color .3s ease, transform .8s cubic-bezier(.22,1,.36,1), opacity .65s ease; }
body.menu-open #menu a, body.menu-open #menu .m-contact{ transform:translateY(0); opacity:1; }
#menu a:hover, #menu .m-contact:hover{ color:var(--pink); }

/* Contact → email + phone slide down as selectable, copyable text */
#menu .m-details{ display:flex; flex-direction:column; align-items:center; gap:.12em;
  font-weight:600; font-size:clamp(15px,2.1vw,22px); letter-spacing:-.01em; color:#464646;
  text-align:center; user-select:text; -webkit-user-select:text;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s var(--ease), opacity .4s ease, margin-top .55s var(--ease); }
#menu.contact-open .m-details{ max-height:26vh; opacity:1; margin-top:.4em; }
#menu .m-details a{ font:inherit; color:inherit; text-transform:none; letter-spacing:inherit;
  transform:none; opacity:1; }
#menu .m-details a:hover{ color:var(--pink); }
#menu .m-copy{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; transition:color .25s ease; }
#menu .m-copy:hover, #menu .m-copy:focus-visible, #menu .m-copy.copied{ color:var(--pink); }

/* ---------- footer: Home (left) + Next project (right) ---------- */
.next{ display:flex; justify-content:space-between; align-items:flex-end;
  padding: clamp(70px,9vw,200px) var(--gx) clamp(46px,5.5vw,120px); gap:24px; }
.nav-home, .nav-next{ font-family:var(--font-text); font-weight:700; color:var(--ink);
  font-size:clamp(30px,5vw,96px); line-height:1; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.26em; transition:color .3s ease; }
.nav-next{ flex-direction:column; align-items:flex-end; gap:.24em; text-align:right; }
.nav-next .lbl{ font-family:var(--font-text); font-size:var(--fs-meta); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.45; }
.nav-next .nx{ display:flex; align-items:center; gap:.26em; }
.pil{ display:inline-block; height:.58em; width:auto; flex:0 0 auto;
  transition:transform .5s var(--ease); }
.pil.flip{ transform:scaleX(-1); }
.nav-home:hover .pil{ transform:scaleX(-1) translateX(.16em); }
.nav-next:hover .pil{ transform:translateX(.16em); }

/* ---------- no orphans / widows ---------- */
.subtitle, .body p, .meta-cols, .cv-item, .contact p{ text-wrap:pretty; }
h1.title, .cv-title, .next .nx{ text-wrap:balance; }

/* ============================================================
   MOBILE  (own layout, not a squeeze)
   ============================================================ */
@media (max-width:760px){
  :root{
    --gx:18px; --gutter:12px; --vgap:14px;
    --fs-h1:clamp(40px,15vw,120px);   /* JS fits each heading to fill the frame width */
    --fs-sub:clamp(16px,4.6vw,23px);
    --fs-meta:13.5px;
    --fs-body:16px;
  }
  /* everything stacks full width on mobile, flush with the image frame */
  .half-l,.half-r,.headwrap,.rightcol{ grid-column:1 / -1; }
  .row{ row-gap:var(--vgap); }   /* stablede halv-par får samme mellemrum som fuld-blokke */
  h1.title{ white-space:nowrap; line-height:.93; letter-spacing:-.025em; }
  .intro{ padding-block:12px 26px; }        /* tighter text page */
  .intro .grid{ row-gap:16px; }
  .subtitle{ max-width:none; margin-top:9px; line-height:1.12; }
  .meta-rule{ padding-top:11px; }
  .metawrap{ margin-top:2px; }
  .body{ margin-top:15px; max-width:none; line-height:1.32; }
  .body p + p{ margin-top:1em; }
  .meta-cols{ column-gap:16px; }
  .next{ padding: clamp(48px,13vw,80px) var(--gx) clamp(30px,8vw,54px); }
  .nav-home, .nav-next{ font-size:22px; }
  .nav-next .lbl{ font-size:11px; }
}

/* KØS-style third metadata column (collaborator) */
.meta-cols.three{ grid-template-columns:2fr 3fr 3fr; }
.collab span{ display:block; }
@media (max-width:760px){ .meta-cols.three{ grid-template-columns:1fr 1fr; } .collab{ grid-column:1 / -1; margin-top:10px; } }