/* EINHAR / VISUAL IDENTITY
   Show the actual mark, typography, physical material and motion.
   The brand guide has five large chapters, not a specification dashboard. */
:root{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body.page-brand{
  margin:0;
  min-width:320px;
  background:#000;
  color:#f4f4ef;
  font-family:"Einhar Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.034em;
}
body.page-brand::selection{color:#000;background:#f4f4ef}
body.page-brand a{color:inherit}
body.page-brand :is(a,button):focus-visible{outline:2px solid #f4f4ef;outline-offset:4px}
body.page-brand .skip{
  position:fixed;top:-100px;left:28px;z-index:800;
  padding:12px 18px;color:#111;background:#f4f4ef;
  border-radius:12px;text-decoration:none;font:550 17px/1.25 "Einhar Sans",Arial,sans-serif;
}
body.page-brand .skip:focus{top:16px}
body.page-brand .brand-home{
  position:absolute;z-index:30;top:38px;left:clamp(28px,6vw,108px);
  display:grid;place-items:center;width:48px;height:48px;text-decoration:none;
}
body.page-brand .brand-home img{display:block;width:34px;height:auto;transition:opacity .18s ease}
body.page-brand .brand-home:hover img{opacity:.75}
body.page-brand .brand-stage{
  max-width:1720px;
  margin:0 auto;
  padding:0 clamp(28px,6vw,108px) 180px;
}
body.page-brand .brand-opening{padding-top:clamp(155px,18vh,230px)}
body.page-brand .brand-opening h1{
  font:550 clamp(86px,9.5vw,152px)/.97 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.086em;margin:0;
}
body.page-brand .identity-composition{
  position:relative;
  height:clamp(560px,52vw,800px);
  margin:clamp(30px,5vw,75px) 0 0;
  isolation:isolate;
}
body.page-brand .identity-composition figure{
  margin:0;position:absolute;
  border-radius:17px;
  overflow:hidden;
  box-shadow:0 25px 65px rgba(0,0,0,.44);
}
body.page-brand .identity-composition img{
  display:block;width:100%;height:100%;object-fit:cover;
}
body.page-brand .identity-material{
  z-index:1;left:1%;top:8%;width:60%;height:62%;
  background:#121212;transform:rotate(-5deg);
}
body.page-brand .identity-sculpture{
  z-index:2;right:4%;top:3%;width:48%;height:64%;
  background:#171818;transform:rotate(5deg);
}
body.page-brand .identity-sculpture img{object-fit:cover}
body.page-brand .identity-vector{
  z-index:3;right:9%;bottom:7%;width:30%;height:38%;
  background:#f4f4ef;
  display:grid;place-items:center;
  padding:6%;
  transform:rotate(-7deg);
}
body.page-brand .identity-vector img{object-fit:contain}
body.page-brand .brand-chapter{margin:clamp(145px,16vw,245px) 0 0}
body.page-brand .brand-chapter h2{
  margin:0 0 clamp(40px,5vw,80px);
  max-width:1200px;
  font:560 clamp(58px,6.8vw,108px)/1.04 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.071em;
}
body.page-brand .brand-chapter-head{
  display:flex;align-items:end;justify-content:space-between;
  gap:24px;margin:0 0 clamp(42px,5vw,72px);
}
body.page-brand .brand-chapter-head h2{margin:0}
body.page-brand .brand-chapter-head p{
  max-width:300px;margin:0;
  font:450 clamp(20px,2.1vw,29px)/1.25 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.038em;
}
body.page-brand .mark-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
body.page-brand .mark-pair>div{
  min-width:0;
  min-height:clamp(320px,32vw,475px);
  display:grid;place-items:center;
}
body.page-brand .mark-pair img{
  display:block;width:clamp(165px,49%,420px);height:auto;max-height:82%;object-fit:contain;
}
body.page-brand .mark-black{background:#131515;border-radius:15px}
body.page-brand .mark-white{background:#f4f4ef;border-radius:15px}
body.page-brand .mark-downloads{
  display:flex;gap:32px;align-items:center;
  justify-content:flex-start;
  margin:29px 0 0;
}
body.page-brand .mark-downloads a,
body.page-brand .brand-sharing a{
  font:560 clamp(17px,1.55vw,22px)/1.4 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.025em;text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid currentColor;
}
body.page-brand .mark-downloads a:hover,
body.page-brand .brand-sharing a:hover{opacity:.75}
body.page-brand .brand-type h2{margin-bottom:clamp(40px,4vw,60px)}
body.page-brand .type-poster{
  display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:60px;
  min-height:410px;
}
body.page-brand .type-monument{
  font:480 clamp(180px,24vw,340px)/.98 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.105em;
}
body.page-brand .type-poster p{
  margin:0;justify-self:end;text-align:left;
  font:560 clamp(48px,6.1vw,96px)/1.03 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.067em;
}
body.page-brand .type-characters{
  margin:20px 0 clamp(55px,7vw,105px);
  font:430 clamp(20px,2vw,28px)/1.55 "Einhar Sans",Arial,sans-serif;
  letter-spacing:.035em;
  word-break:break-word;
}
body.page-brand .color-fields{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;margin:0;
}
body.page-brand .brand-swatch{
  display:flex;flex-direction:column;justify-content:end;
  min-width:0;min-height:clamp(210px,25vw,320px);
  padding:clamp(20px,2.8vw,39px);
  border:0;border-radius:14px;
  text-align:left;cursor:copy;
  font-family:"Einhar Sans",Arial,sans-serif;
  box-shadow:none;
  transition:transform .19s ease;
}
body.page-brand .brand-swatch:hover{transform:translateY(-5px)}
body.page-brand .brand-swatch span{
  font-size:clamp(25px,2.65vw,39px);
  font-weight:560;line-height:1.15;letter-spacing:-.055em;
}
body.page-brand .brand-swatch strong{
  display:block;margin-top:9px;
  font-size:clamp(17px,1.4vw,21px);
  font-weight:460;line-height:1.25;letter-spacing:-.025em;
}
body.page-brand .swatch-black{color:#f4f4ef;background:#000000;box-shadow:inset 0 0 0 1px #353736}
body.page-brand .swatch-ivory{color:#111;background:#f4f4ef}
body.page-brand .swatch-silver{color:#111;background:#b8b9bb}
body.page-brand .brand-motion h2{margin-bottom:15px}
body.page-brand .motion-stage{
  display:grid;place-items:center;
  position:relative;
  min-height:clamp(520px,62vw,850px);
  overflow:hidden;
  background:#000;
}
body.page-brand .motion-stage video{
  display:block;width:min(88%,800px);height:auto;
  aspect-ratio:1;object-fit:contain;
}
body.page-brand .motion-stage .reduced-motion-still{display:none}
body.page-brand .brand-sharing>img{
  display:block;width:100%;height:auto;
  max-width:1200px;
  object-fit:contain;
}
body.page-brand .brand-sharing a{display:inline-block;margin-top:32px}
body.page-brand .brand-assets{margin-bottom:150px}
body.page-brand .asset-actions{
  display:flex;flex-wrap:wrap;gap:18px;
}
body.page-brand .asset-actions a{
  display:inline-flex;justify-content:center;align-items:center;
  min-height:69px;padding:19px 31px;
  border-radius:16px;
  background:#f4f4ef;color:#111;
  font:560 clamp(18px,1.65vw,24px)/1.25 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.035em;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
body.page-brand .asset-actions a:nth-child(2){
  background:#242625;color:#f4f4ef;
}
body.page-brand .asset-actions a:hover{transform:translateY(-3px)}
body.page-brand .brand-copy-message{
  position:fixed;z-index:480;bottom:90px;left:50%;
  transform:translateX(-50%);
  background:#f4f4ef;color:#111;
  border-radius:12px;padding:12px 18px;
  font:550 16px/1.3 "Einhar Sans",Arial,sans-serif;
  white-space:nowrap;box-shadow:0 14px 46px #0009;
}
@media(max-width:840px){
  body.page-brand .brand-opening{padding-top:142px}
  body.page-brand .brand-stage{padding-inline:clamp(23px,6vw,52px)}
  body.page-brand .brand-chapter{margin-top:140px}
  body.page-brand .identity-composition{height:clamp(450px,67vw,570px)}
  body.page-brand .type-poster{gap:20px;min-height:300px}
  body.page-brand .type-monument{font-size:clamp(140px,23vw,215px)}
  body.page-brand .type-poster p{font-size:clamp(42px,6vw,63px)}
}
@media(max-width:600px){
  body.page-brand .brand-home{top:20px;left:23px}
  body.page-brand .brand-stage{padding:0 23px 115px}
  body.page-brand .brand-opening{padding-top:150px}
  body.page-brand .brand-opening h1{font-size:clamp(77px,20vw,116px)}
  body.page-brand .identity-composition{
    height:clamp(390px,112vw,565px);
    margin-top:36px;
  }
  body.page-brand .identity-composition figure{border-radius:11px}
  body.page-brand .identity-material{width:74%;height:48%;top:15%;left:0}
  body.page-brand .identity-sculpture{width:62%;height:49%;top:8%;right:1%}
  body.page-brand .identity-vector{width:48%;height:35%;bottom:8%;right:8%;padding:7%}
  body.page-brand .brand-chapter{margin-top:128px}
  body.page-brand .brand-chapter h2{font-size:clamp(54px,12vw,81px);margin-bottom:30px}
  body.page-brand .brand-chapter-head{display:block;margin-bottom:33px}
  body.page-brand .brand-chapter-head h2{margin-bottom:16px}
  body.page-brand .brand-chapter-head p{max-width:320px;font-size:21px}
  body.page-brand .mark-pair{gap:9px}
  body.page-brand .mark-pair>div{min-height:225px;border-radius:10px}
  body.page-brand .mark-pair img{width:72%;max-height:80%}
  body.page-brand .mark-downloads{margin-top:22px;gap:25px}
  body.page-brand .mark-downloads a{font-size:18px}
  body.page-brand .type-poster{grid-template-columns:.8fr 1fr;min-height:220px}
  body.page-brand .type-monument{font-size:clamp(126px,31vw,176px)}
  body.page-brand .type-poster p{font-size:clamp(37px,9vw,58px)}
  body.page-brand .type-characters{font-size:16px;line-height:1.7;margin:22px 0 48px;letter-spacing:.015em}
  body.page-brand .color-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  body.page-brand .brand-swatch{min-height:150px;padding:13px 11px;border-radius:9px}
  body.page-brand .brand-swatch span{font-size:19px}
  body.page-brand .brand-swatch strong{font-size:12px;margin-top:6px}
  body.page-brand .motion-stage{min-height:350px}
  body.page-brand .motion-stage video{width:100%}
  body.page-brand .brand-sharing a{font-size:18px;margin-top:23px}
  body.page-brand .asset-actions{gap:12px}
  body.page-brand .asset-actions a{min-height:57px;width:100%;font-size:19px}
}
@media(max-width:355px){
  body.page-brand .brand-stage{padding-inline:20px}
  body.page-brand .brand-opening h1{font-size:74px}
  body.page-brand .identity-composition{height:360px}
  body.page-brand .brand-chapter h2{font-size:50px}
  body.page-brand .type-monument{font-size:113px}
  body.page-brand .type-poster p{font-size:34px}
  body.page-brand .brand-swatch span{font-size:16px}
  body.page-brand .brand-swatch strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.page-brand .motion-stage video{display:none}
  body.page-brand .motion-stage .reduced-motion-still{
    display:block;width:min(100%,700px);height:auto;object-fit:contain;
  }
  body.page-brand .brand-swatch,
  body.page-brand .asset-actions a{transition:none!important}
}

/* On narrow screens, colors must remain large, readable objects. */
@media(max-width:600px){
  body.page-brand .color-fields{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
  }
  body.page-brand .brand-swatch{
    min-height:156px;
    padding:23px;
  }
  body.page-brand .brand-swatch span{font-size:30px}
  body.page-brand .brand-swatch strong{font-size:18px;margin-top:8px}
}
@media(max-width:355px){
  body.page-brand .brand-swatch span{font-size:27px}
  body.page-brand .brand-swatch strong{font-size:17px}
}

/* The dock must not depend on CSS inherited from another page.
   Keep the same pinned navigation on the new visual brand guide. */
html body.page-brand nav.world-floating-menu.einhar-dock{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:max(15px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  translate:none!important;
  z-index:420!important;
  margin:0!important;
}
@media(max-width:760px){
  html body.page-brand nav.world-floating-menu.einhar-dock{
    bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
}

/* Full Einhar palette. Accent colors belong to the parent site's
   navigation and editorial controls and must not disappear from its guide. */
body.page-brand .brand-palette h2{
  margin-bottom:clamp(50px,6vw,95px);
}
body.page-brand .brand-palette h3{
  margin:0 0 27px;
  font:550 clamp(32px,3.5vw,49px)/1.13 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.045em;
  color:#f4f4ef;
}
body.page-brand .color-foundation{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:clamp(75px,9vw,130px);
}
body.page-brand .color-accents{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
body.page-brand .color-foundation .brand-swatch{
  min-height:clamp(205px,21vw,300px);
}
body.page-brand .color-accents .brand-swatch{
  min-height:clamp(225px,23vw,335px);
}
body.page-brand .swatch-graphite{background:#242625;color:#f4f4ef}
body.page-brand .swatch-lime{background:#c9ff38;color:#111}
body.page-brand .swatch-blue{background:#4169ff;color:#fff}
body.page-brand .swatch-orange{background:#ff8a45;color:#111}
body.page-brand .swatch-pink{background:#ff89b8;color:#111}
body.page-brand .swatch-green{background:#61f5a6;color:#111}
body.page-brand .swatch-violet{background:#c49aff;color:#161221}
body.page-brand .brand-clearspace{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  align-items:center;
  gap:clamp(28px,5vw,90px);
  margin-top:clamp(65px,7vw,110px);
}
body.page-brand .clearspace-art{
  display:grid;place-items:center;
  min-height:clamp(320px,32vw,470px);
  padding:8%;
  background:#101110;
  border-radius:15px;
}
body.page-brand .clearspace-safe{
  display:grid;place-items:center;
  width:72%;max-width:420px;
  aspect-ratio:1.25;
  padding:19%;
  outline:1px dashed #4b4e4b;
  outline-offset:0;
}
body.page-brand .clearspace-safe img{
  width:100%;height:auto;display:block;
}
body.page-brand .brand-clearspace p{
  margin:0;
  font:560 clamp(30px,3.2vw,49px)/1.16 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.052em;
}
body.page-brand .brand-clearspace p span{
  display:block;
  margin-top:18px;
  font:435 clamp(17px,1.6vw,23px)/1.5 "Einhar Sans",Arial,sans-serif;
  letter-spacing:-.025em;
  color:#f4f4ef;
  max-width:360px;
}
@media(max-width:750px){
  body.page-brand .color-foundation{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    margin-bottom:85px;
  }
  body.page-brand .color-accents{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }
  body.page-brand .color-foundation .brand-swatch,
  body.page-brand .color-accents .brand-swatch{
    min-height:clamp(170px,33vw,240px);
    padding:clamp(17px,3vw,25px);
  }
  body.page-brand .color-foundation .brand-swatch span,
  body.page-brand .color-accents .brand-swatch span{
    font-size:clamp(23px,5.5vw,33px);
  }
  body.page-brand .color-foundation .brand-swatch strong,
  body.page-brand .color-accents .brand-swatch strong{
    font-size:clamp(15px,3.4vw,20px);
  }
  body.page-brand .brand-clearspace{
    grid-template-columns:1fr;
  }
  body.page-brand .brand-clearspace p{font-size:clamp(28px,7vw,41px)}
  body.page-brand .clearspace-art{min-height:clamp(290px,65vw,450px)}
}
@media(max-width:355px){
  body.page-brand .color-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.page-brand .color-foundation .brand-swatch,
  body.page-brand .color-accents .brand-swatch{
    min-height:168px;padding:16px;
  }
  body.page-brand .color-foundation .brand-swatch span,
  body.page-brand .color-accents .brand-swatch span{font-size:21px}
  body.page-brand .color-foundation .brand-swatch strong,
  body.page-brand .color-accents .brand-swatch strong{font-size:14px}
}

/* Einhar Sans / Five real weights, without tiny captions or divider lines. */
body.page-brand .font-weights{
  display:grid;gap:clamp(22px,2.9vw,38px);
  margin-top:clamp(50px,6vw,90px);
}
body.page-brand .font-weights>div{
  display:grid;grid-template-columns:minmax(110px,185px) minmax(0,1fr);
  gap:clamp(18px,3vw,50px);align-items:baseline;
}
body.page-brand .font-weights span{
  font:500 clamp(17px,1.4vw,21px)/1.35 "Einhar Sans",Arial,sans-serif;
}
body.page-brand .font-weights strong{
  font-family:"Einhar Sans",Arial,sans-serif;
  font-size:clamp(28px,3.65vw,58px);
  font-weight:var(--sample-weight);
  font-style:normal;line-height:1.22;letter-spacing:-.012em;
}
body.page-brand .type-characters{letter-spacing:0!important}
body.page-brand{letter-spacing:-.012em!important}
body.page-brand .brand-opening h1{letter-spacing:-.045em!important}
body.page-brand .brand-chapter h2{letter-spacing:-.037em!important}
@media(max-width:680px){
  body.page-brand .font-weights{gap:31px}
  body.page-brand .font-weights>div{grid-template-columns:1fr;gap:4px}
  body.page-brand .font-weights strong{font-size:clamp(26px,7vw,41px)}
}