:root{
  --bg:#121212;
  --ink:#EDEDEB;
  --rule:#2C2C2C;
  --accent:#B85C3E;
  --muted:#949494;
  --card:#1B1B1A;
  --glow:rgba(184,92,62,0.20);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; position:relative; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- NAV / MASTHEAD ---------- */
header.masthead {
  position:relative; padding:18px 20px 34px; text-align:center;
  border-bottom:1px solid var(--rule); overflow:hidden; color:var(--ink);
}
header.masthead::before{
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:140%; height:220px;
  background:radial-gradient(ellipse at center, var(--glow), transparent 70%);
  pointer-events:none;
}
.nameplate {
  position:relative; font-family:'Bodoni Moda',serif; font-weight:600; font-size:11vw; line-height:0.95;
  letter-spacing:-0.01em; color:var(--ink);
}
.nameplate em { font-style:italic; font-weight:400; color:var(--accent); }
.tagline { position:relative; font-size:12.5px; color:var(--muted); margin-top:12px; letter-spacing:.03em; }

nav.deptnav {
  display:flex; overflow-x:auto; border-bottom:1px solid var(--rule);
  background:var(--bg); position:sticky; top:0; z-index:20;
}
nav.deptnav a {
  padding:13px 16px; font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; border-right:1px solid var(--rule);
}
nav.deptnav a:last-child{ border-right:none; }
nav.deptnav a:hover, nav.deptnav a:focus-visible { color:var(--ink); }

/* ---------- DEPARTMENT HEADER (shared) ---------- */
.dept-head {
  display:flex; align-items:baseline; gap:12px; padding:44px 20px 40px;
}
.dept-head .num { font-family:'Space Mono',monospace; font-size:11px; color:var(--accent); }
.dept-head h2 { font-family:'Bodoni Moda',serif; font-weight:600; font-size:22px; letter-spacing:.01em; }
.dept-head .rule { flex:1; height:1px; background:var(--rule); }
section + section { border-top:2px solid var(--rule); margin-top:12px; }
.dept-dek { padding:0 20px 26px; font-size:13px; color:var(--muted); max-width:640px; line-height:1.6; }

/* ---------- PHOTOGRAPHY / SHARED STRIPS ---------- */
.subdept { padding-top:28px; }
.subdept .subhead { display:flex; align-items:baseline; gap:8px; padding:0 20px 20px; }
.subdept .subhead .label { font-family:'Bodoni Moda',serif; font-style:italic; font-size:16px; }
.subdept .subhead .rule2 { flex:1; height:1px; background:var(--rule); }
/* Horizontal strip: native scroll, no JS. Tiles never shrink (flex:0 0 auto)
   so the row overflows and becomes swipeable. */
.subgrid {
  display:flex; gap:16px; align-items:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:1px;
  cursor:grab;
}
.subgrid.is-dragging, .shoot-panel-grid.is-dragging { cursor:grabbing; user-select:none; }
.subgrid::-webkit-scrollbar { display:none; }
.subgrid > * { flex:0 0 auto; }
/* 2 or fewer tiles: nothing to scroll to, so shown smaller and centered
   instead of as a strip - wraps to a second line rather than overflowing
   if they don't both fit on narrow screens. */
.subgrid.is-compact, .shoot-panel-grid.is-compact {
  overflow-x:visible; cursor:default; justify-content:center; flex-wrap:wrap;
}
.subgrid.is-compact figure, .subgrid.is-compact .video-tile { height:180px; }
@media (min-width:700px){
  .subgrid.is-compact figure, .subgrid.is-compact .video-tile { height:240px; }
}
/* Height is fixed per row; width comes from aspect-ratio (4/5 unless a
   tile sets its own inline aspect-ratio from the photo's real shape) so
   landscape photos render landscape-shaped instead of being cropped. */
.subgrid figure { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card); min-width:0; height:340px; width:auto; }
.subgrid figcaption {
  position:absolute; bottom:0; left:0; right:0; padding:7px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  font-size:10px; color:#EDEAE3; line-height:1.3;
}
.subgrid figcaption .model { display:block; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.05em; color:#C9BEA6; margin-top:1px; text-transform:uppercase; }
.shoot-cover { flex:0 0 270px; }
@media (min-width:700px){
  .subgrid figure, .video-tile { height:440px; }
  .shoot-cover { flex-basis:350px; }
  .subgrid figcaption, .video-tile figcaption, .shoot-cover figcaption { font-size:12px; }
  .subgrid figcaption .model, .video-tile figcaption .dur, .shoot-cover .model { font-size:9.5px; }
}

.video-tile { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card); min-width:0; height:340px; width:auto; cursor:pointer; }
.video-tile .vplay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); transition:background .2s; }
.video-tile:hover .vplay, .video-tile:focus-visible .vplay { background:rgba(0,0,0,.45); }
.video-tile .vplay svg { width:26px; height:26px; }
.video-tile figcaption {
  position:absolute; bottom:0; left:0; right:0; padding:7px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  font-size:10px; color:#EDEAE3; line-height:1.3;
}
.video-tile figcaption .dur { display:block; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.05em; color:#C9BEA6; margin-top:1px; text-transform:uppercase; }

/* ---------- FEATURED VIDEO (single, centered, not a scroll strip) ---------- */
.doc-feature {
  /* Spans the same width as everything else on the page (a 20px inset,
     no cap) instead of being boxed into a small 640px card - it's the
     main piece for that row, it should read as one. Width is explicit
     because it's a <button>: buttons size width:auto to fit-content,
     not fill-the-parent like a div would, so without this it collapses
     to ~0 and sits stuck to the left margin. */
  width:calc(100% - 40px); margin:0 20px 20px; position:relative; aspect-ratio:16/9;
  overflow:hidden; background:var(--card); cursor:pointer; border:none; display:block; padding:0;
  appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left;
}
.doc-feature img { transition:transform .4s ease, filter .4s ease; }
.doc-feature:hover img, .doc-feature:focus-visible img { transform:scale(1.03); filter:brightness(.75); }
.doc-feature::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
}
.doc-feature .doc-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; z-index:2;
}
.doc-feature .doc-info {
  position:absolute; bottom:0; left:0; right:0; padding:20px 24px; z-index:2;
}
.doc-feature .doc-info .doc-kicker {
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#D9C9A8; margin-bottom:6px; display:block;
}
.doc-feature .doc-info h3 {
  font-family:'Bodoni Moda',serif; font-style:italic; font-weight:400; font-size:24px; color:#F2EEE4;
}
.doc-feature .doc-info .doc-dur {
  font-family:'Space Mono',monospace; font-size:10.5px; color:#C9BEA6; margin-top:4px; display:block;
}

/* ---------- SHOOT COVERS (expandable galleries) ---------- */
.shoot-cover {
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card);
  border:none; margin:0; padding:0; cursor:pointer; display:block; min-width:0;
  appearance:none; -webkit-appearance:none; box-sizing:border-box;
  text-align:left; font:inherit; color:inherit;
}
.shoot-cover img { transition:filter .2s; }
.shoot-cover:hover img, .shoot-cover.open img { filter:brightness(.7); }
.shoot-cover figcaption {
  position:absolute; bottom:0; left:0; right:0; padding:7px 8px; text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  font-size:10px; color:#EDEAE3; line-height:1.3;
}
.shoot-cover .model { display:block; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.05em; color:#C9BEA6; margin-top:1px; text-transform:uppercase; }
.shoot-cover .expand-hint {
  position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.shoot-cover .expand-hint svg { width:9px; height:9px; }
.shoot-cover.open .expand-hint { transform:rotate(180deg); background:rgba(0,0,0,.85); }

.shoot-panel {
  overflow:hidden; max-height:0; transition:max-height .3s ease;
  background:var(--bg);
}
.shoot-panel.open { max-height:2000px; }
.shoot-panel-inner { padding:14px 0 4px; }
.shoot-panel-head {
  display:flex; justify-content:space-between; align-items:baseline; padding:0 20px 10px;
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
}
.shoot-panel-grid {
  display:flex; gap:16px; align-items:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.shoot-panel-grid::-webkit-scrollbar { display:none; }
.shoot-panel-grid > figure { flex:0 0 165px; }
.shoot-panel-grid figure { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card); min-width:0; }
.shoot-panel-grid figure.is-video { cursor:pointer; }
.shoot-panel-grid figure.is-video .vplay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25);
}
.shoot-panel-grid figure.is-video .vplay svg { width:22px; height:22px; }
.shoot-panel-grid figure.is-video figcaption {
  position:absolute; bottom:0; left:0; right:0; padding:6px 7px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
}
@media (min-width:700px){ .shoot-panel-grid > figure{ flex-basis:220px; } }

/* ---------- STRIP NAVIGATION (mouse-only fallback) ---------- */
.strip-wrap { position:relative; }
.strip-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(20,17,15,.55); border:1px solid rgba(242,238,228,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:.45; transition:opacity .2s, background .2s, border-color .2s;
}
.strip-arrow svg { width:15px; height:15px; }
.strip-wrap:hover .strip-arrow, .strip-arrow:focus-visible { opacity:1; }
.strip-arrow:hover, .strip-arrow:focus-visible { background:rgba(20,17,15,.9); border-color:rgba(242,238,228,.7); }
.strip-arrow-prev { left:8px; }
.strip-arrow-next { right:8px; }

/* ---------- STATEMENT ---------- */
#about { padding:40px 20px 44px; border-top:2px solid var(--accent); }
.about-grid { display:flex; flex-direction:column; gap:24px; }
.about-photo { width:160px; max-width:40%; aspect-ratio:2/3; overflow:hidden; background:var(--card); }
#about p { font-size:14.5px; line-height:1.75; color:var(--muted); max-width:44ch; }
#about p + p { margin-top:14px; }
#about p strong { color:var(--ink); font-weight:500; }
.about-contact { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.about-contact .contact-email {
  font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.03em;
  color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.about-contact .contact-instagram {
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--rule); font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.about-contact .contact-instagram svg { width:15px; height:15px; }
.about-contact a:hover, .about-contact a:focus-visible { color:var(--ink); border-color:var(--ink); }

/* ---------- FOOTER ---------- */
footer {
  padding:22px 20px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.05em; color:var(--muted);
}
footer a:hover, footer a:focus-visible { color:var(--ink); }

/* ---------- VIDEO MODAL ---------- */
.video-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.video-modal[hidden] { display:none; }
.video-modal-backdrop { position:absolute; inset:0; background:rgba(10,9,8,.86); }
.video-modal-panel {
  position:relative; width:100%; max-width:900px; background:var(--card);
  border:1px solid var(--rule); box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.video-modal-close {
  position:absolute; top:-38px; right:0; width:30px; height:30px; z-index:2;
  background:transparent; border:1px solid var(--rule); color:#F2EEE4;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-modal-close:hover, .video-modal-close:focus-visible { border-color:#FFFFFF; color:#FFFFFF; }
.video-modal-body { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-modal-body iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* A Short/Reel plays in its real vertical shape - sized by height (capped
   to fit the viewport) instead of by width like the normal 16:9 case, and
   the panel shrinks to hug it (a flex item, so width:auto fits content)
   instead of stretching out to a wide card with a narrow video floating
   in the middle of it. The exact ratio comes from JS (the real per-video
   value), this just switches which dimension drives the sizing. */
.video-modal-panel.is-vertical { width:auto; max-width:90vw; }
.video-modal-panel.is-vertical .video-modal-body { width:auto; height:min(85vh, 800px); }
/* A video edited with letterbox bars baked into the footage itself (see
   the "crop:" field) - the wrapper is cut to the cropped shape (set via JS)
   and the iframe renders oversized at the video's native ratio, centered,
   so the excess (the baked-in bars) gets clipped by overflow:hidden - the
   same trick as object-fit:cover, done by hand since iframes don't support
   object-fit. */
.video-modal-body.is-cropped { overflow:hidden; }
.video-modal-body.is-cropped iframe {
  position:absolute; left:50%; top:50%; width:100%; height:auto;
  transform:translate(-50%, -50%);
}
.video-modal-pending {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--muted); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em;
  text-align:center; padding:20px;
}
.video-modal-pending strong { font-family:'Bodoni Moda',serif; font-style:italic; font-size:17px; color:#F2EEE4; letter-spacing:0; }

@media (min-width:720px){
  .nameplate{ font-size:64px; }
}

/* Every other text element scaled up to match the bigger desktop tiles -
   this has to come after every rule it overrides, since CSS resolves
   equal-specificity conflicts by source order, not by media query
   position. */
@media (min-width:700px){
  .tagline { font-size:14px; }
  nav.deptnav a { font-size:12px; }
  .dept-head .num { font-size:12.5px; }
  .dept-head h2 { font-size:26px; }
  .dept-dek { font-size:15px; }
  .subdept .subhead .label { font-size:19px; }
  .doc-feature .doc-info .doc-kicker { font-size:11.5px; }
  .doc-feature .doc-info h3 { font-size:28px; }
  .doc-feature .doc-info .doc-dur { font-size:12px; }
  .shoot-panel-head { font-size:11px; }
  .shoot-panel-grid figure.is-video figcaption { font-size:9.5px; }
  #about p { font-size:17px; }
  .about-grid { flex-direction:row; align-items:flex-start; gap:40px; }
  .about-photo { width:220px; max-width:none; flex:0 0 auto; }
  footer { font-size:12px; }
  .video-modal-pending { font-size:12.5px; }
  .video-modal-pending strong { font-size:19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}