:root { color-scheme: light; --paper: #efeee5; --ink: #252820; --red: #bd3a25; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.page { max-width: 1600px; min-height: 100svh; padding: 32px 5vw 22px; margin: 0 auto; display: flex; flex-direction: column; }
p, h1, h2 { margin: 0; }
.topline, footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.6; }
.topline { padding-bottom: 20px; border-bottom: 1px solid #25282045; }
.status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
main { flex: 1; padding-top: clamp(40px, 7vh, 90px); padding-bottom: clamp(48px, 8vh, 90px); }
.wordmark-wrap { position: relative; }
h1 { font-family: Impact, "Arial Black", Arial, sans-serif; font-size: clamp(112px, 23.8vw, 360px); font-weight: 900; line-height: .85; letter-spacing: -.045em; }
.period { color: var(--red); }
.sticker { position: absolute; right: 2%; top: 19%; display: flex; align-items: center; justify-content: center; width: clamp(110px, 12vw, 174px); height: clamp(110px, 12vw, 174px); border-radius: 50%; background: var(--red); color: var(--paper); text-align: center; font-size: clamp(17px, 2vw, 29px); font-weight: 900; line-height: 1.1; letter-spacing: -.045em; transform: rotate(12deg); }
.fullname { margin-top: 25px; font-size: clamp(11px, 1.5vw, 20px); font-weight: 700; letter-spacing: .2em; }
.intro { margin-top: clamp(48px, 7vh, 88px); display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 32px; }
h2 { font-size: clamp(38px, 4.8vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.description { font-size: clamp(16px, 1.65vw, 23px); line-height: 1.45; letter-spacing: -.015em; padding-left: 8%; }
.description .more { margin-top: 22px; font-size: clamp(14px, 1.2vw, 17px); color: #626458; }
footer { border-top: 1px solid #25282045; padding-top: 17px; }
footer span { margin-left: 12px; font-size: 17px; }
@media (min-width: 1600px) { .page { padding-left: 80px; padding-right: 80px; } }
@media (max-width: 680px) {
  .page { padding: 24px 6vw 20px; }
  .topline { font-size: 8px; gap: 12px; padding-bottom: 16px; }
  main { padding-top: 58px; padding-bottom: 52px; }
  h1 { font-size: 27.3vw; }
  .sticker { width: 75px; height: 75px; right: 0; top: -31px; font-size: 14px; transform: rotate(12deg) translateY(-25%); }
  .fullname { margin-top: 18px; font-size: 10px; letter-spacing: .15em; }
  .intro { grid-template-columns: 1fr; gap: 27px; margin-top: 52px; }
  h2 { font-size: clamp(38px, 10vw, 58px); }
  .description { padding: 0; font-size: 17px; }
  .description .more { margin-top: 20px; font-size: 14px; }
  footer { align-items: flex-start; font-size: 8px; letter-spacing: .06em; gap: 12px; }
  footer p:first-child { max-width: 150px; }
  footer p:last-child { white-space: nowrap; }
}
@media (max-width: 360px) { .topline { font-size: 7px; } .desktop-break { display: none; } }
