/* Gabriella Lombardo — portfolio V9; hand-editable and Netlify-ready */
:root {
  --paper: #f8f8f6;
  --panel: #eeefec;
  --wash: #e9ebe8;
  --rule: #d9dbd7;
  --ink: #171918;
  --ink-muted: #616865;
  --ink-light: #909791;
  --arrow: #929a95;
  --display: 'Sofia Sans Condensed', 'Liberation Sans Narrow', 'Arial Narrow', sans-serif;
  --nav-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --arrow-duration: .34s;
  --body: 'Epilogue', Arial, sans-serif;
  --mono: 'Space Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 14px/1.7 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
button { font:inherit; }
.wrap { max-width:1440px; margin:0 auto; padding-left:clamp(26px,5.8vw,90px); padding-right:clamp(26px,5.8vw,90px); }
.skip-link { position:fixed; left:12px; top:-100px; z-index:999; padding:8px 12px; color:white; background:var(--ink); }
.skip-link:focus { top:12px; }

/* Navigation */
#nav { position:fixed; z-index:100; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:67px; padding:11px clamp(26px,5.8vw,90px); background:rgba(248,248,246,.94); border-bottom:1px solid transparent; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color .2s; }
#nav.scrolled { border-bottom-color:var(--rule); }
/* Compact bold masthead, as in the Stephen Jackson reference. */
.nav-mark { display:inline-block; font:700 23px/1 var(--nav-display); letter-spacing:.01em; text-decoration:none; white-space:nowrap; }

.nav-links { display:flex; align-items:center; gap:clamp(14px,2.6vw,36px); }
.nav-links a, .nav-direct a { text-decoration:none; font:400 11px/1.2 var(--body); }
.nav-links a:hover, .nav-direct a:hover { opacity:.6; }
/* Mail and LinkedIn icons are keyboard-accessible links, not a Contact button. */
.nav-icons { display:flex; align-items:center; gap:15px; }
.nav-separator { display:block; width:1px; height:18px; margin:0 4px 0 -5px; background:var(--rule); }
.nav-links a.nav-icon, .nav-direct a.nav-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:24px; padding:0; color:var(--ink); }
.nav-icon svg { display:block; width:17px; height:17px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nav-icon:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }

.nav-toggle { display:none; }
.nav-direct { display:flex; align-items:center; gap:26px; margin-left:auto; }

/* Tall, two-column editorial introduction */
.hero { position:relative; isolation:isolate; padding-top:138px; padding-bottom:38px; min-height:1180px; }
.hero-right-wash { position:absolute; z-index:-1; top:86px; bottom:0; right:0; width:51.5%; background:var(--panel); }
.hero-inner { position:relative; min-height:1030px; }
.hero-main { display:grid; grid-template-columns:minmax(0,470px) minmax(0,560px); justify-content:space-between; column-gap:clamp(70px,9vw,140px); align-items:start; }
.hero-copy { padding-top:115px; min-width:0; }
.eyebrow, .mono { font:400 10px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.075em; }
/* The horizontal rule begins at precisely the same content edge as the name. */
.hero-label { display:flex; align-items:center; gap:9px; margin:0 0 34px; color:var(--ink-light); white-space:nowrap; }
.label-ruled { display:block; flex:0 0 25px; height:1px; background:var(--rule); }
.hero h1 { display:flex; flex-direction:column; align-items:flex-start; margin:0 0 28px; font-family:var(--display); letter-spacing:-.026em; line-height:.83; }
.hero h1 > span:first-child { font-size:clamp(69px,7.25vw,98px); font-weight:500; letter-spacing:-.017em; }
.hero h1 > span:last-child { margin-top:10px; font-size:clamp(77px,7.7vw,105px); font-weight:300; letter-spacing:-.02em; }
.hero-role { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .5em; margin:0 0 7px; font:600 clamp(14px,1.15vw,16px)/1.4 var(--body); letter-spacing:-.025em; }
.role-separator { color:var(--ink-light); font-size:.8em; }
.hero-location { display:flex; align-items:center; gap:8px; margin:0 0 24px; color:var(--ink-muted); font:400 11px/1.5 var(--body); letter-spacing:0; }
.location-pin { display:block; flex:0 0 13px; width:13px; height:13px; stroke:var(--ink-light); stroke-width:1.7; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.hero-copy-body { border-top:1px solid var(--rule); padding-top:26px; }
.hero-desc { max-width:400px; margin:0; font:400 clamp(14px,1.12vw,16px)/1.93 var(--body); letter-spacing:-.027em; color:#535a56; }
.hero-portrait { justify-self:center; align-self:start; margin:0; width:min(100%,530px); background:#100e0e; overflow:visible; transform:translateX(-84px); }
.hero-portrait img { display:block; width:100%; height:auto; object-fit:contain; }
.hero-scroll { position:absolute; bottom:20px; left:clamp(26px,5.8vw,90px); display:inline-flex; align-items:center; gap:15px; text-decoration:none; font:400 10px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-light); }
.scroll-down-arrow { display:inline-block; width:17px; height:23px; fill:none; stroke:var(--arrow); stroke-width:1.05; stroke-linecap:round; stroke-linejoin:round; overflow:visible; transition:transform var(--arrow-duration) ease; }
.hero-scroll:hover .scroll-down-arrow { transform:translateY(5px); }

/* Portfolio — no duplicate Selected Work heading */
.portfolio { padding-top:130px; padding-bottom:65px; }
.category { scroll-margin-top:92px; margin-bottom:96px; }
.category-heading { margin-bottom:18px; }
/* Inset the eyebrow by each heading glyph's optical sidebearing, not the text box edge. */
.category-index { margin:0 0 12px; color:var(--ink-muted); font-size:10px; font-weight:400; padding-left:var(--optical-inset,9px); }
#b2b { --optical-inset:10px; }
#journalism { --optical-inset:7px; }
#audio { --optical-inset:10px; }
.category-headline { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 28px; }
.category-heading h3 { margin:0; font:400 clamp(43px,4.1vw,58px)/1 var(--display); letter-spacing:-.006em; }
.category-tags { text-align:left; max-width:610px; margin:0; color:var(--ink-muted); font:10px/1.6 var(--mono); }
.items { border-top:1px solid var(--ink); }
.item-row { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(170px,22%) minmax(0,1fr); gap:24px; margin-inline:0; border-bottom:1px solid var(--rule); padding:22px 16px 24px 0; text-decoration:none; background:transparent; }
.item-row::before { content:""; position:absolute; z-index:-1; inset-block:0; left:calc(50% - 50vw); width:100vw; background:var(--wash); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.item-row:hover::before, .item-row:focus-visible::before { opacity:1; }
.item-row:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.item-meta { display:flex; align-items:flex-start; flex-direction:column; gap:4px; }
.item-org { font:600 14px/1.5 var(--body); }
.item-year, .item-kind { color:var(--ink-muted); font:12px/1.55 var(--mono); }
.item-title { margin:0 0 9px; max-width:880px; font:500 clamp(21px,1.97vw,27px)/1.16 var(--display); letter-spacing:-.009em; }
/* Unified, V1-speed arrow animation: slender shaft and compact head. */
/* One CSS cap unit from baseline to top: arrow tracks the actual capital-letter height, not line-height. */
.item-title-arrow { display:inline-block; width:.72em; height:.72em; width:1cap; height:1cap; margin-left:.32em; vertical-align:baseline; fill:none; stroke:var(--arrow); stroke-width:1.05; stroke-linecap:round; stroke-linejoin:round; opacity:0; visibility:hidden; overflow:visible; transition:opacity var(--arrow-duration) ease, visibility var(--arrow-duration); }
.item-title-arrow .arrow-shaft { stroke-dasharray:34; stroke-dashoffset:34; transition:stroke-dashoffset var(--arrow-duration) ease-out; }
.item-title-arrow .arrow-tip { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset var(--arrow-duration) ease-out .10s; }
.item-row:hover .item-title-arrow, .item-row:focus-visible .item-title-arrow { opacity:1; visibility:visible; }
.item-row:hover .arrow-shaft, .item-row:focus-visible .arrow-shaft { stroke-dashoffset:0; }
.item-row:hover .arrow-tip, .item-row:focus-visible .arrow-tip { stroke-dashoffset:0; }
.item-desc { max-width:720px; margin:0 0 10px; font:400 14px/1.8 var(--body); color:#515752; }
.item-role { color:var(--ink-muted); font:12px/1.6 var(--mono); }

/* About and footer */
.about { border-top:1px solid var(--ink); padding-top:70px; padding-bottom:110px; }
.about-heading { margin-bottom:45px; }
.about-heading .mono { color:var(--ink-muted); margin:0 0 12px; }
.about-heading h2 { margin:0; font:400 clamp(63px,6.7vw,99px)/.94 var(--display); letter-spacing:-.018em; }
.about-body { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,95px); }
.about-intro { font:500 clamp(23px,2.6vw,34px)/1.33 var(--body); letter-spacing:-.045em; }
.about-prose p { color:#454b47; font:400 13px/1.92 var(--body); margin:0 0 18px; }

/* Individual PDF/audio work-sample pages remain fully functional. */
.sample-main { padding-top:145px; padding-bottom:110px; min-height:80vh; }
.sample-back { color:var(--ink-muted); font:11px var(--mono); text-decoration:none; }
.sample-header { margin:55px 0 35px; padding-bottom:35px; border-bottom:1px solid var(--rule); }
.sample-header .mono { color:var(--ink-muted); }
.sample-header h1 { font:400 clamp(61px,7vw,100px)/.95 var(--display); letter-spacing:-.02em; max-width:1000px; margin:9px 0 22px; }
.sample-subline { display:flex; flex-wrap:wrap; gap:18px; font:11px var(--mono); color:var(--ink-muted); }
.sample-layout { display:grid; grid-template-columns:220px 1fr; gap:62px; }
.sample-label { color:var(--ink-muted); font:10px var(--mono); text-transform:uppercase; }
.sample-main-content p { max-width:720px; line-height:1.85; }
.sample-main-content h2 { font:400 42px var(--display); margin:25px 0 9px; }
.sample-notice { max-width:730px; margin:25px 0 32px; padding:20px 24px; background:var(--wash); border:1px solid var(--rule); }
.sample-notice p { font-size:13px; margin:5px 0 0; }
.sample-file { width:100%; margin:15px 0 30px; }
.sample-pdf { display:block; width:100%; height:650px; border:1px solid var(--rule); }
.sample-cta { display:inline-block; padding:12px 16px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:12px; font-weight:600; }
.sample-cta:hover { background:#4d534f; }

/* Subtle scroll reveals only after the JS observer is in place. */
.motion-enabled .reveal { opacity:0; transform:translateY(17px); transition:opacity 1.15s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1); transition-delay:var(--reveal-delay,0ms); }
.motion-enabled .reveal.is-visible { opacity:1; transform:translateY(0); }
@media (hover:none) {
  .item-title-arrow { opacity:1; visibility:visible; }
  .item-title-arrow .arrow-shaft, .item-title-arrow .arrow-tip { stroke-dashoffset:0; }
}
@media (max-width:1120px) {
  .hero-main { grid-template-columns:minmax(0,455px) minmax(0,440px); column-gap:40px; }
  .hero h1>span:first-child { font-size:clamp(66px,7.5vw,91px); }
  .hero h1>span:last-child { font-size:clamp(68px,8vw,95px); }
  .hero-desc { font-size:14px; }
  .hero-portrait { width:min(100%,480px); transform:translateX(-55px); }
  .category-headline { gap:9px 25px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:76px; }
  .wrap { padding-left:24px; padding-right:24px; }
  #nav { padding:15px 24px; min-height:66px; }
  .nav-mark { font-size:21px; }
  .nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:36px; padding:0; border:0; background:none; cursor:pointer; }
  .nav-toggle span { display:block; margin-left:auto; width:22px; height:1px; background:var(--ink); }
  .nav-links { display:none; position:absolute; left:0; right:0; top:66px; padding:12px 24px 22px; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 8px 14px rgba(0,0,0,.05); }
  .nav-links.open { display:flex; } .nav-links a { padding:13px 0; font-size:13px; }
  .nav-links .nav-icons { justify-content:flex-start; gap:23px; margin-top:8px; padding:10px 0 3px; }
  .nav-direct { gap:10px; }
  .nav-direct > a:first-child { display:none; } /* sample pages have a dedicated back link */
  .nav-direct .nav-separator { display:none; }
  .nav-direct .nav-icons { gap:14px; }
  .nav-links .nav-separator { display:none; }
  .nav-links a.nav-icon { padding:0; width:24px; height:26px; }
  .hero { min-height:0; padding-top:110px; padding-bottom:0; }
  .hero-right-wash { top:410px; bottom:0; width:63%; }
  .hero-inner { min-height:0; }
  .hero-main { display:flex; flex-direction:column; gap:38px; }
  .hero-copy { padding-top:35px; }
  .hero-label { margin:0 0 27px; font-size:9px; gap:7px; }
  .label-ruled { flex-basis:16px; }
  .hero h1 { margin-bottom:24px; }
  .hero h1>span:first-child { font-size:clamp(48px,10.5vw,75px); }
  .hero h1>span:last-child { font-size:clamp(69px,13vw,99px); }
  .hero-role { font-size:14px; margin-bottom:6px; }
  .hero-location { font-size:11px; margin-bottom:20px; }
  .hero-copy-body { padding-top:20px; }
  .hero-desc { max-width:445px; font-size:14px; line-height:1.78; }
  .hero-portrait { align-self:center; width:min(90%,470px); transform:none; }
  .hero-scroll { position:relative; bottom:auto; left:auto; margin:45px 0 25px; }
  .portfolio { padding-top:88px; padding-bottom:20px; }
  .category { margin-bottom:74px; }
  .category-headline { display:block; } .category-heading { margin-bottom:18px; } .category-heading h3 { font-size:clamp(42px,8.5vw,58px); }
  .category-tags { margin:11px 0 2px; font-size:9px; }
  #b2b, #journalism, #audio { --optical-inset:7px; }
  .item-row { display:block; margin-inline:0; padding:18px 0 21px; }
  .item-meta { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:7px 10px; margin-bottom:9px; }
  .item-title { font-size:23px; } .item-desc { font-size:14px; }
  .about { padding-top:52px; padding-bottom:78px; } .about-body { display:block; }
  .about-intro { margin-bottom:26px; }
  .sample-main { padding-top:110px; } .sample-header { margin-top:42px; } .sample-layout { display:block; } .sample-side { margin-bottom:31px; } .sample-pdf { height:440px; }
}
@media (max-width:400px) {
  #nav { gap:8px; }
  .nav-mark { font-size:17px; }
  .hero h1>span:first-child { font-size:clamp(44px,11vw,52px); } .hero h1>span:last-child { font-size:15vw; }
  .hero-label { letter-spacing:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .motion-enabled .reveal { opacity:1; transform:none; }
  .item-title-arrow .arrow-shaft, .item-title-arrow .arrow-tip { stroke-dashoffset:0; }
}


/* V10: outlined editorial credentials, drawn from the user's reference. */
.item-role { margin-top: 3px; line-height:1; }
.item-credential { display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px; border:1px solid var(--rule); padding:9px 13px; color:#858b85; font:400 10.5px/1.55 var(--mono); letter-spacing:.055em; text-transform:uppercase; max-width:100%; }
.credential-dot { font-size:9px; color:#9ca19a; margin:0 2px; }
.nav-icon svg.linkedin-mark { width:17px; height:17px; fill:currentColor; stroke:none; }
.about-contact { display:inline-flex; align-items:center; gap:15px; margin-top:18px; padding:12px 16px; border:1px solid var(--ink); text-decoration:none; font:500 12px/1.4 var(--body); transition:background .25s,color .25s; }
.about-contact:hover,.about-contact:focus-visible { background:var(--ink); color:var(--paper); }
.about-contact-arrow { width:14px;height:14px; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.about-contact-arrow .arrow-shaft { stroke-dasharray:34; stroke-dashoffset:34; transition:stroke-dashoffset var(--arrow-duration) ease-out; }
.about-contact-arrow .arrow-tip { stroke-dasharray:18; stroke-dashoffset:18; transition:stroke-dashoffset var(--arrow-duration) ease-out .08s; }
.about-contact:hover .arrow-shaft,.about-contact:hover .arrow-tip,.about-contact:focus-visible .arrow-shaft,.about-contact:focus-visible .arrow-tip { stroke-dashoffset:0; }
@media (hover:none){.about-contact-arrow .arrow-shaft,.about-contact-arrow .arrow-tip {stroke-dashoffset:0}}
@media (max-width:760px){.item-credential { gap:7px; padding:7px 10px; font-size:9.5px; }.about-contact { margin-top:14px; }}
@media (prefers-reduced-motion: reduce){.about-contact-arrow .arrow-shaft,.about-contact-arrow .arrow-tip{stroke-dashoffset:0;}}


/* V11 · clean embedded PDF reader, matching the editorial site aesthetic. */
.sample-main { max-width:1220px; padding-top:128px; padding-bottom:100px; min-height:100vh; }
.sample-back { display:inline-flex; align-items:center; font-size:11px; line-height:1.5; text-decoration:none; }
.sample-back:hover { color:var(--ink); }
.reader-heading { margin:50px 0 35px; }
.reader-eyebrow { color:var(--ink-muted); margin:0 0 20px; font:400 10px/1.8 var(--mono); text-transform:uppercase; letter-spacing:.07em; }
.reader-eyebrow span { padding:0 8px; color:var(--ink-light); }
.reader-heading h1 { max-width:880px; margin:0 0 22px; font:400 clamp(43px,5.4vw,72px)/1.03 var(--display); letter-spacing:-.01em; text-wrap:balance; }
.reader-summary { max-width:790px; margin:0; color:#515752; font:400 13px/1.85 var(--body); }
.reader-document { border-top:1px solid var(--rule); margin-top:37px; padding-top:18px; }
.reader-actions { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px; }
.reader-count { color:var(--ink-muted); font:400 10px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.reader-action-links { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(15px,2.4vw,33px); }
.reader-open { text-decoration:none; color:var(--ink-muted); font:400 11px/1.5 var(--body); }
.reader-open:hover { color:var(--ink); }
.reader-download { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font:500 11px/1.4 var(--body); padding:10px 13px; min-height:40px; transition:color .2s,background .2s; }
.reader-download svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.25; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.reader-download:hover,.reader-download:focus-visible { background:var(--ink); color:var(--paper); }
.reader-frame { background:#e7e7e4; border:1px solid var(--rule); width:100%; }
.reader-frame iframe { display:block; border:0; width:100%; height:min(84vh,1000px); min-height:570px; background:#e7e7e4; }
.reader-fallback { margin:15px 0 0; font:400 11px/1.6 var(--body); color:var(--ink-muted); }
.reader-fallback a { text-underline-offset:3px; }
.reader-unavailable { padding:35px 0; }
@media (max-width:760px) {
  .sample-main { padding-top:106px; padding-bottom:65px; }
  .reader-heading { margin:33px 0 28px; }
  .reader-eyebrow { font-size:9px; margin-bottom:16px; }
  .reader-heading h1 { font-size:clamp(39px,9vw,61px); margin-bottom:17px; }
  .reader-summary { font-size:12px; line-height:1.8; }
  .reader-document { margin-top:29px; }
  .reader-actions { gap:12px; align-items:flex-start; }
  .reader-action-links { gap:12px; }
  .reader-open { font-size:10px; }
  .reader-download { font-size:10px; padding:8px 10px; }
  .reader-frame iframe { height:73vh; min-height:450px; }
}
@media (max-width:400px) {
  .reader-count { width:100%; }
}