/* ==========================================================================
   E. EITAN — portfolio
   --------------------------------------------------------------------------
   Everything you are likely to want to change lives in the :root block below.
   Nothing here needs a build step; edit this file and reload the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE KNOBS  —  colours, fonts, type sizes, spacing, grid
   --------------------------------------------------------------------------
   Values are the ones measured off the original Cargo site at 1440px wide.
   The odd decimals (18.144px, 64.8px …) are Cargo's, kept so the rebuild
   lines up pixel-for-pixel. Round them if you prefer; nothing depends on it.
   -------------------------------------------------------------------------- */
:root {
  /* -- Colour ------------------------------------------------------------ */
  --bg:            #ffffff;   /* page background                            */
  --text:          rgba(0, 0, 0, 0.85);  /* body copy                       */
  --text-strong:   #000000;   /* nav links, anything that should be pure black */
  --text-muted:    rgba(0, 0, 0, 0.4);   /* footer + "Selected Awards" label */
  --rule:          #808080;   /* the horizontal rule under the header       */

  /* -- Typeface ---------------------------------------------------------- *
   * The original is set in Diatype / Diatype Mono (Dinamo, commercial).
   * Hanken Grotesk and Recursive (in its semi-mono
   * setting, like Diatype Semi-Mono) stand in for them — the closest free faces,
   * picked by comparing against screenshots of the original. To switch to the real thing:
   *   1. drop the webfonts into assets/fonts/
   *   2. add an @font-face block for them at the bottom of section 2
   *   3. change the two lines below. That is the whole job.               */
  --font:          "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "Recursive Semi-Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights. Cargo's body weight is a variable-font 425 — between Regular
     and Medium. Hanken Grotesk is a variable font too, so 425 works as-is.          */
  --weight-body:   425;
  --weight-bold:   700;

  /* -- Type sizes -------------------------------------------------------- */
  --fs-body:       18.144px;  /* body copy, "Director", nav wrapper         */
  --fs-nav:        16px;      /* WORK / ABOUT                               */
  --fs-caption:    14.256px;  /* footer line, "Selected Awards"             */
  --fs-credits:    15.552px;  /* project-page title + credits column        */
  --fs-title:      18.662px;  /* project-page title (= credits x 1.2)       */

  --lh-tight:      1.2;       /* default, matches Cargo                     */
  --lh-copy:       1.5;       /* About page paragraphs                      */
  --lh-list:       1.85;      /* About page awards list                     */

  /* -- Spacing ----------------------------------------------------------- */
  --pad-x:         64.8px;    /* left/right page margin                     */
  --pad-top:       64.8px;    /* above the logo                             */
  --header-gap:    12.96px;   /* under the header block                     */
  --main-pad-top:  64.8px;    /* header block to the rule                   */
  --main-pad-bot:  64.8px;    /* end of the content to the footer           */
  --rule-gap:      21.8px;    /* between the rule and whatever follows it   */
  --footer-pad:    64.8px;    /* space above and below the footer line      */
  --block-gap:     27.2px;    /* one blank line in body copy (= 1.5 x body) */
  --awards-gap:    61px;      /* below the awards list (one blank list line
                                 more than --block-gap, as on the original) */
  --role-gap:      0px;       /* between the wordmark and "Director"        */

  /* -- Work grid --------------------------------------------------------- */
  --grid-cols:     2;
  --grid-gap:      13px;
  --tile-ratio:    16 / 9;    /* every tile except the last                 */
  --tile-ratio-wide: 3.125;   /* the final full-width tile                  */

  /* -- Grid hover + titles ---------------------------------------------- */
  --hover-inset:   10px;      /* how far the picture pulls in on hover      */
  --hover-dur:     0.45s;
  --hover-ease:    cubic-bezier(0.21, 0.2, 0.13, 0.97);   /* caviar.tv's curve */
  --text-dur:      0.7s;      /* the two lines sliding up                   */
  --text-ease:     cubic-bezier(0.19, 1, 0.22, 1);
  --fs-tile-title: clamp(17px, 1.5vw, 26px);
  --tile-text-gap: 16px;      /* text above the bottom of the picture       */

  /* -- Project pages ----------------------------------------------------- */
  --col-gutter:    13px;      /* between video column and credits column    */
  --col-video:     980px;     /* 9 of 12 columns at 1440                    */
  --col-credits:   317.4px;   /* 3 of 12 columns at 1440                    */

  /* -- Header ------------------------------------------------------------ */
  --logo-w:        194.5px;   /* rendered width of the E.EITAN wordmark     */
  --nav-gutter:    26px;

  /* -- Misc -------------------------------------------------------------- */
  --content-max:   none;      /* set e.g. 1600px to stop the site widening  */
}

/* Phone. The original Cargo site scales its type with the viewport below
   769px, which makes text shrink on small handsets; these are the values it
   lands on at 390px, held steady instead. Visually identical at 390px and
   more readable below it. */
@media (max-width: 768px) {
  :root {
    --fs-body:     17.123px;
    --fs-caption:  13.453px;
    --fs-credits:  14.677px;
    --fs-title:    17.612px;

    --pad-x:       18.3px;
    --pad-top:     38.9px;
    --header-gap:  5.5px;
    --main-pad-top: 18.3px;
    --main-pad-bot: 18.3px;
    --rule-gap:    20.6px;
    --footer-pad:  18.35px;
    --block-gap:   25.7px;
    --awards-gap:  57px;
    --role-gap:    17.7px;

    --grid-cols:   1;
    --grid-gap:    11px;
    --tile-ratio-wide: 16 / 9;   /* last tile is a normal tile on phones    */
    --fs-tile-title: 16px;
    --tile-text-gap: 12px;

    --logo-w:      261.4px;
  }
}

/* --------------------------------------------------------------------------
   2. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Recursive Semi-Mono";
  src: url("../fonts/RecursiveSemiMono-latin-ext.woff2") format("woff2");
  font-weight: 300 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Recursive Semi-Mono";
  src: url("../fonts/RecursiveSemiMono-latin.woff2") format("woff2");
  font-weight: 300 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

b, strong { font-weight: var(--weight-bold); }

/* The page column: one shared inset used by header, main and footer.
   width:100% is load-bearing — <body> is a flex column, and an auto margin on
   a flex child would otherwise shrink this to its content and centre it. */
.wrap {
  width: 100%;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  padding-top: var(--pad-top);
  padding-bottom: var(--header-gap);
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nav-gutter);
}

.logo { display: block; width: var(--logo-w); }
.logo img { width: 100%; height: auto; }

/* "Director" under the wordmark. */
.role {
  margin: var(--role-gap) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}

/* WORK / ABOUT */
.site-nav {
  font-size: var(--fs-nav);
  letter-spacing: 0.363px;
  white-space: nowrap;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  color: var(--text-strong);
  padding-top: 4px;
}
.site-nav a {
  position: relative;
  text-decoration: none;
  padding: 4px 0;
}
.site-nav .sep { margin: 0 0.55em; }

/* The underline that wipes in on hover, as on the original. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s ease;
}
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Which nav item is bold is decided by a class on <body>, so that the header
   markup itself stays byte-for-byte identical on every page. */
.page-work  .site-nav [data-nav="work"],
.page-about .site-nav [data-nav="about"] { font-weight: var(--weight-bold); }

/* The rule under the header. */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 var(--rule-gap);
}

/* --------------------------------------------------------------------------
   5. MOBILE HEADER + MENU  (no JavaScript — a hidden checkbox drives it)
   -------------------------------------------------------------------------- */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn, .menu-panel { display: none; }

@media (max-width: 768px) {
  .site-header__inner { display: block; text-align: center; position: relative; }

  .logo { margin: 0 auto; }

  .role {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
  }

  .site-nav { display: none; }        /* replaced by the hamburger */

  .menu-btn {
    display: block;
    position: absolute;
    top: calc(var(--pad-top) * -1 + 10px);
    right: 0;
    width: 34px;
    height: 26px;
    cursor: pointer;
    z-index: 3;
  }
  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: var(--text-strong);
  }
  .menu-btn span { top: 12px; }
  .menu-btn span::before { top: -7px; }
  .menu-btn span::after  { top: 7px; }

  .menu-panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: var(--bg);
    padding: var(--pad-top) var(--pad-x) 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .menu-toggle:checked ~ .menu-panel { visibility: visible; opacity: 1; }

  .menu-close {
    display: block;
    text-align: right;
    font-size: var(--fs-body);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }
  .menu-panel .rule { margin-top: 14px; }
  .menu-panel nav a {
    display: block;
    font-size: 1.55em;
    font-weight: var(--weight-bold);
    line-height: 1.65;
    text-decoration: none;
    color: var(--text-strong);
  }
  /* Stop the page behind the open menu from scrolling. */
  .menu-toggle:checked ~ .menu-panel { overscroll-behavior: contain; }
}

/* --------------------------------------------------------------------------
   6. WORK GRID  (home page)
   -------------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

.work-grid__item { display: block; text-decoration: none; }

.work-grid__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--tile-ratio);
  object-fit: cover;
  background: #f2f2f2;
}

/* Hover, after caviar.tv: the picture pulls in from all four edges, leaving a
   thin frame of page colour; a soft shade rises from the bottom and the two
   lines of text slide up into view over the picture, one after the other.
   On phones (no hover) the two lines stay visible. Tune with the --hover
   values in the knobs block. */
.work-grid__item { position: relative; }
.work-grid__item img,
.work-grid__item::after {
  clip-path: inset(0);
  transition: clip-path var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) ease;
}
.work-grid__item::after {               /* the shade behind the text */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 32%, rgba(0,0,0,0) 55%);
  opacity: 0;
  pointer-events: none;
}
.work-grid__meta {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: calc(var(--hover-inset) + var(--tile-text-gap));
  padding: 0 24px;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.work-grid__line { display: block; overflow: hidden; }   /* each line slides up from behind its own edge */
.work-grid__title, .work-grid__sub {
  display: block;
  transform: translateY(105%);
  transition: transform var(--text-dur) var(--text-ease);
}
.work-grid__title {
  font-family: var(--font);
  font-size: var(--fs-tile-title);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.work-grid__sub {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  transition-delay: 0.06s;
}
@media (hover: hover) {
  .work-grid__item:hover img,
  .work-grid__item:hover::after { clip-path: inset(var(--hover-inset)); }
  .work-grid__item:hover::after { opacity: 1; }
  .work-grid__item:hover .work-grid__title,
  .work-grid__item:hover .work-grid__sub { transform: none; }
  .work-grid__item:hover .work-grid__title { transition-delay: 0.05s; }
  .work-grid__item:hover .work-grid__sub   { transition-delay: 0.13s; }
}
@media (hover: none) {
  .work-grid__item::after { opacity: 1; }
  .work-grid__title, .work-grid__sub { transform: none; }
  .work-grid__meta { bottom: var(--tile-text-gap); }
}
.work-grid__item:focus-visible { outline: 1px solid var(--text-strong); outline-offset: 4px; }
.work-grid__item:focus-visible .work-grid__title,
.work-grid__item:focus-visible .work-grid__sub { transform: none; }
.work-grid__item:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .work-grid__item img, .work-grid__item::after, .work-grid__title, .work-grid__sub { transition: none; }
}

/* The final tile runs the full width of the grid on desktop. */
.work-grid__item--wide { grid-column: 1 / -1; }
.work-grid__item--wide img { aspect-ratio: var(--tile-ratio-wide); }

/* --------------------------------------------------------------------------
   7. PROJECT PAGES
   -------------------------------------------------------------------------- */
.project {
  display: grid;
  grid-template-columns: var(--col-video) var(--col-credits);
  gap: var(--col-gutter);
  align-items: start;
}
/* Fluid version of the 9:3 split, so it holds at any desktop width. */
@supports (grid-template-columns: subgrid) {
  .project {
    grid-template-columns:
      calc((100% - 11 * var(--col-gutter)) / 12 * 9 + 8 * var(--col-gutter))
      calc((100% - 11 * var(--col-gutter)) / 12 * 3 + 2 * var(--col-gutter));
  }
}

.credits {
  font-size: var(--fs-credits);
  line-height: var(--lh-tight);
  font-weight: 400;
}
.credits a { color: inherit; }
.credits__title {
  font-size: var(--fs-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}
/* A run of bold intro copy under the title, as on several project pages. */
.credits__lead { font-weight: var(--weight-bold); }

@media (max-width: 768px) {
  .project { grid-template-columns: 1fr; gap: 3.7px; }
}

/* --------------------------------------------------------------------------
   8. VIDEO  (poster first; the player is only fetched when clicked)
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  font: inherit;
}
.video__play::before {
  content: "";
  width: 74px;
  height: 74px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}
.video__play::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(3px);
}
.video__play:hover::before { background: rgba(0, 0, 0, 0.5); transform: scale(1.04); }
.video__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

@media (max-width: 768px) {
  .video__play::before { width: 54px; height: 54px; }
  .video__play::after  { border-width: 8px 0 8px 13px; }
}

/* Shown only when JavaScript is off. */
.video__fallback {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--fs-caption);
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   9. ABOUT PAGE
   -------------------------------------------------------------------------- */
.prose { line-height: var(--lh-copy); }
.prose p { margin: 0 0 var(--block-gap); }
.prose em, .prose i { font-style: italic; }

.prose .awards-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  line-height: var(--lh-tight);
  margin: 0;
}
.prose .awards {
  margin: 0 0 var(--awards-gap);
  padding-left: 36.3px;
  line-height: var(--lh-list);
}
.prose .awards li { margin: 0; }

.prose .bio-label {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--lh-copy);
}

.portrait { margin-top: var(--block-gap); width: 573.9px; max-width: 100%; }

@media (max-width: 768px) {
  .awards { padding-left: 34.3px; }
  .portrait { width: 100%; }
}

/* Link previews (assets/js/peek.js) -------------------------------------- */
a.peek {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(0, 0, 0, 0.28);
  transition: text-decoration-color 0.3s ease;
}
a.peek:hover, a.peek:focus-visible { text-decoration-color: currentColor; }
.peek-card {
  position: fixed; z-index: 50;
  width: 300px;
  background: var(--bg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.peek-card.is-below { transform: translateY(-6px); }
.peek-card.is-open { opacity: 1; transform: none; }
.peek-card__media { aspect-ratio: 1.9; background: #111; overflow: hidden; }
.peek-card__media img { width: 100%; height: 100%; object-fit: cover; }
.peek-card__media.is-none { display: none; }
.peek-card__media.is-linkedin {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3.2; background: #0a66c2;
}
.peek-card__media.is-linkedin svg { width: 34px; height: 34px; fill: #fff; }
.peek-card__text { display: block; padding: 11px 14px 13px; }
.peek-card__name { display: block; font: 400 15px/1.3 var(--font); color: var(--text-strong); }
.peek-card__domain {
  display: block; margin-top: 3px;
  font: 400 12px/1.3 var(--font-mono); color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) { .peek-card { transition: none; } }

/* --------------------------------------------------------------------------
   10. APA image gallery  (3 masonry columns, as on the original)
   -------------------------------------------------------------------------- */
.gallery {
  columns: 3;
  column-gap: var(--col-gutter);
  margin-top: var(--col-gutter);
}
.gallery img {
  width: 100%;
  margin-bottom: var(--col-gutter);
  break-inside: avoid;
}
@media (max-width: 768px) {
  .gallery { columns: 2; }
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: var(--footer-pad);
  padding-bottom: var(--footer-pad);
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-muted);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer svg {
  display: inline-block;
  vertical-align: -0.12em;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   12. MAIN
   -------------------------------------------------------------------------- */
main {
  padding-top: var(--main-pad-top);
  padding-bottom: var(--main-pad-bot);
}

/* Keeps the footer at the bottom on short pages. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   PAGE TRANSITIONS
   --------------------------------------------------------------------------
   Forward: the new page rises from the bottom while the old one stays put.
   Back: the page you're on drops away, revealing the previous one.
   Direction comes from assets/js/transitions.js. Browsers without cross-page
   View Transitions navigate normally. Tune the feel with the two values below.
   -------------------------------------------------------------------------- */
:root {
  --page-dur:  0.75s;
  --page-ease: cubic-bezier(0.7, 0, 0.2, 1);
}
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: var(--page-dur); }

html:active-view-transition-type(forward)::view-transition-old(root) {
  animation: var(--page-dur) var(--page-ease) both page-recede;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation: var(--page-dur) var(--page-ease) both page-rise;
  filter: drop-shadow(0 -14px 30px rgba(0, 0, 0, 0.18));   /* edge of the rising page */
}
html:active-view-transition-type(back)::view-transition-new(root) {
  animation: var(--page-dur) var(--page-ease) both page-return;
}
html:active-view-transition-type(back)::view-transition-old(root) {
  z-index: 2;
  animation: var(--page-dur) var(--page-ease) both page-drop;
  filter: drop-shadow(0 -14px 30px rgba(0, 0, 0, 0.18));
}

@keyframes page-rise    { from { transform: translateY(100%); } }
@keyframes page-drop    { to   { transform: translateY(100%); } }
@keyframes page-recede  { to   { opacity: 0.6; } }
@keyframes page-return  { from { opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}