/* Skadi Studio — geteiltes Stylesheet, Multipage */

/* ====================================================================
   I. DESIGN TOKENS — Editorial Monochrome
   ==================================================================== */
:root{
  --black:#0A0A0B;
  --carbon:#131316;
  --graphite:#1C1A1A;
  --steel:#2A2A2D;
  --bone:#E8E2D5;
  --bone-soft:#EFE9DC;
  --bone-deep:#D8D2C3;
  --ink:#1A1814;
  --ink-soft:#3A3530;
  --platinum:#C8C8CC;
  --silver:#B8B8BC;
  --champ:#D8C8A8;       /* sehr dezent, fast unsichtbar warm */
  --hair-dark:rgba(232,226,213,0.10);
  --hair-bone:rgba(26,24,20,0.10);

  --serif:"Fraunces", "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.77,0,.175,1);

  --max:1480px;
  --gutter:clamp(20px, 4vw, 72px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:400;
  background:var(--black);
  color:var(--bone);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--bone);color:var(--black)}

/* ====================================================================
   II. TYPOGRAPHY
   ==================================================================== */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--silver);
}
.eyebrow--dark{color:var(--ink-soft)}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:32px;height:1px;background:currentColor;
  margin-right:14px;
  vertical-align:middle;
  margin-bottom:3px;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  line-height:1.04;
  letter-spacing:-0.025em;
}
h1 em, h2 em, h3 em, .display em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-weight:300;
  color:var(--bone);
}

p{max-width:62ch}

/* ====================================================================
   III. CONTAINERS
   ==================================================================== */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ====================================================================
   IV. FILM GRAIN OVERLAY
   ==================================================================== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ====================================================================
   V. CURSOR SPOTLIGHT (very subtle, monochrome)
   ==================================================================== */
.spotlight{
  position:fixed;
  pointer-events:none;
  z-index:2;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,226,213,0.06) 0%, transparent 55%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.6s ease;
  mix-blend-mode:screen;
  filter:blur(4px);
}
@media (hover:hover){body:hover .spotlight{opacity:1}}
@media (max-width:880px){.spotlight{display:none}}

/* ====================================================================
   VI. NAVIGATION
   ==================================================================== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:210;
  padding:24px 0;
  transition:background 0.5s var(--ease), padding 0.5s var(--ease), border-color 0.5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,11,0.78);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  padding:14px 0;
  border-bottom-color:var(--hair-dark);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.nav__brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--serif);
}
.nav__brand-mark{
  font-size:22px;
  font-weight:300;
  letter-spacing:0.02em;
  font-variation-settings:"opsz" 144;
}
.nav__brand-mark em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
}
.nav__brand-sub{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--silver);
  font-weight:500;
}
.nav__menu{
  display:flex;
  gap:40px;
  list-style:none;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:400;
}
.nav__menu a{
  position:relative;
  padding:6px 0;
  color:rgba(232,226,213,0.7);
  transition:color 0.4s var(--ease);
}
.nav__menu a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--bone);
  transition:width 0.5s var(--ease);
}
.nav__menu a:hover{color:var(--bone)}
.nav__menu a:hover::after{width:100%}
.nav__cta{
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:13px 26px;
  border:1px solid var(--hair-dark);
  color:var(--bone);
  transition:all 0.5s var(--ease);
  font-weight:500;
}
.nav__cta:hover{background:var(--bone);color:var(--black);border-color:var(--bone)}

.burger{display:none;width:32px;height:24px;position:relative;flex-shrink:0;z-index:210}
.burger span{
  position:absolute;left:0;width:100%;height:1px;background:var(--bone);
  transition:transform 0.5s var(--ease), opacity 0.3s;
}
.burger span:nth-child(1){top:6px}
.burger span:nth-child(2){top:50%}
.burger span:nth-child(3){bottom:6px}
.burger.open span:nth-child(1){top:50%;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){bottom:50%;transform:rotate(-45deg);margin-bottom:-0.5px}

@media (max-width:880px){
  .nav__menu, .nav__cta{display:none}
  .burger{display:block}
  .nav__brand-sub{display:none}
}

.mobile-menu{
  position:fixed;inset:0;background:var(--black);z-index:200;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;
  opacity:0;pointer-events:none;transition:opacity 0.5s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
/* When menu is open, ensure nav background matches and stays visible */
body.menu-open .nav{
  background:var(--black);
}
.mobile-menu a{
  font-family:var(--serif);font-size:36px;font-weight:300;
  color:var(--bone);
}
.mobile-menu a em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100}

/* ====================================================================
   VII. HERO
   ==================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:120px 0 60px;
  overflow:hidden;
  background:var(--black);
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero__bg-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 45%;
  opacity:0;
  animation:heroReveal 2.4s var(--ease) 0.2s forwards, heroZoom 24s ease-out 0.4s forwards;
  will-change:transform, opacity;
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.55) 45%, rgba(10,10,11,0.25) 100%),
    linear-gradient(to bottom, rgba(10,10,11,0.4) 0%, transparent 30%, transparent 70%, rgba(10,10,11,0.6) 100%);
  z-index:1;
}
@keyframes heroReveal{to{opacity:1}}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}

@media (max-width:880px){
  .hero__bg::after{
    background:
      linear-gradient(to bottom, rgba(10,10,11,0.5) 0%, rgba(10,10,11,0.4) 40%, rgba(10,10,11,0.92) 100%);
  }
}

.hero__content{
  position:relative;
  z-index:2;
  max-width:780px;
}
.hero__eyebrow{
  margin-bottom:36px;
  opacity:0;transform:translateY(20px);
  animation:fadeUp 1.2s var(--ease) 0.8s forwards;
}
.hero__title{
  font-size:clamp(48px, 7.8vw, 120px);
  margin-bottom:40px;
  letter-spacing:-0.03em;
  line-height:1.06;
}
.hero__title em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:0.92em;
  letter-spacing:-0.025em;
}
.hero__title-line{
  display:block;
  overflow:hidden;
  padding-right:0.12em;
}
.hero__title-line span{
  display:block;
  opacity:0;
  transform:translateY(110%);
  animation:slideUp 1.4s var(--ease) forwards;
  padding-bottom:0.16em;
}
.hero__title-line:nth-child(1) span{animation-delay:0.4s}
.hero__title-line:nth-child(2) span{animation-delay:0.55s}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.hero__sub{
  font-size:clamp(15px, 1.4vw, 17px);
  color:rgba(232,226,213,0.78);
  max-width:48ch;
  margin-bottom:52px;
  line-height:1.75;
  opacity:0;
  animation:fadeUp 1.2s var(--ease) 1.2s forwards;
  transform:translateY(20px);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 1.2s var(--ease) 1.4s forwards;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:19px 34px;
  transition:all 0.5s var(--ease);
  position:relative;
  overflow:hidden;
  font-weight:500;
  font-family:var(--sans);
  cursor:pointer;
}
.btn--primary{
  background:var(--bone);
  color:var(--black);
}
.btn--primary:hover{background:#fff;transform:translateY(-2px)}
.btn--ghost{
  border:1px solid rgba(232,226,213,0.25);
  color:var(--bone);
}
.btn--ghost:hover{border-color:var(--bone)}
.btn--dark{
  background:var(--ink);
  color:var(--bone);
}
.btn--dark:hover{background:var(--black);transform:translateY(-2px)}
.btn--outline-dark{
  border:1px solid rgba(26,24,20,0.3);
  color:var(--ink);
}
.btn--outline-dark:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.btn__arrow{
  display:inline-block;
  transition:transform 0.4s var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(4px)}

.hero__meta{
  margin-top:96px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  opacity:0;
  animation:fadeUp 1.4s var(--ease) 1.8s forwards;
  position:relative;
  z-index:2;
  flex-wrap:wrap;
}
.hero__meta-stats{
  display:flex;
  gap:48px;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:rgba(232,226,213,0.5);
}
.hero__meta-stats span{
  display:block;
  color:var(--bone);
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
  margin-top:8px;
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.hero__scroll{
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(232,226,213,0.5);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}
.hero__scroll-line{
  width:1px;
  height:48px;
  background:linear-gradient(to bottom, transparent, var(--bone), transparent);
  animation:scrollPulse 2.6s infinite;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(0.4) translateY(-12px);opacity:0.3}
  50%{transform:scaleY(1) translateY(0);opacity:0.9}
}

@media (max-width:880px){
  .hero__meta{
    position:static;
    margin-top:64px;
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
    left:auto;right:auto;bottom:auto;
  }
  .hero__meta-stats{gap:32px;flex-wrap:wrap}
  .hero__scroll{flex-direction:row;align-items:center}
  .hero__scroll-line{width:48px;height:1px;animation:none;background:var(--bone);opacity:0.4}
}

/* ====================================================================
   VIII. MANIFEST — Large typo statement
   ==================================================================== */
.manifest{
  padding:clamp(120px, 18vw, 220px) 0;
  background:var(--black);
}
.manifest__inner{
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--gutter);
}
.manifest__text{
  font-family:var(--serif);
  font-size:clamp(34px, 5.8vw, 84px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144,"SOFT" 30;
}
.manifest__text span{
  display:inline-block;
  opacity:0.16;
  transition:opacity 0.7s var(--ease);
  margin-right:0.15em;
}
.manifest__text span.in{opacity:1}
.manifest__text em{
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.manifest__sig{
  margin-top:96px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--silver);
}
.manifest__sig::before{
  content:"";
  width:48px;
  height:1px;
  background:var(--bone);
}

/* ====================================================================
   IX. WERKE — Editorial Grid
   ==================================================================== */
.werke{
  padding:clamp(80px, 12vw, 160px) 0 clamp(120px, 16vw, 200px);
  background:var(--carbon);
  position:relative;
}
.werke__header{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:clamp(60px, 8vw, 96px);
}
@media (min-width:880px){
  .werke__header{grid-template-columns:1.4fr 1fr;gap:80px;align-items:end}
}
.werke__title{
  font-size:clamp(44px, 6vw, 92px);
  margin-top:24px;
}
.werke__intro{
  max-width:42ch;
  color:rgba(232,226,213,0.7);
  font-size:15px;
  line-height:1.8;
}

.werke__grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:20px;
}
@media (min-width:1200px){.werke__grid{gap:28px}}

.werk{
  position:relative;
  overflow:hidden;
  display:block;
  background:var(--graphite);
  cursor:pointer;
}
.werk--1{grid-column:1/span 7;aspect-ratio:4/5}
.werk--2{grid-column:8/span 5;aspect-ratio:3/4;margin-top:64px}
.werk--3{grid-column:1/span 4;aspect-ratio:3/4;margin-top:-32px}
.werk--4{grid-column:5/span 8;aspect-ratio:16/10}
.werk--5{grid-column:1/span 5;aspect-ratio:4/5;margin-top:48px}
.werk--6{grid-column:6/span 7;aspect-ratio:4/5;margin-top:48px}

@media (max-width:880px){
  .werke__grid{grid-template-columns:1fr;gap:32px}
  .werk{grid-column:1/-1 !important;margin-top:0 !important}
  .werk--1, .werk--5{aspect-ratio:4/5}
  .werk--2, .werk--3{aspect-ratio:3/4}
  .werk--4{aspect-ratio:5/4}
  .werk--6{aspect-ratio:4/5}
}

.werk__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.6s var(--ease), filter 0.8s var(--ease);
  filter:brightness(0.92) contrast(1.04);
}
.werk:hover .werk__img{transform:scale(1.05);filter:brightness(1.05) contrast(1.06)}
.werk__shimmer{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.10) 50%, transparent 62%);
  transform:translateX(-110%);
  transition:transform 1.4s var(--ease);
  pointer-events:none;
  mix-blend-mode:overlay;
}
.werk:hover .werk__shimmer{transform:translateX(110%)}
.werk__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.4) 30%, transparent 55%);
  opacity:0;
  transition:opacity 0.6s var(--ease);
  pointer-events:none;
}
.werk:hover .werk__overlay{opacity:1}
.werk__meta{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events:none;
}
.werk:hover .werk__meta{opacity:1;transform:translateY(0)}
.werk__nr{
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--silver);
}
.werk__name{
  font-family:var(--serif);
  font-size:24px;
  font-weight:300;
  font-style:italic;
  color:var(--bone);
  margin-top:6px;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.werk__count{
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(232,226,213,0.65);
  text-align:right;
}
.werke__after{
  margin-top:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.werke__after-text{
  max-width:42ch;
  font-size:14px;
  color:rgba(232,226,213,0.6);
  line-height:1.75;
}

/* ====================================================================
   X. MATERIAL — Sticky Editorial Sequence
   ==================================================================== */
.material{
  background:var(--black);
  padding:clamp(120px, 16vw, 200px) 0;
  overflow:hidden;
}
.material__intro{
  max-width:780px;
  margin:0 auto clamp(80px, 10vw, 120px);
  padding:0 var(--gutter);
  text-align:center;
}
.material__intro h2{
  font-size:clamp(36px, 5.2vw, 76px);
  margin:24px 0;
}
.material__intro p{
  margin:0 auto;
  color:rgba(232,226,213,0.7);
  font-size:16px;
  line-height:1.8;
}

.material__panels{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:24px;
  padding:0 var(--gutter);
  max-width:var(--max);
  margin:0 auto;
}
@media (max-width:880px){.material__panels{grid-template-columns:1fr;gap:32px}}

.mpanel{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--graphite);
}
.mpanel--1{grid-column:1/span 2}
.mpanel--2{grid-column:3/span 2}
.mpanel--3{grid-column:5/span 2}
.mpanel--wide{grid-column:1/span 6;aspect-ratio:21/9}
@media (max-width:880px){
  .mpanel--1, .mpanel--2, .mpanel--3, .mpanel--wide{grid-column:1}
  .mpanel--wide{aspect-ratio:5/4}
}
.mpanel__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(0.85) contrast(1.05);
  transition:transform 1.6s var(--ease), filter 0.8s var(--ease);
}
.mpanel:hover .mpanel__img{transform:scale(1.03);filter:brightness(0.95)}
.mpanel__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.55) 30%, transparent 55%);
  z-index:1;
}
.mpanel__caption{
  position:absolute;
  left:28px;right:28px;bottom:28px;
  z-index:2;
}
.mpanel__num{
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  color:var(--bone);
  letter-spacing:0.05em;
  margin-bottom:12px;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.mpanel__title{
  font-family:var(--serif);
  font-size:clamp(22px, 2.4vw, 32px);
  font-weight:300;
  line-height:1.15;
  color:var(--bone);
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
.mpanel__sub{
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(232,226,213,0.65);
}

/* ====================================================================
   XI. LINIEN — Three Editions
   ==================================================================== */
.linien{
  background:var(--bone);
  color:var(--ink);
  padding:clamp(120px, 16vw, 200px) 0;
}
.linien__header{
  text-align:center;
  margin-bottom:clamp(60px, 8vw, 100px);
}
.linien__header h2{
  font-size:clamp(40px, 5.5vw, 80px);
  color:var(--ink);
  margin-top:20px;
  max-width:18ch;
  margin-left:auto;margin-right:auto;
}
.linien__intro{
  max-width:520px;
  margin:32px auto 0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
}

.linien__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair-bone);
  border-top:1px solid var(--hair-bone);
  border-bottom:1px solid var(--hair-bone);
}
@media (max-width:880px){.linien__grid{grid-template-columns:1fr}}

.linie{
  background:var(--bone);
  padding:56px 44px;
  display:flex;
  flex-direction:column;
  min-height:540px;
  transition:background 0.5s var(--ease);
}
.linie:hover{background:var(--bone-soft)}
.linie__nr{
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:28px;
}
.linie__title{
  font-family:var(--serif);
  font-size:clamp(28px, 3vw, 38px);
  font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  margin-bottom:24px;
  line-height:1.04;
  letter-spacing:-0.02em;
  hyphens:auto;
}
.linie__title em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 50}
.linie__count{
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  color:var(--ink-soft);
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--hair-bone);
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.linie__count strong{color:var(--ink);font-weight:400}
.linie__desc{
  font-size:14.5px;
  line-height:1.85;
  color:var(--ink-soft);
  flex:1;
  margin-bottom:32px;
}
.linie__cta{
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--ink);
  align-self:flex-start;
  transition:gap 0.4s var(--ease);
}
.linie__cta:hover{gap:18px}

/* ====================================================================
   XII. FORMATE — Signature Collection (interactive)
   ==================================================================== */
.formate{
  background:var(--bone);
  color:var(--ink);
  padding:clamp(80px, 12vw, 160px) 0;
  border-top:1px solid var(--hair-bone);
}
.formate__header{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:80px;
}
@media (min-width:880px){
  .formate__header{grid-template-columns:1.2fr 1fr;gap:80px;align-items:end}
}
.formate__title{
  font-size:clamp(36px, 5vw, 64px);
  margin-top:20px;
}
.formate__intro{
  font-size:15px;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:42ch;
}

.formate__interactive{
  display:grid;
  grid-template-columns:1fr;
  gap:60px;
  align-items:center;
}
@media (min-width:980px){
  .formate__interactive{grid-template-columns:1fr 1.05fr;gap:80px}
}

.formate__viewer{
  background:var(--bone-soft);
  border:1px solid var(--hair-bone);
  padding:48px 32px;
  aspect-ratio:1/1;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
/* Room scene SVG-like backdrop */
.formate__room{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
}
.formate__room svg{
  width:100%;height:100%;
  display:block;
}
.formate__frame{
  position:absolute;
  left:50%;
  bottom:30%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, #1A1814 0%, #2A2520 50%, #1A1814 100%);
  border:2px solid #C8C0A8;
  box-shadow:0 12px 40px rgba(26,24,20,0.25), inset 0 0 0 1px rgba(232,226,213,0.1);
  transition:width 0.9s var(--ease-quart), height 0.9s var(--ease-quart);
}
.formate__frame::before{
  content:"";
  position:absolute;
  inset:6px;
  background:
    radial-gradient(circle at 30% 35%, rgba(232,226,213,0.18) 0%, transparent 45%),
    linear-gradient(135deg, #1A1814, #0A0A0B);
}
.formate__frame::after{
  content:"";
  position:absolute;
  left:50%;top:-20px;
  width:1px;height:18px;
  background:rgba(26,24,20,0.3);
  transform:translateX(-50%);
}

.formate__details{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.formate__tabs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--hair-bone);
}
.formate__tab{
  padding:18px 8px;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  background:transparent;
  border:none;
  font-weight:500;
  font-family:var(--sans);
  color:var(--ink-soft);
  transition:all 0.4s var(--ease);
  border-right:1px solid var(--hair-bone);
  position:relative;
}
.formate__tab:last-child{border-right:none}
.formate__tab:hover{color:var(--ink)}
.formate__tab.active{
  background:var(--ink);
  color:var(--bone);
}
.formate__tab small{
  display:block;
  font-size:9px;
  margin-top:4px;
  color:inherit;
  opacity:0.7;
  letter-spacing:0.18em;
}

.formate__info{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:200px;
}
.formate__info-name{
  font-family:var(--serif);
  font-size:clamp(28px, 3vw, 40px);
  font-weight:300;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.formate__info-name em{
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  display:block;
  font-size:0.5em;
  margin-top:6px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}
.formate__info-dim{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:16px;
  border-bottom:1px solid var(--hair-bone);
}
.formate__info-desc{
  font-size:14.5px;
  line-height:1.85;
  color:var(--ink-soft);
  max-width:42ch;
}

.formate__cta{margin-top:8px;align-self:flex-start}

/* ====================================================================
   XIII. PROZESS — Six Steps
   ==================================================================== */
.prozess{
  background:var(--black);
  padding:clamp(120px, 16vw, 200px) 0;
}
.prozess__header{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin-bottom:clamp(60px, 8vw, 100px);
}
@media (min-width:880px){.prozess__header{grid-template-columns:1.2fr 1fr;gap:80px}}
.prozess__title{
  font-size:clamp(40px, 5.5vw, 80px);
  margin-top:20px;
}
.prozess__intro{
  color:rgba(232,226,213,0.7);
  font-size:15.5px;
  line-height:1.85;
  align-self:end;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair-dark);
  border-top:1px solid var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);
}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
@media (min-width:880px) and (max-width:1199px){.steps{grid-template-columns:repeat(2,1fr)}}

.step{
  background:var(--black);
  padding:48px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:background 0.5s var(--ease);
  min-height:280px;
}
.step:hover{background:var(--carbon)}
.step__nr{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--bone);
  letter-spacing:0.05em;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.step__title{
  font-family:var(--serif);
  font-size:24px;
  font-weight:300;
  line-height:1.2;
  font-variation-settings:"opsz" 72;
  letter-spacing:-0.01em;
  margin-bottom:4px;
}
.step__desc{
  font-size:14px;
  color:rgba(232,226,213,0.65);
  line-height:1.85;
}

/* ====================================================================
   XIV. ATELIER / SKADI STORY — Bone island
   ==================================================================== */
.atelier{
  background:var(--bone);
  color:var(--ink);
  padding:clamp(120px, 16vw, 200px) 0;
}
.atelier__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:start;
}
@media (min-width:980px){
  .atelier__inner{
    grid-template-columns:0.9fr 1.1fr;
    gap:clamp(60px, 8vw, 120px);
  }
}

.atelier__visual{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink);
}
.atelier__visual img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
  filter:brightness(0.97) contrast(1.04);
}
.atelier__visual-mark{
  position:absolute;
  bottom:20px;left:20px;
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--bone);
  z-index:2;
}
.atelier__visual-mark::before{
  content:"";
  display:inline-block;
  width:24px;height:1px;
  background:var(--bone);
  vertical-align:middle;
  margin-right:10px;
  margin-bottom:2px;
}

.atelier__content .eyebrow{color:var(--ink-soft)}
.atelier__title{
  font-size:clamp(40px, 5.5vw, 76px);
  margin:24px 0 36px;
  color:var(--ink);
  letter-spacing:-0.025em;
}
.atelier__title em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100}

.atelier__lead{
  font-family:var(--serif);
  font-size:clamp(20px, 2vw, 26px);
  font-weight:300;
  font-style:italic;
  line-height:1.45;
  color:var(--ink);
  margin-bottom:40px;
  max-width:36ch;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.atelier__lead::before{
  content:"„";
  display:block;
  font-family:var(--serif);
  font-size:64px;
  line-height:0.5;
  color:var(--ink-soft);
  margin-bottom:24px;
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.atelier__body{
  font-size:15px;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:22px;
  max-width:56ch;
}
.atelier__sig{
  margin-top:48px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--hair-bone);
  flex-wrap:wrap;
}
.atelier__sig-name{
  font-family:var(--serif);
  font-size:32px;
  font-style:italic;
  font-weight:300;
  color:var(--ink);
  line-height:1;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.atelier__sig-meta{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:6px;
}
.atelier__sig-greeting{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
  font-variation-settings:"opsz" 144,"SOFT" 100;
}

/* ====================================================================
   XV. ACADEMY — Second pillar
   ==================================================================== */
.academy{
  background:var(--black);
  padding:clamp(120px, 16vw, 200px) 0;
  position:relative;
  overflow:hidden;
}
.academy__bg-word{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-size:clamp(180px, 28vw, 480px);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  color:rgba(232,226,213,0.025);
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:-0.04em;
  user-select:none;
}
.academy__inner{position:relative;z-index:2}
.academy__header{
  text-align:center;
  margin-bottom:clamp(80px, 10vw, 120px);
}
.academy__header h2{
  font-size:clamp(40px, 6vw, 96px);
  margin-top:24px;
}
.academy__header p{
  margin:36px auto 0;
  max-width:52ch;
  color:rgba(232,226,213,0.7);
  font-size:16px;
  line-height:1.8;
}

.academy__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair-dark);
  border-top:1px solid var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);
  margin-bottom:80px;
}
@media (max-width:880px){.academy__grid{grid-template-columns:1fr}}

.acard{
  background:var(--black);
  padding:52px 38px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background 0.5s var(--ease);
}
.acard:hover{background:var(--carbon)}
.acard__nr{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--bone);
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.acard__title{
  font-family:var(--serif);
  font-size:30px;
  font-weight:300;
  font-variation-settings:"opsz" 72;
  line-height:1.15;
  letter-spacing:-0.01em;
}
.acard__meta{
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--silver);
  padding-bottom:16px;
  border-bottom:1px solid var(--hair-dark);
  margin-bottom:8px;
}
.acard__desc{
  font-size:14px;
  line-height:1.85;
  color:rgba(232,226,213,0.65);
}

.academy__cta{text-align:center}

/* ====================================================================
   XVI. STIMMEN
   ==================================================================== */
.stimmen{
  background:var(--carbon);
  padding:clamp(120px, 16vw, 180px) 0;
}
.stimmen__header{
  text-align:center;
  margin-bottom:clamp(60px, 8vw, 100px);
}
.stimmen__header h2{
  font-size:clamp(36px, 5vw, 64px);
  max-width:18ch;
  margin:24px auto 0;
}

.stimmen__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:56px;
  max-width:1200px;
  margin:0 auto;
}
@media (max-width:880px){.stimmen__grid{grid-template-columns:1fr;gap:56px}}

.stimme{
  display:flex;
  flex-direction:column;
}
.stimme__mark{
  font-family:var(--serif);
  font-size:72px;
  line-height:0.6;
  color:var(--bone);
  font-style:italic;
  margin-bottom:24px;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  opacity:0.4;
}
.stimme__text{
  font-family:var(--serif);
  font-size:20px;
  font-weight:300;
  font-style:italic;
  line-height:1.5;
  color:var(--bone);
  margin-bottom:32px;
  flex:1;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
.stimme__author{
  padding-top:20px;
  border-top:1px solid var(--hair-dark);
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--bone);
}
.stimme__author span{
  display:block;
  margin-top:6px;
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--silver);
}

/* ====================================================================
   XVII. ANFRAGE
   ==================================================================== */
.anfrage{
  background:var(--black);
  padding:clamp(120px, 16vw, 200px) 0 clamp(100px, 12vw, 160px);
}
.anfrage__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
}
@media (min-width:980px){.anfrage__inner{grid-template-columns:1fr 1.1fr;gap:clamp(60px, 8vw, 120px)}}

.anfrage__title{
  font-size:clamp(40px, 5.5vw, 80px);
  margin:24px 0 36px;
}
.anfrage__intro p{
  font-size:16px;
  line-height:1.85;
  color:rgba(232,226,213,0.72);
  margin-bottom:24px;
}
.anfrage__details{
  margin-top:64px;
  padding-top:40px;
  border-top:1px solid var(--hair-dark);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.anfrage__detail-label{
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:12px;
}
.anfrage__detail-value{
  font-family:var(--serif);
  font-size:18px;
  font-weight:300;
  color:var(--bone);
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}

/* Form */
.form{display:flex;flex-direction:column;gap:24px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.field{position:relative}
.field label{
  position:absolute;
  top:18px;left:0;
  font-size:13px;
  color:rgba(232,226,213,0.5);
  letter-spacing:0.04em;
  pointer-events:none;
  transition:all 0.4s var(--ease);
}
.field input, .field select, .field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair-dark);
  padding:18px 0 12px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--bone);
  outline:none;
  transition:border-color 0.4s var(--ease);
  font-weight:400;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.65}
.field select{
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23E8E2D5' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
  padding-right:24px;
}
.field option{background:var(--black);color:var(--bone)}
.field input:focus, .field select:focus, .field textarea:focus{border-bottom-color:var(--bone)}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select.has-value + label{
  top:-4px;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--silver);
}
.field input::placeholder, .field textarea::placeholder{color:transparent}

.form__consent{
  font-size:12px;
  color:rgba(232,226,213,0.55);
  line-height:1.65;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.form__consent input{
  margin-top:3px;
  accent-color:var(--bone);
  width:14px;height:14px;
  flex-shrink:0;
}
.form__consent a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.form__submit{margin-top:16px;align-self:flex-start}

/* ====================================================================
   XVIII. FOOTER
   ==================================================================== */
.footer{
  background:var(--black);
  border-top:1px solid var(--hair-dark);
  padding:80px 0 40px;
}
.footer__inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:64px;
  margin-bottom:80px;
}
@media (max-width:880px){.footer__inner{grid-template-columns:1fr 1fr;gap:48px 32px}}
@media (max-width:480px){.footer__inner{grid-template-columns:1fr}}

.footer__brand-name{
  font-family:var(--serif);
  font-size:30px;
  font-weight:300;
  margin-bottom:24px;
  letter-spacing:0.02em;
  font-variation-settings:"opsz" 144;
}
.footer__brand-name em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100}
.footer__brand-desc{
  font-size:14px;
  color:rgba(232,226,213,0.55);
  line-height:1.8;
  max-width:34ch;
}
.footer__col-title{
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--silver);
  margin-bottom:24px;
}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.footer__col a{
  font-size:14px;
  color:rgba(232,226,213,0.7);
  transition:color 0.3s var(--ease);
}
.footer__col a:hover{color:var(--bone)}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:32px;
  border-top:1px solid var(--hair-dark);
  font-size:11px;
  letter-spacing:0.08em;
  color:rgba(232,226,213,0.42);
  flex-wrap:wrap;
  gap:16px;
}
.footer__bottom em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--silver);
  font-variation-settings:"opsz" 144,"SOFT" 100;
}

/* ====================================================================
   XIX. SCROLL REVEALS
   ==================================================================== */
.reveal{
  opacity:1;
  transform:translateY(0);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.pre{
  opacity:0;
  transform:translateY(40px);
}
.reveal.in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .hero__scroll-line, .academy__bg-word{animation:none}
}


/* ====================================================================
   MULTIPAGE — Galerie-Raum (Werke einzeln, groß)
   ==================================================================== */

/* Seiten-Kopf für Unterseiten */
.pagehead{
  padding:180px 0 80px;
  border-bottom:1px solid var(--hair-dark);
}
.pagehead__eyebrow{
  font-size:11px;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--silver);margin-bottom:28px;
}
.pagehead__eyebrow::before{
  content:"";display:inline-block;width:32px;height:1px;
  background:currentColor;margin-right:16px;vertical-align:middle;margin-bottom:3px;
}
.pagehead__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,7vw,108px);line-height:0.98;letter-spacing:-0.03em;
  font-variation-settings:"opsz" 144;
}
.pagehead__title em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100}
.pagehead__intro{
  margin-top:36px;max-width:54ch;
  font-size:17px;line-height:1.7;color:rgba(232,226,213,0.72);
}

/* Galerie: ein Werk pro Reihe, großformatig, alternierend */
.gallery{padding:0 0 40px}
.gwork{
  position:relative;
  margin:0 auto;
  padding:80px 0;
  border-bottom:1px solid var(--hair-dark);
}
.gwork:last-child{border-bottom:none}
.gwork__inner{
  display:grid;grid-template-columns:1fr;gap:0;
  align-items:center;
}
@media (min-width:900px){
  .gwork__inner{grid-template-columns:1.4fr 1fr;gap:72px}
  .gwork--flip .gwork__media{order:2}
  .gwork--flip .gwork__caption{order:1}
}
.gwork__media{
  position:relative;overflow:hidden;background:var(--black);
  transform:translateZ(0);              /* eigene GPU-Ebene: kein Weiß-Flash beim Repaint */
}
.gwork__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--black);              /* Hintergrund der Bildebene schwarz, nie weiß */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  filter:brightness(0.97) contrast(1.04);
  transition:transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.gwork:hover .gwork__media img{transform:scale(1.03);filter:brightness(1) contrast(1.06)}
.gwork__media--portrait{aspect-ratio:4/5}
.gwork__media--landscape{aspect-ratio:3/2}
.gwork__media--square{aspect-ratio:1/1}

/* Glimmer-Reflex */
.gwork__shimmer{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.10) 48%,transparent 62%);
  transform:translateX(-100%);
}
.gwork:hover .gwork__shimmer{opacity:1;animation:gshimmer 2.2s var(--ease)}
@keyframes gshimmer{to{transform:translateX(100%)}}

.gwork__caption{padding:8px 0}
.gwork__index{
  font-family:var(--serif);font-style:italic;font-size:14px;
  color:var(--silver);font-variation-settings:"opsz" 144,"SOFT" 100;
  margin-bottom:18px;
}
.gwork__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 144;margin-bottom:20px;
}
.gwork__title em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100}
.gwork__desc{
  font-size:15px;line-height:1.7;color:rgba(232,226,213,0.70);
  max-width:42ch;margin-bottom:28px;
}
.gwork__line{
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--silver);display:flex;align-items:center;gap:12px;
}
.gwork__line::before{content:"";width:24px;height:1px;background:currentColor}

/* CTA-Band am Ende der Galerie */
.galleryend{
  text-align:center;padding:120px 0 40px;
}
.galleryend__text{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(24px,3vw,38px);line-height:1.3;
  font-variation-settings:"opsz" 144,"SOFT" 80;
  max-width:24ch;margin:0 auto 40px;color:var(--bone);
}

/* Sub-Navigation aktiv-Zustand */
.nav__menu a.is-active{color:var(--bone)}
.nav__menu a.is-active::after{transform:scaleX(1)}

/* ============================================================
   LOGO-INTEGRATION (Studio Skadi — Crystal Art Portraits)
   ============================================================ */
.nav__brand{align-items:center}
.nav__brand-logo{
  height:15px;width:auto;display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); /* Lesbarkeit auch über hellem Seitenkopf */
}
.footer__brand-logo{height:62px;width:auto;display:block;margin-bottom:24px}
.topbar__brand-logo{height:15px;width:auto;display:block}
@media (max-width:600px){
  .nav__brand-logo{height:13px}
  .footer__brand-logo{height:52px}
  .nav__brand-sub{display:none}
}