/* Colours, font stacks and the type scale come from tokens.css, which the build writes from
   tuccar/design/tokens.yaml. Change a value there, never here. */

@font-face { font-family: Spectral; font-weight: 400; font-display: swap; src: url(fonts/Spectral-Regular.ttf); }
@font-face { font-family: Spectral; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/Spectral-Italic.ttf); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-display: swap; src: url(fonts/InterTight-Medium.ttf); }

/* One screen: the porter stands on a horizon, paper above it and canvas below. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: var(--type-body)/1.65 var(--font-serif); -webkit-font-smoothing: antialiased; }

.screen { min-height: 100svh; display: flex; flex-direction: column; }
.sky { flex: 1.7; display: flex; align-items: flex-end; justify-content: center; padding: 48px 24px 0; }
/* The feet sit a little above the mark's own bottom edge, so the figure is lowered onto the line. */
.porter { display: block; width: min(62vw, clamp(200px, 42vh, 440px)); height: auto; overflow: visible; transform: translateY(1.2%); }
.porter .line { fill: none; stroke: var(--color-ink); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.porter .fill { fill: var(--color-accent); }

.ground { flex: 1; position: relative; background: var(--color-canvas); display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: clamp(28px, 5.5vh, 60px) 24px clamp(40px, 8vh, 80px); }
.ground::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--color-ink); }
h1 { margin: 0; }
.wordmark { display: block; width: clamp(168px, 19vw, 264px); height: auto; }
.motto { font: italic 400 clamp(19px, 1.9vw, 26px)/1.35 var(--font-serif); color: var(--color-ink-soft);
  margin: clamp(14px, 2.4vh, 24px) 0 0; text-wrap: balance; }
.about { font: 500 var(--type-caption)/1.5 var(--font-sans); color: var(--color-muted); margin: clamp(10px, 1.6vh, 16px) 0 0; }

.principles { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 10vh, 112px) 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.principles section { border-top: 1px solid var(--color-hairline); padding-top: 18px; }
.principles h2 { font: italic 400 22px/1.3 var(--font-serif); margin: 0 0 8px; }
.principles p { margin: 0; color: var(--color-ink-soft); }

footer { background: var(--color-canvas); padding: 22px 24px 26px; text-align: center; }
footer p { font: 500 var(--type-caption)/1.5 var(--font-sans); color: var(--color-muted); margin: 0; text-wrap: balance; }

@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; }
}

/* One load sequence: the horizon opens from the middle, the porter is drawn in one line,
   the pans are hung and filled, then the name arrives. */
@media (prefers-reduced-motion: no-preference) {
  .ground::before { animation: lay .9s cubic-bezier(.6, 0, .2, 1) both; }
  .porter .line { stroke-dasharray: 1; animation: draw 2.1s cubic-bezier(.5, 0, .2, 1) .7s both; }
  .porter .line.hang { animation-duration: .7s; animation-delay: 2.7s; }
  .porter .fill { animation: appear .5s ease-out 3.3s both; }
  .ground > * { animation: appear 1s ease-out .5s both; }
  .ground > .motto { animation-delay: .8s; }
  .ground > .about { animation-delay: 1.1s; }
}
@keyframes lay { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } }