:root {
  --paper: #fff;
  --ink: #000;
  --gutter: clamp(20px, 5vw, 72px);
  color: var(--ink);
  background: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
a { color: inherit; text-decoration: none; }
.announce { padding: 5px 16px; background: var(--ink); color: var(--paper); font: 700 10px/15px Consolas, "Courier New", monospace; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.sub-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); border-bottom: 1px solid var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: inherit; font-size: clamp(25px, 3.5vw, 46px); font-weight: 700; }
.wordmark-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25em; }
.mark { display: block; width: 30px; height: 30px; flex: 0 0 auto; object-fit: cover; }
.back-home { font: 700 10px Consolas, "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; }
.back-home:hover { text-decoration: underline; text-underline-offset: 4px; }
.sub-main { display: grid; min-height: max(570px, calc(100svh - 140px)); grid-template-columns: 1fr 1fr; background: var(--paper); }
.sub-main.sub-soon { grid-template-columns: 1fr; place-items: center; }
.sub-soon .sub-title { margin: 0; }
.sub-copy { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: clamp(24px, 4vw, 58px) var(--gutter) 30px; }
.sub-meta, .sub-bottom, .sub-footer { font: 700 10px/1.5 Consolas, "Courier New", monospace; letter-spacing: .07em; text-transform: uppercase; }
.sub-meta { display: flex; align-items: center; gap: 12px; }
.sub-number { padding: 6px 9px; background: var(--ink); color: var(--paper); }
.sub-title { max-width: 100%; margin: 24px 0 0; font-family: inherit; font-size: clamp(50px, 7.4vw, 112px); font-weight: 700; line-height: .94; overflow-wrap: anywhere; text-transform: uppercase; }
.sub-placeholder { max-width: 360px; margin: 22px 0 0; font: 700 13px/1.5 Consolas, "Courier New", monospace; }
.sub-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--ink); }
.coming-soon { padding: 8px 11px; background: var(--ink); color: var(--paper); }
.sub-photo-slot { position: relative; width: 100%; min-height: 0; aspect-ratio: 5 / 4; align-self: center; overflow: hidden; border-left: 1px solid var(--ink); background: var(--paper); }
.sub-photo-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-index { position: absolute; top: 14px; right: 16px; font: 700 10px Consolas, "Courier New", monospace; }
.sub-footer { display: flex; justify-content: space-between; gap: 16px; padding: 17px var(--gutter); border-top: 1px solid var(--ink); font-size: 9px; }
@media (max-width: 600px) {
  .sub-header { min-height: 68px; }
  .wordmark { gap: 7px; font-size: clamp(14px, 4vw, 19px); }
  .wordmark .mark { width: 24px; height: 24px; font-size: 15px; }
  .back-home { font-size: 9px; }
  .sub-main { min-height: 0; grid-template-columns: 1fr; }
  .sub-copy { min-height: 500px; padding-top: 26px; }
  .sub-title { font-size: clamp(48px, 13vw, 78px); }
  .sub-photo-slot { min-height: 0; aspect-ratio: 5 / 4; align-self: stretch; border-top: 1px solid var(--ink); border-left: 0; }
  .sub-bottom, .sub-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 380px) {
  .sub-header { gap: 8px; padding-right: 12px; padding-left: 12px; }
  .wordmark { gap: 6px; font-size: 13px; }
  .wordmark .mark { width: 22px; height: 22px; font-size: 14px; }
  .back-home { font-size: 8px; }
}