/* Toofani Town — from the "Toofani Town Design System": three inks on paper (press red,
   press navy, press gold), Rye / Vollkorn / Courier Prime, printed rules 3/5/7px, radius 0,
   no shadows, no transparency. Cuts, not fades; type stamps in; hover darkens the ink. */
.channel--tt {
  --c-bg: #F5F1E6; --c-ink: #16324A;
  --tt-red: #A32A20; --tt-red-700: #8E221F; --tt-navy: #16324A; --tt-gold: #E5AA44; --tt-paper: #F5F1E6; --tt-aged: #8B8168; --tt-navy-100: #C6CFD6;
  --tt-display: "Rye", "Vollkorn", Georgia, serif;
  --tt-stmt: "Vollkorn", Georgia, serif;
  --tt-data: "Courier Prime", ui-monospace, "Courier New", monospace;
  font: 400 1.0625rem/1.5 var(--tt-stmt);
  background-color: var(--tt-paper);
  background-image: radial-gradient(circle, rgba(163,42,32,.10) 0 2.4px, transparent 2.8px);
  background-size: 13px 13px;
}
.channel--tt h1, .channel--tt h2, .channel--tt h3 { text-transform: none; letter-spacing: 0; }
.tt-data { font: 700 .8125rem/1.6 var(--tt-data); letter-spacing: .08em; text-transform: uppercase; }
.tt-stmt { font: 800 clamp(1.5rem, 3.6vw, 2.4rem)/1.06 var(--tt-stmt); text-transform: uppercase; color: var(--tt-navy); margin: 0; }
.tt-stmt b { color: var(--tt-red); font-weight: inherit; }
.channel--tt .btn {
  background: var(--tt-red); color: var(--tt-paper); border: 5px solid var(--tt-red);
  font: 700 .875rem/1 var(--tt-data); letter-spacing: .08em; transition: background-color var(--dur-1) linear, border-color var(--dur-1) linear, transform 90ms linear;
}
.channel--tt .btn::before { display: none; }
.channel--tt .btn:hover { background: var(--tt-red-700); border-color: var(--tt-red-700); color: var(--tt-paper); }
.channel--tt .btn:active { transform: translate(5px, 5px); }
.channel--tt :focus-visible { outline: 4px solid var(--tt-gold); outline-offset: 3px; }

/* hero: a ticket plate on the navy field */
.tt-hero { background: var(--tt-navy); padding-block: clamp(32px, 6vw, 72px); }
.tt-ticket { background: var(--tt-paper); border: 5px solid var(--tt-navy); outline: 9px solid var(--tt-red); outline-offset: -14px; padding: 0 0 clamp(22px, 4vw, 40px); max-width: 980px; }
.tt-band { background: var(--tt-gold); color: var(--tt-navy); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px clamp(22px, 4vw, 40px) 12px; border-bottom: 5px solid var(--tt-navy); }
.tt-ticket-body { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px) clamp(22px, 4vw, 40px) 0; }
.tt-ticket h1 { font: 400 clamp(3rem, 10vw, 7rem)/.88 var(--tt-display); color: var(--tt-red); letter-spacing: .01em; }
.tt-ticket .channel-line { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 42ch; margin: 0; }
.tt-rule { border: 0; border-top: 5px solid var(--tt-navy); box-shadow: 0 7px 0 -4px var(--tt-navy); margin: 6px 0 4px; }
.tt-ticket .channel-follow { margin-top: 4px; justify-self: start; }

/* files on record: sealed dossiers that open */
.tt-files { padding-block: clamp(40px, 7vw, 88px); }
.tt-files-head { display: grid; gap: 10px; margin-bottom: 24px; }
.dossiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dossier { background: var(--tt-paper); border: 5px solid var(--tt-navy); }
.dossier summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; transition: background-color var(--dur-1) linear; }
.dossier summary::-webkit-details-marker { display: none; }
.dossier summary:hover { background: #EFE8D6; }
.dossier-no { color: var(--tt-aged); }
.dossier-name { font: 400 clamp(1.5rem, 3.6vw, 2.4rem)/.94 var(--tt-display); color: var(--tt-red); }
.dossier-seal { border: 3px solid var(--tt-navy); padding: 6px 8px; }
.dossier[open] .dossier-seal { background: var(--tt-navy); color: var(--tt-paper); }
.dossier[open] .dossier-seal::after { content: " · open"; }
.dossier-body { position: relative; border-top: 5px dashed var(--tt-navy); padding: 20px 20px 24px; display: grid; gap: 18px 28px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dossier[open] .dossier-body { animation: tt-tear 420ms cubic-bezier(.16, 1, .3, 1); }
.dossier-body h3 { font: 700 .8125rem/1.4 var(--tt-data); letter-spacing: .08em; text-transform: uppercase; color: var(--tt-aged); margin: 0 0 6px; }
.dossier-body p { margin: 0; }
.dossier-rules { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--tt-navy); }
.dossier-rules li { font: 700 .8125rem/1.5 var(--tt-data); letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; border-bottom: 3px solid var(--tt-navy); }
.dossier-stamp {
  position: absolute; right: 18px; bottom: 16px; border: 4px solid var(--tt-red); color: var(--tt-red); background: var(--tt-paper);
  padding: 6px 10px; font: 700 1.05rem/1 var(--tt-data); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-6deg);
}
.dossier[open] .dossier-stamp { animation: tt-stamp-in 180ms cubic-bezier(.2, 1.4, .3, 1) 380ms both; }
.dossier-status { padding-bottom: 36px; }
@keyframes tt-stamp-in { from { transform: scale(1.14) rotate(-7.5deg); } to { transform: scale(1) rotate(-6deg); } }
@keyframes tt-tear { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 720px) {
  .dossier summary { grid-template-columns: minmax(0, 1fr) auto; }
  .dossier-no { grid-column: 1 / -1; }
  .dossier-body { grid-template-columns: 1fr; }
}

/* the Commissioner's notices: one visual system */
.tt-notices { background: var(--tt-navy); color: var(--tt-paper); padding-block: clamp(40px, 7vw, 88px); }
.tt-notices .tt-stmt { color: var(--tt-paper); }
.tt-notices .tt-stmt b { color: var(--tt-gold); }
.notice-row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.tt-notice { background: var(--tt-paper); color: var(--tt-navy); border: 5px solid var(--tt-paper); }
.tt-notice .tt-band { padding: 12px 18px; border-bottom-width: 5px; }
.tt-notice-body { padding: 18px; display: grid; gap: 12px; }
.tt-notice-body strong { font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.2 var(--tt-data); letter-spacing: .06em; }
.tt-notice--dismissed strong { color: var(--tt-red); }
.tt-fine { font: 400 .75rem/1.5 var(--tt-data); letter-spacing: .08em; text-transform: uppercase; color: var(--tt-aged); margin: 0; }
.tt-notices p.prose { color: var(--tt-navy-100); max-width: 52ch; }
@media (max-width: 720px) { .notice-row { grid-template-columns: 1fr; } }