@import url('fonts.css');

/* =========================================================================
   Tamir Hitman - tamirhitman.com
   Design tokens
   ========================================================================= */
:root{
  --bg:#0B0B0C;
  --bg-2:#121215;
  --bg-3:#191A1E;
  --line:#26262B;
  --line-soft:rgba(237,234,229,.09);

  --fg:#EFECE7;
  --fg-2:#B6B1AA;
  --fg-3:#8A857E;

  --accent:#C89B5A;
  --accent-2:#E5C48F;
  --accent-dim:rgba(200,155,90,.16);

  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --sect:clamp(72px, 11vh, 132px);

  --r-sm:4px;
  --r-md:10px;

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

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(16px,1.02vw,17px);
  font-weight:380;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--accent);color:#0B0B0C}

/* Film grain overlay ------------------------------------------------------ */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layout ------------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sect);position:relative}
.section--line{border-top:1px solid var(--line)}
.stack>*+*{margin-top:var(--flow,1.1em)}

/* Typography -------------------------------------------------------------- */
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 22px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7;flex:none}

.display{
  font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.025em;
  font-size:clamp(58px,11.5vw,168px);
}
.h1{font-family:var(--serif);font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.02em}
.h2{font-family:var(--serif);font-size:clamp(32px,4.6vw,60px);line-height:1.06;letter-spacing:-.018em;max-width:19ch}
.h2--wide{max-width:26ch}
.h3{font-family:var(--serif);font-size:clamp(23px,2.4vw,30px);line-height:1.15;letter-spacing:-.01em}
.h4{font-size:15px;font-weight:600;letter-spacing:.02em}

.lead{font-size:clamp(18px,1.65vw,22.5px);line-height:1.52;color:var(--fg);max-width:56ch;font-weight:340}
.body-lg{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.62;color:var(--fg-2);max-width:62ch}
.muted{color:var(--fg-3)}
.note{font-size:13.5px;line-height:1.55;color:var(--fg-3);max-width:70ch}
em,.it{font-style:italic}

/* Links ------------------------------------------------------------------- */
.link{
  color:var(--accent);border-bottom:1px solid rgba(200,155,90,.35);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link:hover{color:var(--accent-2);border-color:var(--accent-2)}

.arrow-link{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg);
  padding-bottom:6px;border-bottom:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.arrow-link svg{transition:transform .35s var(--ease)}
.arrow-link:hover{color:var(--accent);border-color:var(--accent)}
.arrow-link:hover svg{transform:translateX(5px)}

.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border:1px solid var(--fg);border-radius:var(--r-sm);
  font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  background:transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--accent{border-color:var(--accent);color:var(--accent)}
.btn--accent:hover{background:var(--accent);color:#0B0B0C;border-color:var(--accent)}
.btn--ghost{border-color:var(--line);color:var(--fg-2)}
.btn--ghost:hover{background:transparent;border-color:var(--fg);color:var(--fg)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#0B0B0C;padding:12px 20px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Header ------------------------------------------------------------------ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(11,11,12,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.site-head__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:74px;
}
.brand{display:flex;flex-direction:column;line-height:1;gap:5px}
.brand__name{font-family:var(--serif);font-size:21px;letter-spacing:.01em}
.brand__role{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}

.nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,30px)}
.nav a{
  font-size:13.5px;font-weight:450;letter-spacing:.03em;color:var(--fg-2);
  position:relative;padding-block:6px;transition:color .28s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width .32s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--accent)}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;cursor:pointer;position:relative;
}
.nav-toggle span{
  position:absolute;left:12px;width:18px;height:1.5px;background:var(--fg);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1){top:17px}
.nav-toggle span:nth-child(2){top:24px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:39;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gutter) 48px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  /* visibility flips instantly on open and only after the fade on close, so the
     first link is focusable the moment the drawer opens */
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;
}
.drawer.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear 0s;
}
.drawer a{
  font-family:var(--serif);font-size:clamp(30px,7vw,46px);line-height:1.28;
  color:var(--fg-2);transition:color .25s var(--ease);
}
.drawer a:hover,.drawer a[aria-current="page"]{color:var(--accent)}
.drawer__meta{margin-top:44px;font-size:14px;color:var(--fg-3);letter-spacing:.02em}

/* Hero -------------------------------------------------------------------- */
.hero{position:relative;padding-top:150px;padding-bottom:var(--sect);overflow:hidden}
.hero__canvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.85;
}
.hero__inner{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(30px,5vw,72px);align-items:end}
.hero h1{margin:0 0 30px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block}
.hero__accent{color:var(--accent)}

.hero__photo{
  position:relative;aspect-ratio:1/1.12;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--bg-2);
}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 34%;
  filter:saturate(.92) contrast(1.04)}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(11,11,12,0) 42%,rgba(11,11,12,.62) 100%);
}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.fact b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.01em;margin-bottom:9px}
.fact span{font-size:13px;color:var(--fg-3);line-height:1.42;display:block}

/* Marquee ----------------------------------------------------------------- */
.marquee{
  border-block:1px solid var(--line);padding-block:17px;overflow:hidden;
  background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{display:flex;width:max-content;gap:0;animation:slide 46s linear infinite}
.marquee__group{display:flex;gap:0;flex:none}
.marquee span{
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
  padding-inline:28px;white-space:nowrap;
}
.marquee span::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);margin-left:28px;vertical-align:middle;opacity:.65}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* Cards ------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(24px,2.4vw,34px);position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);
  transition:width .5s var(--ease);
}
.card:hover{border-color:#3A3A41;background:var(--bg-3);transform:translateY(-3px)}
.card:hover::before{width:100%}
.card__num{
  font-family:var(--serif);font-size:14px;color:var(--accent);letter-spacing:.1em;
  display:block;margin-bottom:20px;
}
.card h3{margin-bottom:13px}
.card p{color:var(--fg-2);font-size:15.5px;line-height:1.6;margin:0}

/* Split ------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5.5vw,84px);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split__sticky{position:sticky;top:110px}

.figure{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.figure:hover img{transform:scale(1.028)}
.figure--tall{aspect-ratio:3/4}
.figure--wide{aspect-ratio:3/2}
.figure--square{aspect-ratio:1/1}
figcaption{font-size:13px;color:var(--fg-3);margin-top:12px;line-height:1.5}

/* Ledger (credits / artists) ---------------------------------------------- */
.ledger{border-top:1px solid var(--line)}
.ledger__row{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding-block:24px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),padding-inline .3s var(--ease);
}
.ledger__row:hover{background:rgba(255,255,255,.018)}
.ledger__year{font-family:var(--serif);font-size:16px;color:var(--accent);letter-spacing:.05em}
.ledger__title{font-size:17px;font-weight:520;letter-spacing:.005em;line-height:1.42}
.ledger__desc{font-size:15px;color:var(--fg-2);line-height:1.58}

/* Pull quote -------------------------------------------------------------- */
.quote{position:relative;padding-block:clamp(56px,8vw,104px)}
.quote blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(27px,3.9vw,52px);line-height:1.16;
  letter-spacing:-.015em;max-width:20ch;
}
.quote blockquote .hl{color:var(--accent)}
.quote cite{display:block;margin-top:30px;font-family:var(--sans);font-style:normal;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* Feature band ------------------------------------------------------------ */
.band{background:var(--bg-2);border-block:1px solid var(--line)}
.band--accent{
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(200,155,90,.11), transparent 62%),
    var(--bg-2);
}

/* Contact ----------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
.contact-item{padding-block:20px;border-bottom:1px solid var(--line)}
.contact-item:first-child{border-top:1px solid var(--line)}
.contact-item .k{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:7px}
.contact-item .v{font-size:17.5px;font-weight:450}
.mail{font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);letter-spacing:-.01em;
  color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:8px;display:inline-block;
  transition:color .3s var(--ease),border-color .3s var(--ease);word-break:break-word}
.mail:hover{color:var(--accent);border-color:var(--accent)}

/* Footer ------------------------------------------------------------------ */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px) 34px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.foot-title{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 18px}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-list a,.foot-list button{
  font-size:14.5px;color:var(--fg-2);background:none;border:0;padding:0;cursor:pointer;
  text-align:left;transition:color .25s var(--ease);
}
.foot-list a:hover,.foot-list button:hover{color:var(--accent)}
.foot-bottom{
  margin-top:clamp(38px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  font-size:12.5px;color:var(--fg-3);
}
.foot-mark{margin-top:44px;user-select:none;pointer-events:none;overflow:hidden}
.foot-mark::after{
  content:"Tamir Hitman";display:block;
  font-family:var(--serif);font-size:clamp(52px,11vw,132px);line-height:.82;
  letter-spacing:-.03em;color:var(--line);
}

/* Legal pages ------------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-family:var(--serif);font-size:clamp(25px,2.9vw,36px);line-height:1.14;margin:56px 0 16px;letter-spacing:-.012em}
.prose h3{font-size:16.5px;font-weight:600;margin:34px 0 10px;letter-spacing:.01em}
.prose p,.prose li{color:var(--fg-2);font-size:16px;line-height:1.68}
.prose ul{padding-left:20px;margin:0 0 1.15em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--accent)}
.prose>h2:first-child{margin-top:0}
.prose .todo{
  display:inline-block;background:var(--accent-dim);color:var(--accent-2);
  border:1px dashed rgba(200,155,90,.5);border-radius:var(--r-sm);
  padding:1px 8px;font-size:14px;font-weight:500;
}
.callout{
  border:1px solid var(--line);border-left:2px solid var(--accent);
  background:var(--bg-2);border-radius:var(--r-sm);padding:22px 24px;margin:28px 0;
}
.callout p{margin-bottom:.7em;font-size:15px}

/* Reveal animation -------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}

/* Hero line reveal.
   Default state is VISIBLE. The "armed" class is added by a tiny inline script in
   <head> so there is no flash, and it is removed again once the animation has
   finished (or after a fallback timeout). That way a throttled or failed
   animation can never leave the headline invisible. */
.js-anim [data-hero] .ln>span{transform:translateY(102%)}
[data-hero].hero-in .ln>span{animation:riseIn 1.05s var(--ease) forwards}
[data-hero].hero-in .ln:nth-child(2)>span{animation-delay:.10s}
[data-hero].hero-in .ln:nth-child(3)>span{animation-delay:.20s}
@keyframes riseIn{from{transform:translateY(102%)}to{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .js-anim [data-hero] .ln>span{transform:none}
  [data-hero].hero-in .ln>span{animation:none}
  .figure img{transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* Cookie consent ---------------------------------------------------------- */
/* The panel has to read as a separate object floating above the page. On a dark
   site a black drop shadow is invisible, so separation comes from four things
   working together: a distinctly lighter surface, a blurred backdrop so whatever
   is behind it goes soft, a light hairline border plus an inset top highlight to
   catch an imaginary light source, and a wide dark halo to lift it off the
   background. */
.cc{
  position:fixed;left:var(--gutter);bottom:26px;z-index:60;
  width:min(540px, calc(100vw - (var(--gutter) * 2)));
  background:rgba(27,28,33,.93);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(239,236,231,.17);
  /* brass top edge as a real border, so it stays put if the panel has to scroll */
  border-top:2px solid var(--accent);
  border-radius:14px;
  padding:28px 28px 24px;
  max-height:calc(100vh - 52px);
  overflow-y:auto;
  overscroll-behavior:contain;
  box-shadow:
    0 44px 90px -20px rgba(0,0,0,.94),
    0 12px 30px -8px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(239,236,231,.08);
  transform:translateY(22px) scale(.985);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
.cc:focus{outline:none}
.cc.is-open{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear 0s;
}
.cc h2{font-family:var(--serif);font-size:24px;line-height:1.15;margin-bottom:11px;color:var(--fg)}
.cc p{font-size:14.5px;color:var(--fg-2);line-height:1.6;margin-bottom:20px}

.cc__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* "Accept all" and "Essential only" are deliberately identical in size, colour
   and weight. Making the accept button louder is the usual trick and it is
   exactly what German supervisory authorities object to. */
.cc__actions .btn{padding:13px 20px;font-size:12.5px;border-radius:6px}
.cc__btn{
  flex:1 1 0;justify-content:center;
  border-color:rgba(239,236,231,.45);color:var(--fg);background:transparent;
}
.cc__btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cc__btn--quiet{
  flex:0 0 auto;border-color:transparent;color:var(--fg-3);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.cc__btn--quiet:hover{background:transparent;color:var(--accent);border-color:transparent}
/* With the detail panel open, "Save choices" is the confirm action, so it drops
   onto its own full-width row rather than squeezing the other two. */
.cc__btn--save{
  flex:1 1 100%;order:3;justify-content:center;
  border-color:rgba(200,155,90,.55);color:var(--accent);text-decoration:none;
}
.cc__btn--save:hover{background:var(--accent);color:#0B0B0C;border-color:var(--accent)}

.cc__opts{display:grid;gap:14px;margin:2px 0 22px;padding-top:20px;border-top:1px solid rgba(239,236,231,.12)}
.cc__opt{display:flex;gap:14px;align-items:flex-start}
.cc__opt label{font-size:14.5px;font-weight:500;color:var(--fg);display:block;margin-bottom:3px;cursor:pointer}
.cc__opt p{font-size:13px;margin:0;color:var(--fg-3);line-height:1.5}
.cc__opt input{margin-top:4px;width:17px;height:17px;accent-color:var(--accent);flex:none;cursor:pointer}
.cc__opt input:disabled{opacity:.5;cursor:not-allowed}

@media (prefers-reduced-transparency:reduce){
  .cc{background:#1B1C21;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Responsive -------------------------------------------------------------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__photo{aspect-ratio:16/11;max-height:440px}
  .hero__photo img{object-position:center 30%}
  .split,.split--even,.contact-grid{grid-template-columns:1fr;gap:38px}
  .split__sticky{position:static}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{display:none}
  .nav-toggle{display:block}
  .grid--3{grid-template-columns:1fr}
  .ledger__row{grid-template-columns:1fr;gap:7px;padding-block:20px}
  .ledger__year{font-size:14px}
  .hero{padding-top:118px}
  .facts{grid-template-columns:1fr;gap:18px}
  .fact{display:flex;align-items:baseline;gap:16px}
  .fact b{margin:0;font-size:26px;flex:none;min-width:110px}
}
@media (max-width:620px){
  .grid--2,.grid--4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .cc{left:12px;bottom:12px;width:calc(100vw - 24px);padding:22px 20px 20px;
    max-height:calc(100vh - 24px)}
  .cc__btn{flex:1 1 100%}
  .cc__btn--quiet{flex:1 1 100%;justify-content:center}
}
@media print{
  .site-head,.drawer,.cc,.marquee,.hero__canvas,.foot-mark{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000}
}