html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }

@font-face { font-family:'DM Serif Display'; font-weight:400; font-display:swap; src:url('./fonts/DMSerifDisplay-400.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-weight:600; font-display:swap; src:url('./fonts/Caveat-600.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-weight:700; font-display:swap; src:url('./fonts/Caveat-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:400; font-display:swap; src:url('./fonts/Archivo-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:500; font-display:swap; src:url('./fonts/Archivo-500.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:600; font-display:swap; src:url('./fonts/Archivo-600.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:800; font-display:swap; src:url('./fonts/Archivo-800.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:900; font-display:swap; src:url('./fonts/Archivo-900.woff2') format('woff2'); }

.portfolio-root { margin:-24px; padding:28px 0; }

  :where(.portfolio-root) * { margin:0; padding:0; box-sizing:border-box; }
  :root { --ink:#111; --paper:#fdfcf9; --accent:#c96f2f; }
  html { scroll-behavior:smooth; }
  .portfolio-root { background:var(--paper); color:var(--ink); font-family:'Archivo',Helvetica,Arial,sans-serif;  }
  .wrap { max-width:960px; margin:0 auto; padding:0 28px; }
  .serif { font-family:'DM Serif Display',Georgia,serif; }
  .script { font-family:'Caveat',cursive; }
  .pill { display:inline-block; border:1.5px solid var(--ink); border-radius:999px; padding:4px 16px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
  :where(.portfolio-root) :is(img, video) { max-width:100%; display:block; }
  :where(.portfolio-root) a { color:var(--ink); }

  /* masthead */
  header { text-align:center; padding:56px 0 8px; position:relative; }
  header .pill { margin-bottom:18px; }
  .mast { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(58px,12.5vw,164px); line-height:.9; letter-spacing:.01em; text-transform:uppercase; }
  .mast-o { color:transparent; -webkit-text-stroke:3px var(--ink); }
  .hero-photos { display:flex; justify-content:center; gap:26px; margin-top:34px; }
  .hero-photos img { width:150px; height:190px; object-fit:cover; border:2.5px solid var(--ink); border-radius:12px; box-shadow:5px 5px 0 rgba(17,17,17,.9); background:#fff; padding:5px 5px 18px; }
  .mast-name { font-family:'Caveat',cursive; font-size:clamp(34px,5.5vw,64px); color:var(--accent); margin-top:-.55em; position:relative; z-index:2; transform:rotate(-2.5deg); display:inline-block; }
  .tagline { max-width:560px; margin:26px auto 0; font-size:17px; line-height:1.55; color:#333; }

  section { padding:72px 0; }
  .sec-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:38px; border-bottom:2.5px solid var(--ink); padding-bottom:14px; }
  .sec-head h2 { font-size:clamp(30px,4.5vw,46px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; }
  .sec-head .script { font-size:clamp(22px,3vw,30px); color:var(--accent); transform:rotate(-1.5deg); }

  /* about */
  .about { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; }
  .about-photo { position:relative; }
  .about-photo img { width:100%; border-radius:170px 170px 18px 18px; border:2.5px solid var(--ink); }
  .about-photo .script { position:absolute; bottom:-16px; right:-8px; background:var(--paper); padding:0 10px; font-size:26px; color:var(--accent); transform:rotate(-3deg); }
  .about h2 { font-size:clamp(30px,4vw,42px); font-weight:900; text-transform:uppercase; }
  .about .script.sub { font-size:28px; color:var(--accent); display:block; margin:2px 0 14px; }
  .about p { font-size:16.5px; line-height:1.6; color:#333; margin-bottom:12px; }
  .connect { margin-top:20px; padding-top:18px; border-top:1.5px dashed #999; }
  .connect .lbl { font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:13px; margin-bottom:8px; }
  .connect a { display:inline-block; margin:0 18px 6px 0; font-weight:600; text-decoration:none; border-bottom:2px solid var(--accent); }

  /* audio strip */
  .audio-card { border:2.5px solid var(--ink); border-radius:18px; padding:26px 30px; display:flex; gap:22px; align-items:center; background:#fff; box-shadow:6px 6px 0 var(--ink); }
  .audio-badge { flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; }
  .audio-badge svg { width:26px; height:26px; fill:#fff; }
  .audio-card .t { font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:.02em; }
  .audio-card .d { color:#444; font-size:14.5px; margin-top:4px; line-height:1.5; }
  .audio-card .credit { font-size:12.5px; color:#777; margin-top:6px; }

  /* stats */
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
  .stat .num { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(44px,6vw,74px); line-height:1; }
  .stat .cap { font-size:13.5px; color:#444; margin-top:8px; line-height:1.45; max-width:200px; margin-left:auto; margin-right:auto; }

  /* projects */
  .proj { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-bottom:64px; }
  .proj:nth-child(even) .proj-media { order:2; }
  .proj-media { position:relative; }
  .proj-media img { border:2.5px solid var(--ink); border-radius:14px; box-shadow:7px 7px 0 rgba(17,17,17,.9); background:#fff; }
  .proj-media.tilt-l img { transform:rotate(-1.6deg); }
  .proj-media.tilt-r img { transform:rotate(1.6deg); }
  .proj h3 { font-size:clamp(26px,3.6vw,40px); font-weight:900; text-transform:uppercase; line-height:1.02; letter-spacing:-.01em; margin-bottom:16px; }
  .proj .meta { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:14px; }
  .proj .meta div { font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:#666; }
  .proj .meta b { display:block; color:var(--ink); font-size:13px; margin-top:2px; letter-spacing:.02em; }
  .proj p { font-size:15.5px; line-height:1.6; color:#333; }

  /* live */
  .live { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
  .live figure img, .live video { width:100%; border:2.5px solid var(--ink); border-radius:14px; box-shadow:7px 7px 0 rgba(17,17,17,.9); background:#000; }
  .live figcaption { margin-top:12px; font-size:14.5px; color:#444; }

  /* built apps */
  .apps { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
  .app { border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; background:#fff; box-shadow:6px 6px 0 rgba(17,17,17,.9); }
  .app .shot { border-bottom:2.5px solid var(--ink); max-height:300px; overflow:hidden; }
  .app .shot img { width:100%; object-fit:cover; object-position:top; }
  .app .body { padding:20px 22px 24px; }
  .app h3 { font-size:22px; font-weight:900; text-transform:uppercase; }
  .app p { font-size:14.5px; color:#333; line-height:1.55; margin:8px 0 12px; }
  .app a { font-weight:700; font-size:14px; text-decoration:none; border-bottom:2px solid var(--accent); }

  /* stall */
  .stall-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
  .stall-copy p { font-size:16px; line-height:1.65; color:#333; margin-bottom:12px; }
  .stall-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .stall-photos img { border:2.5px solid var(--ink); border-radius:14px; box-shadow:5px 5px 0 rgba(17,17,17,.9); }
  .stall-photos img:first-child { transform:rotate(-2deg); margin-top:10px; }
  .stall-photos img:last-child { transform:rotate(1.8deg); margin-top:22px; }

  /* off-duty clips */
  .offduty { margin-top:56px; }
  .clips { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .clips video { width:100%; border:2.5px solid var(--ink); border-radius:14px; box-shadow:6px 6px 0 rgba(17,17,17,.9); background:#000; aspect-ratio:9/16; object-fit:cover; }
  .clips video:nth-child(1) { transform:rotate(-2deg); }
  .clips video:nth-child(2) { transform:rotate(1.2deg); }
  .clips video:nth-child(3) { transform:rotate(-1.4deg); }
  .stall-photos video { width:100%; border:2.5px solid var(--ink); border-radius:14px; box-shadow:5px 5px 0 rgba(17,17,17,.9); background:#000; }

  /* skills */
  .skills-list { font-size:16.5px; line-height:1.7; color:#333; max-width:820px; }
  .skills-list b { color:var(--ink); }

  /* contact */
  footer { border-top:2.5px solid var(--ink); padding:72px 0 46px; text-align:center; }
  footer h2 { font-size:clamp(40px,7vw,84px); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; }
  footer .script { font-size:30px; color:var(--accent); display:block; margin:4px 0 26px; transform:rotate(-1.5deg); }
  .polaroid { display:inline-block; background:#fff; border:1.5px solid #ddd; padding:10px 10px 34px; box-shadow:0 8px 22px rgba(0,0,0,.14); transform:rotate(-3deg); margin-bottom:28px; }
  .polaroid img { width:170px; border-radius:4px; }
  .contact-links a { display:inline-block; margin:0 14px 10px; font-weight:700; font-size:16px; text-decoration:none; border-bottom:2px solid var(--accent); }
  .cv-btn { display:inline-block; margin-top:18px; border:2.5px solid var(--ink); border-radius:999px; padding:12px 30px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:14px; text-decoration:none; background:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--accent); }
  .fineprint { margin-top:34px; font-size:12.5px; color:#888; line-height:1.6; }

  @media (max-width:860px) {
    section { padding:52px 0; }
    .about, .proj, .live, .stall-grid { grid-template-columns:1fr; gap:30px; }
    .proj:nth-child(even) .proj-media { order:0; }
    .about-photo { max-width:300px; margin:0 auto; }
    .stats { grid-template-columns:1fr 1fr; gap:26px; }
    .apps { grid-template-columns:1fr; }
    .audio-card { flex-direction:column; text-align:center; gap:14px; }
    .clips { gap:12px; }
    .hero-photos { gap:14px; }
    .hero-photos img { width:104px; height:136px; }
    .mast-o { -webkit-text-stroke-width:2px; }
  }

.portfolio-root a.cv-btn { color:#fff; }

  .live.single { grid-template-columns:minmax(0,460px); justify-content:center; }

  /* case competitions */
  .deck-link { display:inline-block; margin-top:12px; font-weight:700; font-size:14px; text-decoration:none; border-bottom:2px solid var(--accent); color:var(--ink); }
  .comps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .comp { border:2.5px solid var(--ink); border-radius:16px; background:#fff; box-shadow:6px 6px 0 rgba(17,17,17,.9); padding:22px 22px 20px; }
  .comp .res { display:inline-block; background:var(--accent); color:#fff; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding:5px 11px; border-radius:999px; margin-bottom:12px; }
  .comp h3 { font-size:20px; font-weight:900; text-transform:uppercase; line-height:1.1; }
  .comp .org { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#666; margin:7px 0 10px; }
  .comp p { font-size:14.5px; line-height:1.55; color:#333; margin-bottom:12px; }
  .comp a { font-weight:700; font-size:14px; text-decoration:none; border-bottom:2px solid var(--accent); color:var(--ink); }
  .comps-more { margin-top:28px; font-size:14.5px; line-height:1.75; color:#444; max-width:820px; }
  .comps-more a { font-weight:700; text-decoration:none; border-bottom:2px solid var(--accent); color:var(--ink); }
  @media (max-width:860px) {
    .comps { grid-template-columns:1fr; }
  }

  /* competition photos + mini grid */
  .comp .ph { margin:-22px -22px 14px; height:150px; overflow:hidden; border-bottom:2.5px solid var(--ink); border-radius:13px 13px 0 0; }
  .comp .ph img { width:100%; height:100%; object-fit:cover; display:block; }
  .comps-also { margin:34px 0 16px; font-weight:900; font-size:15px; text-transform:uppercase; letter-spacing:.06em; }
  .comps2 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .comps2 .mini { border:2.5px solid var(--ink); border-radius:14px; background:#fff; box-shadow:5px 5px 0 rgba(17,17,17,.9); overflow:hidden; }
  .comps2 .mini .ph { height:110px; }
  .comps2 .mini .ph img { width:100%; height:100%; object-fit:cover; display:block; }
  .comps2 .mini .iconph { display:flex; align-items:center; justify-content:center; background:#f6ead9; }
  .comps2 .mini .iconph svg { width:44px; height:44px; fill:var(--accent); }
  .comps2 .mini .bd { padding:14px 16px 16px; }
  .comps2 .mini h4 { font-size:15px; font-weight:900; text-transform:uppercase; line-height:1.15; }
  .comps2 .mini .org { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#666; margin:5px 0 6px; }
  .comps2 .mini p { font-size:13px; color:#333; line-height:1.5; margin-bottom:8px; }
  .comps2 .mini a { font-weight:700; font-size:13px; text-decoration:none; border-bottom:2px solid var(--accent); color:var(--ink); }
  .credits { margin-top:26px; font-size:12px; color:#999; line-height:1.6; }
  @media (max-width:860px) {
    .comps2 { grid-template-columns:1fr 1fr; }
  }

/* standalone hosting overrides */
body { background:#fdfcf9; }
.portfolio-root { margin:0; padding:28px 0; }
html, body { overflow-x: clip; }
/* On the ground: stop content-driven fr track blowout */
.portfolio-root .stall-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.portfolio-root .stall-photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
.portfolio-root .stall-photos img, .portfolio-root .stall-photos video { width:100%; height:auto; max-width:100%; }
@media (max-width:860px) {
  .portfolio-root .stall-grid { grid-template-columns:minmax(0,1fr); }
}
/* On the ground tidy: aligned thumbs, capped video */
.portfolio-root .stall-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; }
.portfolio-root .stall-photos { align-items:start; }
.portfolio-root .stall-photos video { max-height:440px; object-fit:contain; background:#000; }
.portfolio-root .stall-photos img { aspect-ratio:1/1; object-fit:cover; }
@media (max-width:860px) {
  .portfolio-root .stall-grid { grid-template-columns:minmax(0,1fr); }
  .portfolio-root .stall-photos video { max-height:420px; }
}

/* small sound button */
#sound-btn { position:fixed; right:16px; bottom:16px; z-index:50; width:48px; height:48px; border-radius:50%; border:2.5px solid #111; background:#c96f2f; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:3px 3px 0 #111; padding:0; }
#sound-btn:focus-visible { outline:3px solid #111; outline-offset:3px; }