/* Colours, type, spacing and shapes come only from /design/tokens.css (the Warren
   Woolhouse design system): a graphite band with the corner cut, then one teal button. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-000); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}
h1 { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* The band: edge to edge, the cut at its bottom right */
.band {
  --cut-w: clamp(var(--corner-cut-phone), 9vw, 140px);
  position: relative; background: var(--graphite);
  padding: calc(var(--space-16) + env(safe-area-inset-top)) var(--space-4) var(--space-16);
}
.band .content {
  max-width: 960px; margin: 0 auto; padding-right: calc(var(--cut-w) + var(--space-4));
  display: grid; gap: var(--space-6);
}
.mark { height: 40px; width: auto; display: block; }
.band h1 {
  font-size: clamp(var(--t-display), 7vw, 72px); line-height: 1.1; font-weight: 600;
  letter-spacing: var(--track-display); color: var(--on-graphite);
}
.corner-cut { position: absolute; right: 0; bottom: 0; display: block; width: var(--cut-w); height: calc(var(--cut-w) * var(--cut-ratio)); }

/* The link */
.links { width: 100%; max-width: calc(960px + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-12) var(--space-4); }
.btn {
  --cut: var(--btn-cut-tap);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) calc(var(--space-6) + var(--cut)) var(--space-2) var(--space-6);
  color: var(--on-teal); font-size: var(--t-lead); font-weight: 500; text-decoration: none;
  border-radius: var(--radius-sm);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  transition: background var(--ease-fast);
}
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 480px) {
  .btn { display: flex; width: 100%; }
}