/* Layout: 12-column Swiss grid. Wide = one screen (logo left, copy from column 7, four-cell footer on columns 1/4/7/10).
   Narrow = single column, footer in a 2x2 at the bottom of the same screen. */
:root {
  --paper: #a5a897;
  --ink: #252915;
  --grid: rgba(255, 255, 255, 0.28);

  --font-body: "ABC Diatype", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --m: clamp(20px, 3.2vw, 56px);
  --gap: clamp(12px, 1.6vw, 28px);

  --ease-swipe: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-slide: cubic-bezier(0.65, 0, 0.15, 1);
  --ease-drop: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Latin subset of ABC Diatype Regular shipped 2026-09-29 with the owner's go-ahead
   ("Proceed with implementing the font subset for now."); a licensed webfont file
   from Dinamo may replace this src url() later as a drop-in, no other change needed. */
@font-face {
  font-family: "ABC Diatype";
  src: url("../assets/fonts/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; }
body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }

/* Hidden only while the intro script is arming its animations. Without JS everything is simply visible. */
html.intro .logo,
html.intro .copy,
html.intro .foot { visibility: hidden; }

.page {
  padding-inline: var(--m);
  padding-block: var(--m);
  overflow-x: clip;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 0;
  padding-top: calc(33svh - var(--m));
  display: grid;
  align-content: start;
  row-gap: clamp(28px, 9vw, 44px);
}
.logo {
  margin: 0;
  width: clamp(140px, 36vw, 260px);
  line-height: 0;
  cursor: default;
  transform-origin: 0 50%;
}
.logo-mask { display: block; }
.logo-img { display: block; width: 100%; height: auto; overflow: visible; clip-path: inset(-40% -40% 0 -40%); }
.logo-img path { transform-box: fill-box; transform-origin: 50% 50%; }
.mark-img { transform-origin: 50% 50%; }

.copy {
  font-size: 14px;
  line-height: 1.27;
  letter-spacing: -0.003em;
  max-width: 38em;
  min-width: 0;
}
.copy p { margin: 0; }
.copy p + p { margin-top: 1.27em; }
.ln { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }
.ln-i { display: block; will-change: transform; }

/* ---------- Footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(28px, 8vw, 44px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.cell { min-width: 0; }
.c1 { grid-column: 1 / 7; grid-row: 1; }
.c2 { grid-column: 7 / 13; grid-row: 1; }
.c3 { grid-column: 1 / 7; grid-row: 2; }
.c4 { grid-column: 7 / 13; grid-row: 2; }
.mask { overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.drop { display: block; will-change: transform; }
.drop > span, .drop > a { display: block; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.mark { display: none; }

/* ---------- Wide: one screen, footer pinned to the bottom ---------- */
@media (min-width: 960px) {
  .page { min-height: 560px; }
  .hero {
    min-height: 0;
    padding-top: max(0px, calc(39svh - var(--m)));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
    align-content: start;
    align-items: start;
  }
  .logo { grid-column: 1 / 6; grid-row: 1; width: clamp(150px, 15.1vw, 340px); }
  .copy {
    grid-column: 7 / 13; grid-row: 1;
    font-size: clamp(13px, 1.02vw, 18px);
  }
  .foot {
    padding-top: 0;
    align-items: end;
    font-size: clamp(9.5px, 0.72vw, 12.5px);
  }
  .c1, .c2, .c3, .c4 { grid-row: 1; }
  .c1 { grid-column: 1 / 4; }
  .c2 { grid-column: 4 / 7; }
  .c3 { grid-column: 7 / 10; }
  .c4 { grid-column: 10 / 12; }
  .mark {
    display: block; grid-column: 12 / 13; grid-row: 1;
    justify-self: end; align-self: end;
    width: clamp(18px, 1.78vw, 34px); line-height: 0;
  }
  .mark-mask { display: block; }
  .mark-img { display: block; width: 100%; height: auto; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-i, .drop, .logo { will-change: auto; }
}