/* vikrammamak.com
   Three full-height panels, one typeface, light and dark from the system setting.
   Tokens are documented in DESIGN.md. */

/* Latin subset of the variable font. README records how it was made. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Color, light */
  --panel-1: #A5CFEE;
  --panel-2: #C7E3F7;
  --panel-3: #ECF6FD;
  --text: #071431;
  --name: #071431;
  --label: #27446B;
  --attribution: #27446B;
  --link-rule: #3B638F;
  --link-active: #071431;

  /* Fluid unit: 1% of the page width. Container units where supported. */
  --cq: 1vw;

  /* Type, 390px to 1440px */
  --size-name: clamp(56px, calc(33.26px + 6.857 * var(--cq)), 132px);
  --size-statement: clamp(30px, calc(20.34px + 2.476 * var(--cq)), 56px);
  --size-lede: clamp(20px, calc(17.03px + 0.762 * var(--cq)), 28px);
  --size-link: clamp(18px, calc(16.89px + 0.286 * var(--cq)), 21px);
  --size-label: clamp(16px, calc(14.51px + 0.381 * var(--cq)), 20px);

  /* Space, 390px to 1440px */
  --pad-x: clamp(24px, calc(6.857 * var(--cq) - 2.74px), 96px);
  --pad-y: 96px;
  --gap-section: clamp(48px, calc(39.09px + 2.286 * var(--cq)), 72px);
  --gap-contact: clamp(36px, calc(28.57px + 1.905 * var(--cq)), 56px);
  --gap-lede: clamp(28px, calc(23.54px + 1.143 * var(--cq)), 40px);
  --gap-links: clamp(24px, calc(21.03px + 0.762 * var(--cq)), 32px);
  --gap-attribution: clamp(20px, calc(17.03px + 0.762 * var(--cq)), 28px);
  --gap-label: clamp(12px, calc(10.51px + 0.381 * var(--cq)), 16px);

  --measure: 1248px;
  --panel-height: 860px;
}

@supports (width: 1cqi) {
  :root {
    --cq: 1cqi;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --panel-1: #030C26;
    --panel-2: #0A1B3E;
    --panel-3: #132B58;
    --text: #F2F8FC;
    --name: #B9DBF4;
    --label: #B9DBF4;
    --attribution: #A4BCD3;
    --link-rule: #5577A0;
    --link-active: #F2F8FC;
  }
}

/* ---------- Page ---------- */

html {
  scroll-snap-type: y proximity;
  background: var(--panel-3);
}

body {
  margin: 0;
  background: var(--panel-3);
  color: var(--text);
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  container-type: inline-size;
  min-height: 100vh;
}

[hidden] {
  display: none !important;
}

/* ---------- Panels ---------- */

.panel {
  scroll-snap-align: start;
  box-sizing: border-box;
  min-height: min(var(--panel-height), 100vh);
  min-height: min(var(--panel-height), 100svh);
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-1 {
  background: var(--panel-1);
}

.panel-2 {
  background: var(--panel-2);
}

.panel-3 {
  background: var(--panel-3);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

/* A page with a single panel (404): the panel and its color fill the window. */

.one-panel,
.one-panel body {
  background: var(--panel-1);
}

.one-panel .panel {
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------- Type ---------- */

h1 {
  margin: 0;
  color: var(--name);
  font-size: var(--size-name);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.lede {
  margin: var(--gap-lede) 0 0;
  max-width: 26em;
  font-size: var(--size-lede);
  line-height: 1.35;
  text-wrap: balance;
}

.label {
  margin: 0;
  color: var(--label);
  font-size: var(--size-label);
  font-weight: 600;
  line-height: 1.3;
}

.statement {
  margin: 0;
  max-width: 20em;
  font-size: var(--size-statement);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Contact ---------- */

.contact {
  margin-top: var(--gap-contact);
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.contact .label {
  flex: none;
}

.links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-links);
  row-gap: 6px;
  font-size: var(--size-link);
  font-weight: 500;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--link-rule);
}

a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-active);
}

a:focus-visible {
  outline: 2px solid var(--link-active);
  outline-offset: 4px;
}

/* ---------- Daily block ---------- */

.statement + .label {
  margin-top: var(--gap-section);
}

.label + .statement,
.label + .quote {
  margin-top: var(--gap-label);
}

.quote {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.quote p {
  margin: 0;
}

.quote figcaption {
  margin-top: var(--gap-attribution);
  color: var(--attribution);
  font-size: var(--size-label);
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .d1 {
    animation-delay: 120ms;
  }

  .d2 {
    animation-delay: 240ms;
  }

  /* Starts at 0.001, not 0: Chrome records no first contentful paint for text
     that begins fully transparent, which leaves the page without paint metrics. */
  @keyframes rise {
    from {
      opacity: 0.001;
      transform: translateY(24px);
    }
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal ease-out both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    .late {
      animation-range: entry 25% cover 50%;
    }

    /* In a tall window the page ends before the last panel can travel far
       enough to finish its reveal, so the end of the page finishes it. */
    .panel-3 .reveal {
      animation: reveal ease-out both, settle linear both;
      animation-timeline: view(), scroll(root);
      animation-range: entry 10% cover 40%, 90% 100%;
    }

    .panel-3 .late {
      animation-range: entry 25% cover 50%, 90% 100%;
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(48px);
      }
    }

    @keyframes settle {
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}