:root {
  --paper: #dededa;
  --panel: #e7e7e3;
  --ink: #191919;
  --line: #a7a7a2;
  --red: #b6000b;
  --muted: #64645f;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #cdcdc8; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.red { color: var(--red); }

.shell {
  margin: 16px;
  height: calc(100dvh - 32px);
  min-height: 520px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 9px 35px #29292913;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 27px 18px 22px;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.brand { font-size: 25px; font-weight: 900; letter-spacing: -1.4px; display: flex; align-items: center; }
.brand-mark { display: block; width: 23px; height: 23px; background: linear-gradient(45deg, var(--red) 0 45%, var(--paper) 46% 54%, var(--red) 55%); margin-right: 10px; }
.nav-label, .eyebrow, .topbar, .hero-caption, .panel-heading, .sidebar-bottom, .footer, .art-index, .interest-list, .purpose-end {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .065em;
}
.nav-label { color: var(--muted); font-size: 11px; margin-top: 82px; margin-bottom: 15px; }
.nav { display: grid; gap: 0; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  width: 100%; padding: 16px 11px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none; text-decoration: none; color: var(--ink);
  font: 700 12px/1 'Courier New', Courier, monospace; letter-spacing: .1em;
  text-align: left;
}
.nav-item.active { background: var(--ink); color: white; }
.nav-item.active::before { content: ''; position: absolute; left: -6px; top: 0; height: 100%; width: 4px; background: var(--red); }
.nav-item:disabled { color: #595953; opacity: 1; cursor: not-allowed; }
.soon { color: #777770; font-size: 9px; font-weight: normal; }
.sidebar-bottom { margin-top: auto; font-size: 10px; line-height: 1.65; }
.tiny-rule { width: 25px; height: 1px; background: var(--ink); margin-bottom: 14px; }
.sidebar-domain { color: var(--red); margin-top: 16px; font-weight: bold; }

.main { padding: 0 37px; min-width: 0; overflow-y: auto; }
.topbar { display: flex; justify-content: space-between; padding-top: 28px; color: var(--muted); font-size: 11px; }
.hero { min-height: 455px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.hero-copy { padding-top: 15px; flex: 1 1 auto; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.square { display: inline-block; width: 8px; height: 8px; background: var(--red); }
h1 { margin: 28px 0 21px; font-size: clamp(50px, 5.7vw, 92px); line-height: .99; letter-spacing: -.07em; font-weight: 900; }
h1 span:not(.red) { color: var(--red); }
.hero-caption { font-size: 11px; }
.hero-art { width: clamp(220px, 29vw, 380px); height: 380px; flex: 0 0 auto; position: relative; align-self: center; }
.red-block { background: var(--red); width: 69%; height: 56%; position: absolute; top: 11%; right: 3%; }
.hero-art img { position: absolute; width: 100%; height: 95%; object-fit: contain; left: 0; top: 0; filter: grayscale(1); }
.art-index { position: absolute; right: 0; bottom: 4%; font-size: 9px; }

.info-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.panel { border: 1px solid var(--line); background: #ffffff18; padding: 16px 18px 20px; min-height: 245px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.panel-heading b { margin-right: 7px; }
.panel-heading > span:last-child { color: var(--muted); font-weight: normal; }
.panel h2 { font-size: 30px; line-height: 1; margin: 25px 0 16px; letter-spacing: -.045em; }
.panel p { font-size: 13px; line-height: 1.6; max-width: 36ch; margin: 0 0 12px; }
.interest-list { margin-top: 16px; font-size: 10px; line-height: 1.6; }
.interest-list div { padding: 11px 0; border-bottom: 1px solid #b5b5af; }
.interest-list span { display: inline-block; width: 26px; color: var(--red); }
.purpose { display: flex; flex-direction: column; }
.purpose p { margin-top: 19px; }
.purpose-end { display: flex; gap: 8px; align-items: center; margin-top: auto; font-size: 10px; }
.red-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.footer { display: flex; justify-content: space-between; margin: 22px 0 25px; color: var(--muted); font-size: 10px; }

@media (max-width: 1150px) {
  .main { padding: 0 23px; }
  .hero-art { width: 240px; }
  h1 { font-size: clamp(48px, 5.7vw, 74px); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .about { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 720px) {
  html, body { height: auto; }
  .shell { height: auto; min-height: calc(100dvh - 20px); margin: 10px; grid-template-columns: 1fr; }
  .sidebar { padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .nav-label, .sidebar-bottom { display: none; }
  .nav { grid-template-columns: repeat(3, 1fr); margin-top: 15px; gap: 3px; }
  .nav-item { padding: 11px 8px; font-size: 10px; border: 1px solid var(--line); }
  .soon, .nav-item.active span:last-child { display: none; }
  .nav-item.active::before { display: none; }
  .main { overflow: visible; padding: 0 17px; }
  .topbar { padding-top: 18px; font-size: 9px; }
  .hero { min-height: 490px; align-items: flex-start; }
  .hero-copy { padding-top: 56px; }
  h1 { font-size: clamp(43px, 10vw, 71px); }
  .hero-art { width: 180px; height: 230px; position: absolute; right: -10px; bottom: 1px; opacity: .88; }
  .art-index { font-size: 7px; }
  .info-grid { grid-template-columns: 1fr; }
  .about { grid-column: auto; }
  .panel { min-height: 0; }
  .footer { gap: 12px; line-height: 1.5; }
}