:root {
  --ink: #283038;
  --ink-deep: #1d242a;
  --amber: #e5a029;
  --amber-light: #f5c66f;
  --cream: #faf7f0;
  --paper: #ffffff;
  --line: rgba(40, 48, 56, 0.16);
  --muted: #687179;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow: 0 24px 80px rgba(40, 48, 56, 0.12);
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--ink-deep); }

a { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button, input, textarea, select { font: inherit; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--cream);
  padding: 10px 14px;
  border-radius: 8px;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(calc(100% - 40px), var(--max));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; flex: 0 0 auto; }
.brand img { display: block; width: 228px; height: auto; }

nav { display: flex; align-items: center; gap: 28px; font-size: 0.84rem; font-weight: 650; }
nav a { text-decoration: none; position: relative; }
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.tiny-button {
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.tiny-button:hover, .tiny-button:focus-visible {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px) rotate(-1deg);
}

.hero {
  width: min(calc(100% - 40px), var(--max));
  min-height: 720px;
  margin: 0 auto;
  padding: 84px 0 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);
  gap: 70px;
  align-items: center;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 730px;
  margin-bottom: 28px;
  font-size: clamp(3.2rem, 6.1vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

h1 em {
  color: var(--amber);
  font-style: normal;
  position: relative;
  text-shadow: 1px 1px 0 var(--ink);
}

.lede {
  max-width: 660px;
  margin-bottom: 36px;
  color: #4d575f;
  font-size: 1.16rem;
}

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 750;
}

.button-primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 6px 6px 0 var(--amber);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button-primary:hover, .button-primary:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--amber);
}

.microcopy { color: var(--muted); font-size: 0.75rem; max-width: 190px; }

.hero-object { transform: rotate(1.5deg); }

.route-window {
  overflow: hidden;
  border: 1px solid rgba(40,48,56,0.24);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 18px 20px 0 rgba(229, 160, 41, 0.3), var(--shadow);
}

.window-bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #f2eee6;
}

.window-bar span { width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; }
.window-bar span:nth-child(2) { background: var(--amber); }
.window-bar b { margin-left: auto; color: var(--muted); font: 600 0.67rem ui-monospace, monospace; }

.route-stage { position: relative; min-height: 490px; background: linear-gradient(rgba(40,48,56,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,48,56,.035) 1px, transparent 1px); background-size: 24px 24px; }

.route-line { position: absolute; inset: 10px 8px 20px; width: calc(100% - 16px); height: calc(100% - 30px); }
.route-line path, .route-line circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-shadow { stroke: rgba(40,48,56,.12); stroke-width: 15; }
.route-dash { stroke: var(--amber); stroke-width: 7; stroke-dasharray: 2 16; animation: move-route 9s linear infinite; }
.route-line circle { fill: var(--cream); stroke: var(--ink); stroke-width: 5; }
.route-line .wildcard { stroke: var(--amber); stroke-width: 7; }

@keyframes move-route { to { stroke-dashoffset: -180; } }

.route-note {
  position: absolute;
  z-index: 2;
  width: 158px;
  min-height: 80px;
  padding: 13px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
  line-height: 1.2;
}
.route-note span { display: block; color: #846223; font: 750 0.66rem ui-monospace, monospace; margin-bottom: 7px; }
.route-note strong { font-size: 0.8rem; }
.note-start { left: 5%; bottom: 8%; transform: rotate(-3deg); }
.note-middle { left: 36%; top: 43%; transform: rotate(2deg); }
.note-end { right: 4%; top: 9%; transform: rotate(-2deg); }
.route-caption { position: absolute; right: 18px; bottom: 8px; margin: 0; color: var(--muted); font: 600 0.63rem ui-monospace, monospace; }

.manifesto-band {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 40px max(24px, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--ink);
  color: var(--cream);
}

.manifesto-band::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 72%;
  height: 3px;
  background: var(--amber);
  transform: rotate(-2deg);
  opacity: .55;
}

.manifesto-band p { position: relative; z-index: 1; margin: 0; font-size: clamp(1.8rem, 4vw, 3.9rem); font-weight: 780; letter-spacing: -0.045em; }
.manifesto-band img { position: relative; z-index: 1; flex: 0 0 auto; width: 145px; height: auto; }

.section-shell { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.work-section { padding: 126px 0; }
.section-heading { max-width: 760px; margin-bottom: 68px; }
.section-heading h2, .principles h2, .closing h2 { font-size: clamp(2.3rem, 4.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.05em; }
.section-heading > p:last-child { max-width: 620px; color: var(--muted); }

.project {
  position: relative;
  min-height: 520px;
  margin-top: 34px;
  padding: clamp(30px, 5vw, 66px);
  display: grid;
  grid-template-columns: 55px minmax(280px, 0.82fr) minmax(380px, 1.18fr);
  gap: 34px;
  align-items: center;
  border-radius: var(--radius-lg);
}

.project-canonex { background: var(--ink); color: var(--cream); }
.project-number { align-self: start; font: 800 0.74rem ui-monospace, monospace; writing-mode: vertical-rl; letter-spacing: .1em; opacity: .7; }
.project-number span { color: var(--amber); }
.project-kicker { margin-bottom: 18px; font: 700 0.68rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .76; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(229,160,41,.15); }
.project h3 { margin-bottom: 4px; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.055em; }
.project-tagline { margin-bottom: 22px; color: var(--amber); font-weight: 750; }
.project-copy > p:not(.project-tagline) { max-width: 520px; opacity: .82; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.tag-list li { padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: .66rem; font-weight: 700; opacity: .76; }
.project-link { display:inline-flex; align-items:center; gap:8px; margin-top:28px; color:var(--cream); font-weight:750; text-underline-offset:5px; }
.project-link span { color:var(--amber); font-size:1.05em; transition:transform 160ms ease; }
.project-link:hover span, .project-link:focus-visible span { transform:translate(3px,-3px); }

.project-visual { position: relative; min-height: 360px; overflow: hidden; border-radius: 22px; }
.canonex-visual { background: #171c21; border: 1px solid rgba(250,247,240,.14); }
.canonex-visual::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 74% 18%, rgba(229,160,41,.16), transparent 42%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:auto, 30px 30px, 30px 30px; }
.screen-card { position:absolute; z-index:2; width: 190px; min-height: 125px; padding: 17px; border: 1px solid rgba(250,247,240,.28); border-radius: 14px; background:#2c343c; box-shadow: 0 16px 34px rgba(0,0,0,.27); }
.screen-card span { display:block; color:var(--amber-light); font:700 .58rem ui-monospace,monospace; letter-spacing:.1em; }
.screen-card b { display:block; margin:12px 0 16px; font-size:.9rem; }
.screen-card i { font-size:.68rem; color:#b9c0c6; font-style:normal; }
.card-a { left:8%; top:12%; transform:rotate(-2deg); }
.card-b { right:7%; bottom:15%; transform:rotate(2deg); }
.thread-line { position:absolute; z-index:1; left:38%; top:44%; width:32%; height:2px; background:var(--amber); transform:rotate(28deg); box-shadow: 0 0 16px rgba(229,160,41,.5); }
.screen-search { position:absolute; z-index:3; left:50%; bottom:14px; transform:translateX(-50%); width:78%; padding:12px 16px; border:1px solid rgba(250,247,240,.16); border-radius:10px; color:#9da6ad; background:rgba(23,28,33,.88); font:.7rem ui-monospace,monospace; backdrop-filter:blur(8px); }

.principles { padding: 20px 0 140px; display:grid; grid-template-columns:minmax(260px,.75fr) minmax(440px,1.25fr); gap:80px; }
.principles-intro { position:sticky; top:48px; align-self:start; }
.footnote { color:var(--muted); font-size:.72rem; }
.principle-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.principle-list li { padding:30px 0; display:grid; grid-template-columns:56px 1fr; gap:20px; border-bottom:1px solid var(--line); }
.principle-list li > span { color:#83601f; font:800 .7rem ui-monospace,monospace; }
.principle-list h3 { margin-bottom:5px; font-size:1.2rem; }
.principle-list p { margin:0; color:var(--muted); }

.closing { padding: 130px max(24px, calc((100vw - 900px) / 2)); text-align:center; background:#f1eadf; border-top:1px solid var(--line); }
.closing img { width:130px; height:auto; margin-bottom:30px; }
.closing h2 { max-width:900px; margin-left:auto; margin-right:auto; }
.closing > p:last-child { color:var(--muted); }

footer { min-height:130px; padding:30px max(24px, calc((100vw - var(--max)) / 2)); display:flex; align-items:center; gap:18px; background:var(--ink); color:var(--cream); font-size:.72rem; }
footer img { width:38px; height:38px; }
footer p { margin:0; }
.footer-aside { margin-left:auto; opacity:.62; }

.route-toast { position:fixed; z-index:50; right:22px; bottom:22px; max-width:320px; padding:12px 16px; border-radius:12px; background:var(--ink); color:var(--cream); box-shadow:var(--shadow); font-size:.75rem; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; }
.route-toast.is-visible { opacity:1; transform:translateY(0) rotate(-1deg); }

body.detour-mode .hero-object { animation: gentle-tilt 650ms ease; }
body.detour-mode .manifesto-band::before { transform: rotate(2deg); }
@keyframes gentle-tilt { 50% { transform: rotate(-2deg) translateY(-7px); } }

:focus-visible { outline:3px solid var(--amber); outline-offset:4px; }

@media (max-width: 980px) {
  .site-header { min-height:80px; }
  nav a { display:none; }
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-object { width:min(100%,650px); margin:0 auto; }
  .project { grid-template-columns:45px 1fr; }
  .project-visual { grid-column:1 / -1; }
  .principles { grid-template-columns:1fr; gap:36px; }
  .principles-intro { position:static; }
}

@media (max-width: 640px) {
  body { font-size:16px; }
  .site-header { width:min(calc(100% - 28px),var(--max)); }
  .brand img { width:190px; }
  nav { gap: 0; }
  .tiny-button { width:38px; height:38px; padding:0; font-size:0; }
  .tiny-button::after { content:"＊"; font-size:1rem; }
  .hero, .section-shell { width:min(calc(100% - 28px),var(--max)); }
  .hero { min-height:0; padding:58px 0 74px; gap:54px; }
  .hero-copy { min-width:0; }
  h1 { font-size:clamp(2.85rem,14vw,3.8rem); overflow-wrap:normal; }
  .microcopy { max-width:230px; }
  .route-stage { min-height:410px; }
  .route-note { width:132px; min-height:70px; padding:10px; }
  .route-note strong { font-size:.69rem; }
  .note-middle { left:35%; top:42%; }
  .manifesto-band { min-height:150px; }
  .manifesto-band img { width:86px; }
  .work-section { padding:90px 0; }
  .project { padding:28px 20px; grid-template-columns:1fr; gap:14px; }
  .project-number { writing-mode:horizontal-tb; }
  .project-visual { grid-column:auto; min-height:330px; margin-top:20px; }
  .screen-card { width:155px; }
  .card-a { left:4%; }
  .card-b { right:4%; }
  .principles { padding-bottom:90px; }
  .closing { padding-top:90px; padding-bottom:90px; }
  footer { align-items:flex-start; flex-wrap:wrap; }
  .footer-aside { flex-basis:100%; margin-left:56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}