@font-face {
  font-family: "Asta Sans";
  src: url("assets/fonts/AstaSans-Latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --paper: #f8f8ed;
  --ink: #191714;
  --ink-soft: #45433d;
  --construct: #d9643f;
  --construct-deep: #b44a26;
  --rule: 1.5px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  background: var(--paper) url("assets/plates/paper.png") 0 0 / 256px 256px repeat;
  color: var(--ink);
  font-family: "Asta Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--construct); color: var(--paper); }

/* The sheet: one drawing at the comp's proportions, scaled to fit the viewport. */
.sheet {
  --u: calc(100cqw / 1376);
  position: relative;
  width: min(100vw, 100svh * 1376 / 768);
  aspect-ratio: 1376 / 768;
  margin-inline: auto;
  container-type: inline-size;
  background: url("assets/plates/smudges.png") center / 100% 100% no-repeat;
}

.sheet::before {
  content: "";
  position: absolute;
  left: 2.18%;
  top: 3.65%;
  width: 95.64%;
  height: 92.97%;
  border: var(--rule) solid var(--ink);
  pointer-events: none;
}

.logo { position: static; font-size: 0; }

.logo-drawing,
.construction {
  position: absolute;
  left: 12.35%;
  top: 13.8%;
  width: 81.1%;
  height: 44.27%;
  object-fit: cover;
}

/* Chain dimension under the wordmark, measured in the logo's own units. */
.base-dimension {
  position: absolute;
  left: 18.53%;
  top: 50.52%;
  width: 62.5%;
  height: 6.77%;
  font-size: calc(15 * var(--u));
  color: var(--ink);
}

.base-dimension .dim {
  position: absolute;
  isolation: isolate;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  top: 0;
  height: 54%;
  display: grid;
  place-items: center;
  border-inline-start: 1px solid var(--construct);
}

.base-dimension .dim:last-child { border-inline-end: 1px solid var(--construct); }

.base-dimension .dim::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 50% 1px auto;
  height: calc(9 * var(--u));
  translate: 0 -50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M10 1 0 5l10 4' fill='none' stroke='%23d9643f' stroke-width='1.3'/%3E%3C/svg%3E") left center / auto 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 1l10 4L0 9' fill='none' stroke='%23d9643f' stroke-width='1.3'/%3E%3C/svg%3E") right center / auto 100% no-repeat,
    linear-gradient(var(--construct), var(--construct)) center / 100% 1px no-repeat;
}

.dim-label {
  padding-inline: calc(6 * var(--u));
  background: var(--paper);
  line-height: 1;
}

/* Title block: centred at the foot of the sheet, unruled; its last row holds the two actions. */
.title-block {
  position: absolute;
  left: 50%;
  bottom: 8%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  text-align: center;
}

.tb-name,
.tb-status { white-space: nowrap; }

.tb-name {
  line-height: 1.4;
  font-size: calc(36 * var(--u));
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tb-status {
  line-height: 1.4;
  font-size: calc(30 * var(--u));
  font-weight: 400;
}

.tb-actions {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: calc(40 * var(--u));
  margin-top: calc(22 * var(--u));
}

.action {
  display: inline-grid;
  grid-template-columns: calc(44 * var(--u)) auto;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(64 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  color: var(--ink);
  text-decoration: none;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.action-icon {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  color: var(--construct);
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.action-icon svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.action-text { display: grid; text-align: left; }
.action-text strong { font-weight: 700; }

.action:hover { background-color: rgb(217 100 63 / 0.08); }
.action:hover .action-icon { background-color: var(--construct); color: var(--paper); }
.action:active { translate: 0 1px; }
.action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.footer {
  position: absolute;
  left: 0;
  right: 0;
  top: 97%;
  text-align: center;
  font-size: max(12px, calc(14 * var(--u)));
  color: var(--ink-soft);
}

.ratio-note {
  position: absolute;
  left: 25.2%;
  top: 55.2%;
  font-size: calc(15 * var(--u));
  color: var(--ink);
}

/* The one authored moment: the ink is plotted onto the sheet and the title block is ruled in;
   then the construction keeps measuring the mark on a 9s cycle (construction.svg carries
   its own timeline), with the dimension chain and ratio note joining the same cycle. */
@media (prefers-reduced-motion: no-preference) {
  .logo-drawing { animation: plot 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
  .title-block { animation: rule-down 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
  .base-dimension .dim { animation: measure-across 9s linear 4.4s infinite backwards; }
  .base-dimension .dim:nth-child(2) { animation-delay: 4.55s; }
  .base-dimension .dim:nth-child(3) { animation-delay: 4.7s; }
  .ratio-note { animation: note 9s linear 5s infinite backwards; }
}

@keyframes plot { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rule-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@keyframes measure-across {
  0% { clip-path: inset(0 50% 0 50%); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  10% { clip-path: inset(0 0 0 0); }
  76% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86%, 100% { clip-path: inset(0 0 0 100%); }
}

@keyframes note {
  0% { opacity: 0; }
  6%, 74% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

/* Phones and narrow portrait screens: the sheet becomes a tall drawing, read top to bottom. */
@media (max-width: 1023px), (max-aspect-ratio: 4 / 5) {
  body { align-content: start; }

  .sheet {
    --u: 1px;
    width: auto;
    aspect-ratio: auto;
    min-height: 100svh;
    margin: 0;
    padding: 16px;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }

  .sheet::before { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 40px 0 24px;
  }

  .logo-drawing,
  .base-dimension,
  .footer { position: static; }

  .construction { left: -4%; top: 0; width: 112%; height: 100%; }

  .title-block { position: relative; inset: auto; }

  .logo { position: relative; overflow: clip; margin-inline: -8px; }
  .logo-drawing { display: block; width: 112%; height: auto; margin: 0 -8% 0 -4%; }

  .base-dimension,
  .ratio-note { display: none; }

  .title-block { translate: none; }

  .tb-name,
  .tb-status { white-space: normal; }

  .tb-name { font-size: 22px; line-height: 1.2; }
  .tb-status { font-size: 17px; }

  .tb-actions { flex-direction: column; gap: 8px; margin-top: 18px; }

  .action {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 60px;
    grid-template-columns: 44px auto;
    justify-content: start;
    font-size: 17px;
    padding: 6px 14px;
  }

  .action-icon { width: 44px; height: 44px; }

  .footer { padding: 12px 0 4px; font-size: 13px; }
}