/* sections.css — v2: hero, about, why-ics, work, resume, ics band, footer */

/* ---------- Hero ----------
   Composition contract (JR direction, Oct 31): the hero is built around the
   Mattan Griffel couch composition — subject seated LEFT on a light sofa
   against pure white, arm along the backrest, generous white above and to
   the right. The finished JR portrait (pure-white version, same composition)
   swaps into .hero-media img — one file, no layout change. Text therefore
   lives in the RIGHT-hand white; the left ~50% is the subject zone and no
   text may enter it at desktop widths. */
.hero{position:relative;overflow:hidden;background:var(--paper);padding-top:var(--nav-h)}
.hero-media{position:absolute;top:0;left:0;right:0;height:calc(var(--nav-h) + min(74svh,680px));z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-inner{position:relative;z-index:1;max-width:var(--wrap-wide);margin:0 auto;padding:var(--space-12) var(--page-gutter) var(--space-16);height:min(74svh,680px);display:flex;flex-direction:column;justify-content:flex-start}
.hero-text{max-width:min(470px,40vw);margin-left:auto}
@media (min-width:901px) and (max-width:1180px){
  .hero-text{max-width:min(400px,38vw)}
}
.hero-eyebrow{font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--blue-600-link);margin-bottom:var(--space-6)}
.hero h1{font-size:clamp(2.3rem,3.8vw,3.15rem);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:500}
.hero h1 em{font-style:italic;color:var(--blue-500-ramp)}
.hero-sub{font-size:var(--text-md);font-weight:400;line-height:var(--leading-snug);color:var(--ink-600);max-width:var(--prose-max);margin-top:var(--space-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin-top:0;align-items:center;font-weight:600;font-size:var(--text-base)}
.hero-actions a{display:inline-flex;align-items:center;min-height:44px}
.hero-actions .arr{color:var(--blue-500-ramp)}
.hero-actions a.secondary{color:var(--ink-700)}
.hero-meta{background:var(--grey-100);border-top:var(--border-hairline);position:relative;z-index:1}
.hero-meta-inner{max-width:var(--wrap-wide);margin:0 auto;padding:var(--space-8) var(--page-gutter);display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-4) var(--space-10)}
.hero-meta-main{flex:1 1 480px}
.scroll-hint{margin-left:auto;font-size:var(--text-sm);font-weight:600;color:var(--link);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.scroll-hint:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .hero-inner{min-height:0;height:auto;padding-top:0;display:block}
  .hero-media{position:relative;inset:auto;height:64vw;max-height:460px}
  .hero-media img{object-position:28% 30%}
  .hero-text{max-width:none;margin-left:0;padding-top:var(--space-8)}
  .scroll-hint{margin-left:0}
}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-12);margin-top:var(--space-10);align-items:start}
.about-copy p{font-size:var(--text-md);color:var(--ink-600);line-height:var(--leading-body)}
.about-copy p + p{margin-top:var(--space-5)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ---------- Why ICS ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-12);margin-top:var(--space-6);align-items:start}
.why-sticky{position:sticky;top:120px}
.why-copy p{font-size:var(--text-md);color:var(--ink-600);line-height:var(--leading-body)}
.why-copy p + p{margin-top:var(--space-5)}
.ics-links{margin-top:var(--space-10);border-top:var(--border-hairline)}
.ics-link-card{display:block;padding:var(--space-6) var(--space-2);border-bottom:var(--border-hairline);text-decoration:none}
.ics-link-card:hover{background:var(--grey-50);box-shadow:inset 2px 0 0 var(--blue-500-ramp)}
.ics-link-card .ics-card-title{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--link);line-height:var(--leading-display)}
.ics-link-card .ics-card-title .arr{color:var(--blue-500-ramp)}
.ics-link-card .ics-card-desc{display:block;font-size:var(--text-sm);color:var(--ink-500);margin-top:var(--space-1)}
.ics-doorways{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);padding:var(--space-5) var(--space-2) 0}
.ics-doorways button,.ics-doorways a{font-weight:600;font-size:var(--text-base);color:var(--link);text-decoration:none;min-height:var(--tap-min);display:inline-flex;align-items:center}
.ics-doorways button:hover,.ics-doorways a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
.ics-doorways .arr{color:var(--blue-500-ramp)}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}.why-sticky{position:static}}

/* ---------- Work ---------- */
.work-head .lede{max-width:var(--prose-max)}
.path-block{margin-top:var(--space-8)}
.path-label{font-size:var(--text-2xs);font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-400)}
.path-label .path-title{color:var(--ink-900)}
.work-noscript{margin-top:var(--space-6);padding:var(--space-4);border:var(--border-strong);font-size:var(--text-sm);color:var(--ink-600)}

/* ---------- Resume ---------- */
.resume-wrap{max-width:var(--wrap-wide)}

/* ---------- ICS band ---------- */
.ics-band{background:var(--grey-150);border-top:var(--border-hairline);border-bottom:var(--border-hairline);padding:var(--section-pad-y) 0}
.ics-band-grid{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--page-gutter);display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-12);align-items:center}
.ics-band .kicker{color:var(--ink-500)}
.ics-band a,.footer a{color:var(--blue-700)}
.ics-band a:hover,.footer a:hover{color:var(--ink-900)}
.ics-band h2{font-size:var(--display-2);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.ics-band-desc{font-size:var(--text-md);color:var(--ink-600);line-height:var(--leading-snug);margin-top:var(--space-4);max-width:var(--prose-max)}
.ics-band-role{font-weight:700;color:var(--ink-900)}
.ics-visit-label{font-size:var(--text-2xs);font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-500);margin-bottom:var(--space-3)}
.ics-visit{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:28px;color:var(--link);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(0,121,158,.4)}
.ics-visit .arr{color:var(--blue-500-ramp);font-size:32px;display:inline-block;transition:transform var(--duration-fast) var(--ease-out)}
.ics-visit:hover{color:var(--link-hover)}
.ics-visit:hover .arr{transform:translate(3px,-3px)}
.ics-band-links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-6);font-weight:600;font-size:var(--text-sm)}
.ics-band-links button{font-weight:600;font-size:var(--text-sm);color:var(--blue-700);min-height:var(--tap-min)}
.ics-band-links button:hover,.ics-band-links a:hover{color:var(--link-hover)}
.ics-band-links .arr{color:var(--blue-500-ramp)}
@media (max-width:900px){.ics-band-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--grey-150);border-top:var(--border-hairline);padding:var(--space-20) 0 var(--space-12)}
.footer-inner{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--page-gutter)}
.footer h2{font-size:clamp(34px,5vw,52px);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.footer-lede{font-size:var(--text-base);color:var(--ink-500);max-width:40em;margin-top:var(--space-4);line-height:var(--leading-body)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin-top:var(--space-10)}
.footer-links a,.footer-links .flink{font-size:var(--text-base);font-weight:600;color:var(--blue-700);text-decoration:none}
.footer-links a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
.footer-links .arr{color:var(--blue-500-ramp)}
.footer-fine{margin-top:var(--space-12);border-top:var(--border-hairline);padding-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);font-size:var(--text-xs);color:var(--ink-500);line-height:1.7}
.footer-fine .to-top{margin-left:auto;font-weight:600}