/* ===== Svanernes · Vores arbejde — light architectural editorial ===== */
:root{
  --paper:#f3efe7;        /* warm bone canvas */
  --paper-2:#ebe4d6;      /* deeper recess */
  --ink:#1b1a17;          /* warm near-black */
  --ink-soft:#544f45;     /* muted body */
  --ink-faint:#8c8576;
  --line:rgba(27,26,23,.14);
  --accent:#8a6a45;       /* warm brass/clay (the door brass + pine) */
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gap:clamp(56px,9vw,120px);
  --pad:clamp(20px,5vw,80px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* selection */
::selection{background:var(--accent);color:var(--paper)}

/* ---- shared type ---- */
.kicker{
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.serif-i{font-style:italic;font-weight:400}

.section-head{display:flex;align-items:baseline;gap:18px;padding:0 var(--pad);margin-bottom:clamp(28px,4vw,56px)}
.section-head__no{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--accent);padding-top:.6em}
.section-head__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5vw,62px);line-height:1.05;letter-spacing:-.01em;
}

/* ===== Preloader ===== */
.preloader{position:fixed;inset:0;z-index:120;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.preloader__inner{text-align:center}
.preloader__label{font-family:var(--serif);font-size:clamp(22px,4vw,34px);letter-spacing:-.01em}
.preloader__bar{width:min(220px,50vw);height:1px;background:var(--line);margin:18px auto 12px;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--accent)}
.preloader__sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.reduced .preloader,.no-js .preloader{display:none}
.preloader.is-done{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .4s ease,padding .4s ease,border-color .4s}
.nav.is-solid{background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:13px;padding-bottom:13px}
.nav__brand{font-family:var(--serif);font-size:19px;letter-spacing:-.01em;line-height:1}
.nav__brand span{color:var(--accent);margin-left:.35em;font-style:italic}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav__links a{font-size:14px;letter-spacing:.01em;color:var(--ink-soft)}
.nav__links a:hover{color:var(--ink)}
.nav__cta{border:1px solid var(--ink);color:var(--ink)!important;padding:8px 16px;border-radius:0;
  font-weight:500;transition:background .3s,color .3s}
.nav__cta:hover{background:var(--ink);color:var(--paper)!important}
/* hero is dark photo -> nav reads light until solid */
.nav:not(.is-solid) .nav__brand,.nav:not(.is-solid) .nav__links a{color:var(--paper)}
.nav:not(.is-solid) .nav__brand span{color:#e9d9c2}
.nav:not(.is-solid) .nav__cta{border-color:rgba(255,255,255,.7)}
.nav:not(.is-solid) .nav__cta:hover{background:var(--paper);color:var(--ink)!important}
/* small screens: logo + kontakt only, no overflow */
@media(max-width:560px){
  .nav__links a:not(.nav__cta){display:none}
  .nav__brand{font-size:17px}
  .nav__cta{padding:7px 13px;font-size:13px}
}

/* ===== Reveal base ===== */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}

/* ===== HERO ===== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero__media{position:absolute;inset:-8% 0;will-change:transform}
.hero__media img{filter:saturate(1.02) contrast(1.02)}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,15,.62) 0%,rgba(20,18,15,.12) 42%,rgba(20,18,15,.18) 100%)}
.hero__copy{position:absolute;left:0;right:0;bottom:clamp(48px,8vh,110px);padding:0 var(--pad);color:var(--paper)}
.hero__copy .kicker{color:#ecd9bf;margin-bottom:18px}
.hero__title{font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,8.2vw,128px);line-height:.99;letter-spacing:-.025em;max-width:16ch}
.hero__title span{display:block}
.hero__hint{position:absolute;right:var(--pad);bottom:clamp(48px,8vh,110px);color:var(--paper);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}
/* hero reveal: stagger handled in JS via .reveal */

/* ===== MANIFESTO ===== */
.manifesto{padding:clamp(90px,14vw,200px) var(--pad);max-width:1100px}
.manifesto__lead{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:28px}
.manifesto__body{font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,3.6vw,48px);line-height:1.28;letter-spacing:-.012em;color:var(--ink)}
.manifesto__body em{color:var(--ink);font-style:italic}

/* ===== PAIRS (Forvandlingen — rum for rum) ===== */
.pairs{padding:clamp(56px,9vw,120px) 0 var(--gap);background:var(--paper-2)}
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,22px);
  padding:0 var(--pad);margin-bottom:clamp(44px,6vw,90px);align-items:end}
.pair:last-child{margin-bottom:0}
.pair__before,.pair__after,.pair__half{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2}
.pair__before{grid-column:1/6}
.pair__after{grid-column:6/13}
.pair__half{grid-column:span 6;aspect-ratio:16/9}
.pair__before img{filter:grayscale(.18) brightness(.97);transform:scale(1.04);will-change:transform}
.pair__half img{filter:grayscale(.18) brightness(.97)}
.pair__after img{filter:contrast(1.02) saturate(1.03)}
.pair__tag{position:absolute;top:12px;left:12px;z-index:1;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink)}
.pair__tag--after{background:var(--ink);color:var(--paper)}
.pair__cap{grid-column:1/13;display:flex;align-items:baseline;gap:16px;padding-top:6px;flex-wrap:wrap}
.pair__cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.01em;flex-basis:100%}
.pair__cap p{font-size:14px;color:var(--ink-soft);letter-spacing:.01em}
/* portrait shot in a landscape cell: crop to the telling middle band */
.pair__before--portrait img{object-position:center 32%}

/* ===== WALK (pinned horizontal signature) ===== */
.walk{position:relative;background:var(--ink);color:var(--paper)}
.walk__track{display:flex;flex-wrap:nowrap;height:100svh;align-items:stretch;will-change:transform}
.walk__panel{position:relative;flex:0 0 auto;width:min(78vw,1180px);height:100svh;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.08)}
.walk__panel img{filter:contrast(1.03) saturate(1.03);transition:transform 1.2s ease}
.walk__panel--tall img{object-position:center 30%}
.walk__cap{position:absolute;left:30px;bottom:34px;display:flex;flex-direction:column;gap:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
.walk__cap span{font-family:var(--serif);font-size:clamp(24px,2.4vw,40px);line-height:1}
.walk__cap em{font-style:normal;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.walk__intro{display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:0 clamp(28px,5vw,90px);width:min(60vw,720px);background:var(--ink)}
.walk__intro .section-head__no{color:#caa676}
.walk__intro h2{font-family:var(--serif);font-weight:300;font-size:clamp(46px,7vw,104px);line-height:.95;letter-spacing:-.02em}
.walk__intro p{color:rgba(255,255,255,.72);max-width:30ch;font-size:clamp(15px,1.4vw,19px)}
.walk__cue{font-size:34px;color:#caa676;margin-top:10px}

/* ===== UNDERVEJS (work in progress) ===== */
.during{padding:var(--gap) 0 0}
.during__intro{padding:0 var(--pad);margin:-10px 0 clamp(36px,5vw,64px);
  max-width:54ch;color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px);line-height:1.6}
.during__grid{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,22px);row-gap:clamp(36px,5vw,72px);
  padding:0 var(--pad);align-items:start}
.during__item{position:relative;overflow:hidden;background:var(--paper-2)}
.during__item img{will-change:transform}
.during__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;
  background:linear-gradient(to top,rgba(20,18,15,.52),transparent);pointer-events:none}
.during__item figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;
  color:var(--paper);font-size:12.5px;letter-spacing:.05em;line-height:1.45;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}
.during__item figcaption em{font-style:italic;color:rgba(243,239,231,.74)}
/* the opening trio: a descending staircase of portraits */
.during__item--a{grid-column:1/6;aspect-ratio:3/4}
.during__item--b{grid-column:6/10;aspect-ratio:3/4;margin-top:clamp(34px,6vw,110px)}
.during__item--c{grid-column:10/13;aspect-ratio:3/4;margin-top:clamp(64px,11vw,200px)}
/* spartling + the outlets row */
.during__item--d{grid-column:1/5;aspect-ratio:3/4}
.during__item--e{grid-column:5/13;aspect-ratio:16/9;align-self:end}
/* electrics pair + pull quote */
.during__item--f{grid-column:1/5;aspect-ratio:3/4;margin-top:clamp(28px,5vw,80px)}
.during__item--g{grid-column:5/9;aspect-ratio:3/4}
.during__pull{grid-column:9/13;align-self:center;justify-self:start;
  font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,32px);
  line-height:1.25;letter-spacing:-.01em;color:var(--ink-soft);padding-left:clamp(0px,1vw,14px)}
/* finale: the preserved stucco with the new wiring beneath it (keep the cornice at top) */
.during__item--h{grid-column:1/13;aspect-ratio:2/1}
.during__item--h img{object-position:center top}

/* ===== CRAFT ===== */
.craft{padding:var(--gap) 0}
.craft__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,22px);
  padding:0 var(--pad);align-items:start}
.craft__a{grid-column:1/8;aspect-ratio:7/5;overflow:hidden;background:var(--paper-2)}
.craft__b{grid-column:8/13;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2);margin-top:clamp(40px,7vw,120px);position:relative}
.craft__c{grid-column:1/6;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2);position:relative}
.craft__grid img{transform:scale(1.06);will-change:transform}
.craft__b::after,.craft__c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:84px;
  background:linear-gradient(to top,rgba(20,18,15,.38),transparent);pointer-events:none}
.craft__b figcaption,.craft__c figcaption{position:absolute;left:14px;bottom:12px;z-index:1;
  color:var(--paper);font-size:12.5px;letter-spacing:.06em;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* ===== SPEC ===== */
.spec{padding:var(--gap) var(--pad);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);max-width:1300px;margin:0 auto}
.spec__head{grid-column:1/-1;display:flex;gap:18px;align-items:baseline}
.spec__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,52px);letter-spacing:-.01em}
.spec__list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.spec__list>div{background:var(--paper);padding:20px 22px}
.spec__list dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.spec__list dd{font-family:var(--serif);font-size:clamp(19px,2vw,26px)}
.spec__work{list-style:none;display:flex;flex-direction:column}
.spec__work li{font-family:var(--serif);font-size:clamp(18px,2vw,26px);font-weight:300;
  padding:15px 0;border-bottom:1px solid var(--line)}
.spec__work li:first-child{padding-top:0}
.spec__note{grid-column:1/-1;font-size:13px;color:var(--ink-faint);letter-spacing:.02em}

/* ===== CLOSE ===== */
.close{padding:clamp(110px,18vw,240px) var(--pad);text-align:center;background:var(--paper-2)}
.close__motto{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.close__title{font-family:var(--serif);font-weight:300;font-size:clamp(30px,5.4vw,76px);
  line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin:0 auto}
.close__cta{display:inline-block;margin-top:clamp(34px,5vw,60px);
  border:1px solid var(--ink);padding:15px 34px;font-weight:500;font-size:15px;
  transition:background .3s,color .3s}
.close__cta:hover{background:var(--ink);color:var(--paper)}
.close__back{display:block;margin-top:30px;font-size:13px;letter-spacing:.04em;color:var(--ink-faint)}
.close__back:hover{color:var(--ink)}

/* ===== Never a broken image: failed photo -> quiet tile, caption stays ===== */
img.is-broken{display:none}

/* ===== Katalog index (katalog.html) ===== */
.cat-head{padding:clamp(140px,20vh,220px) var(--pad) clamp(60px,8vw,110px);max-width:1300px;margin:0 auto}
.cat-head .kicker{margin-bottom:22px}
.cat-head__title{font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,7vw,108px);line-height:1.0;letter-spacing:-.025em;max-width:14ch}
.cat-head__intro{margin-top:26px;max-width:52ch;color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px);line-height:1.6}

.cat-list{padding:0 var(--pad) var(--gap);max-width:1300px;margin:0 auto}
.cat-entry{display:block;position:relative}
.cat-entry__media{overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
.cat-entry__media img{transform:scale(1.03);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.cat-entry:hover .cat-entry__media img{transform:scale(1.07)}
.cat-entry__info{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:20px 2px 0;flex-wrap:wrap}
.cat-entry__name{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em}
.cat-entry__meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.cat-entry__go{font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.cat-entry:hover .cat-entry__go{text-decoration:underline;text-underline-offset:4px}

.cat-more{margin-top:clamp(60px,9vw,120px);padding:clamp(40px,6vw,70px) 0 0;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cat-more__note{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(19px,2.4vw,30px);color:var(--ink-soft);max-width:30ch}
.cat-more__sub{font-size:13px;color:var(--ink-faint);letter-spacing:.04em}

/* ===== Responsive ===== */
@media(max-width:820px){
  .pair__before,.pair__after,.pair__half{grid-column:1/-1;aspect-ratio:3/2}
  .craft__a,.craft__b,.craft__c{grid-column:1/-1!important;margin-top:0;aspect-ratio:3/2}
  .during__item{grid-column:1/-1!important;margin-top:0!important}
  .during__item--a,.during__item--b,.during__item--c,.during__item--d,
  .during__item--f,.during__item--g{aspect-ratio:3/4}
  .during__item--e,.during__item--h{aspect-ratio:3/2}
  .during__grid{row-gap:clamp(24px,6vw,40px)}
  .during__pull{grid-column:1/-1;justify-self:center;text-align:center;padding:14px 0}
  .spec{grid-template-columns:1fr}
  .spec__list{grid-template-columns:1fr}
  .hero__hint{display:none}
  /* walk becomes a vertical stack */
  .walk__track{flex-direction:column;height:auto}
  .walk__panel{width:100%;height:auto;aspect-ratio:3/2;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .walk__intro{width:100%;height:auto;padding:clamp(70px,16vw,120px) var(--pad)}
}

/* ===== Reduced motion / no-JS: fully readable, no pin/parallax ===== */
.reduced .walk__track,.no-js .walk__track{flex-direction:column;height:auto}
.reduced .walk__panel,.no-js .walk__panel{width:100%;height:80svh;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
.reduced .walk__intro,.no-js .walk__intro{width:100%;height:auto;padding:clamp(70px,14vw,120px) var(--pad)}
.reduced [data-parallax],.no-js [data-parallax]{transform:none!important}
.reduced .hero__media,.no-js .hero__media{inset:0}
.reduced .pair__before img,.reduced .craft__grid img,.reduced .during__grid img,
.no-js .pair__before img,.no-js .craft__grid img,.no-js .during__grid img{transform:none}
.no-js .reveal{opacity:1;transform:none}