/* Desktop playground. Mobile keeps its existing typography and composition. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk.woff') format('woff');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-italic.woff') format('woff');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
.portrait-pointer { display: contents; }
.edge-scenes { display: none; }

@media (min-width: 769px) {
  :root { --desktop-accent: #2448e8; --lime: #dfff00; --display: 'Space Grotesk', 'Helvetica Neue', sans-serif; --annotation: 'Fraunces', Baskerville, serif; }
  main { container-type: inline-size; }
  .site-header { grid-template-columns: minmax(0, .6fr) minmax(0, 1.6fr) minmax(0, .7fr); gap: 16px; }
  .site-nav { flex-wrap: wrap; gap: .5rem clamp(.5rem, 1.2vw, 1.2rem); }
  .header-contact { justify-self: end; max-width: 100%; overflow-wrap: anywhere; }
  h1, h2, h3, .social-directory strong { font-family: var(--display); overflow-wrap: anywhere; }
  .book-shelf a { grid-template-columns: minmax(2rem,.3fr) minmax(0,1fr) minmax(0,.7fr) auto; }
  .social-directory a { grid-template-columns: minmax(2rem,.25fr) minmax(0,1.1fr) minmax(0,.8fr) auto; }
  .book-copy, .book-note, .social-directory a > span:nth-child(3) { overflow-wrap: anywhere; }
  .hero { position: relative; }
  .hero-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 3rem; }
  .hero h1 { max-width: none; font-size: clamp(88px, 8vw, 144px); line-height: .95; letter-spacing: -.07em; overflow-wrap: anywhere; }
  .hero-name { color: var(--desktop-accent); }
  .hero-statement { max-width: 46ch; margin-left: auto; font-size: clamp(1.35rem, 2vw, 1.8rem); }
  .status { padding: .6rem .8rem; background: var(--lime); color: var(--ink); transform: rotate(-2deg); }
  .hero-media { margin-top: 2.75rem; align-items: center; }
  .hero-note { font-family: var(--annotation); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; border-color: var(--desktop-accent); }
  .portrait-diptych { width: min(100%, 39rem); justify-self: end; }
  .portrait-candid { flex: .51943 1 0; }
  .portrait-event { flex: .73918 1 0; }
  .portrait img { width: 100%; height: auto; max-width: 100%; border: 0; outline: 1px solid var(--ink); outline-offset: -1px; }
  .portrait-pointer { display: block; }
  .portrait figcaption { flex-wrap: wrap; overflow-wrap: anywhere; color: var(--desktop-accent); }
  .travel { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); }
  .passport-card { max-width: 20rem; }
  .travel-note { overflow-wrap: anywhere; }
  .ghost-stamp { min-width: 0; flex: 1 1 9rem; max-width: 100%; overflow-wrap: anywhere; }
  .portrait-event { margin-top: 2.5rem; }
  .section-index, .book-number, .social-index { color: var(--desktop-accent); }
  .section-heading h2 { font-weight: 500; }
  .project-failed h3, .book-copy strong { font-family: var(--annotation); font-style: italic; }
  .project-shipped .project-meta span:nth-child(2) { background: var(--desktop-accent); }
  .project h3 a span, .link-arrow { color: var(--desktop-accent); }
  .book-shelf a:hover, .book-shelf a:focus-visible, .social-directory a:hover, .social-directory a:focus-visible { background: #f4f6ff; }
  .book-shelf a, .social-directory a { transition: background-color 180ms ease; }
  .contact h2 { max-width: 17ch; }
  .contact-link { color: var(--desktop-accent); }
}

/* Reflow when a narrow desktop window or enlarged text reduces reading space. */
@media (min-width: 769px) {
  @container (max-width: 48rem) {
    .hero-media, .about-grid, .travel { grid-template-columns: minmax(0,1fr); }
    .hero-note { max-width: 38ch; }
    .portrait-diptych { margin-inline: auto; }
    .about-grid, .travel, .languages { margin-left: 0; }
    .project, .project-startup, .project-experiment { grid-template-columns: minmax(0,1fr); }
    .project-main, .project-result, .project-facts, .project-now, .project-lesson, .experiment-notes, .progress-track { grid-column: 1; grid-row: auto; }
    .project-meta { display: flex; flex-wrap: wrap; gap: 1rem; }
    .book-shelf a, .social-directory a { grid-template-columns: 2rem minmax(0,1fr) auto; gap: 1rem; }
    .book-note, .social-directory a > span:nth-child(3) { grid-column: 2; }
    .book-shelf .link-arrow, .social-directory .link-arrow { grid-column: 3; grid-row: 1; }
    .section-heading { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  }
}

@media (min-width: 1200px) {
  .site-header, main, .site-footer { width: min(1200px, calc(100% - 192px)); }
  .edge-scenes { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: clip; }
  .edge-object { position: absolute; width: 68px; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--desktop-accent); }
  .edge-left { left: 14px; top: 36%; }
  .edge-right { right: 14px; top: 30%; }
  .edge-object svg { display: block; width: 100%; margin-bottom: 1rem; }
  .edge-plane { rotate: -6deg; }
  .edge-plane span { font-family: var(--annotation); font-style: italic; font-size: 16px; }
  .edge-note { background: var(--lime); color: var(--ink); padding: 12px 6px; rotate: 6deg; }
  .edge-note span { display: block; font-size: 36px; }
  .edge-stamp { border: 1px dashed var(--desktop-accent); text-align: center; padding: 16px 3px; rotate: -6deg; }
  .edge-stamp.edge-right { rotate: 6deg; }
  .edge-stamp small { display: block; margin-top: 10px; font-size: 9px; }
  .edge-slip { padding-block: 12px; border-block: 1px solid var(--desktop-accent); rotate: -5deg; }
  .edge-slip svg { margin: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portrait[data-depth], .portrait-pointer { transform: none !important; }
}