/* An editorial extension of the existing, monochrome portfolio. */
.editorial { --muted:#737373; --line:#737373; background:#ffffff; }
.editorial .portfolio-nav { max-width:1120px; height:88px; padding:0; gap:32px; }
.editorial .portfolio-nav .brand { margin-right:auto; color:#262626; }
.editorial main,.editorial .site-footer { max-width:1120px; margin-inline:auto; }
.eyebrow { text-transform:uppercase; color:var(--muted); }
.editorial h1 { margin:24px 0 32px; }
.editorial p { color:#737373; }
.editorial .text-link { text-decoration:underline; text-decoration-color:#737373; text-underline-offset:4px; }
.home-intro { padding:64px 0 72px; display:block; }
.home-intro h1 { max-width:840px; margin:0 0 24px; }
.home-intro > p { max-width:760px; margin:0; }
.collection-heading { border-top:0; padding-top:24px; margin-bottom:28px; display:flex; justify-content:space-between; align-items:center; }
.collection-heading h2 { margin:0; }
.collection-heading span { color:var(--muted); }
.editorial .work-feed { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 12px; padding-bottom:80px; }
.about-intro { padding:64px 0 76px; }
.about-intro h1 { max-width:800px; }
.intro-layout { display:grid; grid-template-columns:1fr .8fr; gap:110px; align-items:center; }
.intro-copy p { margin:0 0 20px; }
.portrait { margin:0; transform:rotate(3deg); max-width:330px; justify-self:center; }
.portrait img { display:block; width:100%; height:auto; aspect-ratio:3/3.7; object-fit:cover; border-radius:5px; }
.portrait figcaption { color:var(--muted); margin-top:13px; }
.photo-playground { border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; margin-bottom:100px; padding:28px 0 24px; }
.photo-playground header { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.photo-playground h2 { margin:0; }
.photo-controls { display:flex; gap:16px; align-items:center; }
.photo-controls button { background:none; border:0; padding:9px 0; color:#737373; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.photo-controls[hidden] { display:none; }
.photo-controls button:disabled { cursor:default; color:#737373; text-decoration:none; }
.photo-stage { height:390px; position:relative; overflow:hidden; margin-top:20px; border-radius:6px; background:#ffffff; isolation:isolate; }
.stage-copy { position:absolute; inset:0; padding-bottom:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
.stage-copy span { color:#737373; margin-top:12px; }
.falling-photo { position:absolute; left:0; top:0; width:130px; height:165px; background-size:cover; background-position:center; background-color:#ffffff; background-clip:padding-box; border:5px solid #ffffff; border-bottom-width:17px; border-radius:3px; box-shadow:none; pointer-events:none; z-index:1; }
.photo-note { margin:12px 0 0; }
.editorial-section { display:grid; grid-template-columns:1fr 1.55fr; gap:100px; margin-bottom:110px; border-top:1px solid var(--line); padding-top:36px; }
.editorial-section > header h2 { margin:12px 0 18px; }
.editorial-section > header p { max-width:260px; }
.experience-entry { border-bottom:1px solid var(--line); padding:0 0 28px; margin:0 0 28px; }
.experience-entry h3 { margin:0; }
.experience-entry .entry-top { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.experience-entry time,.experience-entry .role { color:var(--muted); }
.experience-entry .role { margin:8px 0 12px; }
.experience-entry p { margin:12px 0 0; }
.tools { margin-top:30px; }
.tool { display:grid; grid-template-columns:110px 1fr; border-top:1px solid var(--line); padding:14px 0; gap:20px; }
.tool span { color:var(--muted); }
.beyond-intro { max-width:650px; margin-bottom:35px; }
.beyond h2 { margin:18px 0; }
.life-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:40px 0 70px; align-items:start; }
.life-gallery figure { margin:0; }
.life-gallery figure:nth-child(3n+2) { padding-top:45px; }
.life-gallery img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:4px; display:block; }
.life-gallery figcaption { color:var(--muted); margin-top:10px; }
.knot-note { color:#262626!important; margin-bottom:90px; }
.site-footer { border-top:0; padding:32px 0 40px; display:flex; justify-content:space-between; gap:30px; }
.site-footer .footer-personal { max-width:540px; min-width:0; }
.site-footer p { margin:0; }
.site-footer .footer-credit { margin-top:12px; }
.site-footer a:focus-visible { outline:2px solid #262626; outline-offset:5px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:20px; align-items:start; }
.draft-note { border-left:2px solid #737373; padding:12px 20px; background:#ffffff; }
@media(min-width:900px) { .editorial-section > header { position:sticky; top:32px; align-self:start; } }
@media(max-width:1200px) { .editorial main,.editorial .site-footer,.editorial .portfolio-nav { margin-inline:40px; } }
@media(max-width:800px) { .intro-layout { gap:45px; } .editorial-section { gap:40px; grid-template-columns:1fr 1.7fr; } .life-gallery { grid-template-columns:repeat(3,1fr); gap:18px; } }
@media(max-width:600px) {
 .editorial main,.editorial .site-footer,.editorial .portfolio-nav { margin-inline:22px; }
 .editorial .portfolio-nav { height:75px; gap:18px; }
 .home-intro,.intro-layout,.editorial-section { display:block; }
 .home-intro { padding:36px 0; } .home-intro h1 { margin:0 0 24px; }
 .editorial .work-feed { grid-template-columns:1fr; gap:36px; }
 .about-intro { padding:36px 0 45px; }
 .portrait { max-width:250px; margin:36px auto 12px; }
 .editorial-section { padding-top:24px; margin-bottom:64px; }
 .editorial-section > header { margin-bottom:30px; }
 .editorial-section > header p { max-width:100%; }
 .photo-playground { margin-bottom:64px; }
 .photo-playground header { align-items:flex-start; gap:12px; flex-wrap:wrap; }
 .photo-controls { gap:12px; }
 .photo-stage { height:320px; } .falling-photo { width:95px; height:125px; }
 .life-gallery { grid-template-columns:1fr 1fr; gap:24px 16px; margin-bottom:40px; }
 .life-gallery figure:nth-child(3n+2) { padding-top:0; }
 .life-gallery figure:nth-child(even) { padding-top:28px; }
 .site-footer { flex-direction:column; gap:20px; }
 .site-footer nav { gap:16px; }
 .experience-entry .entry-top { flex-wrap:wrap; gap:8px; }
}

/* One consistent card format, from the first project to the last. */
.editorial.home-page main,.editorial.home-page .portfolio-nav,.editorial.home-page .site-footer { max-width:1600px; }
.editorial.home-page main,.editorial.home-page .portfolio-nav,.editorial.home-page .site-footer { margin-inline:max(28px,calc((100vw - 1600px)/2)); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(min-width:801px) and (max-width:1100px) { .editorial .work-feed { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:541px) and (max-width:800px) { .editorial .work-feed { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .editorial .work-feed { grid-template-columns:minmax(0,1fr); } .editorial.home-page main,.editorial.home-page .portfolio-nav,.editorial.home-page .site-footer { margin-inline:22px; } }