/* Mobile rearranges the portrait while retaining the desktop portfolio’s type and neutral themes. */
@media (max-width: 900px) {
  body.pf .pc-hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; min-height:0; padding:0; overflow:hidden; color:var(--ink); background:var(--bg); }
  body.pf .pc-hero::after,body.pf .pc-hero .pc-shade { display:none; }
  body.pf .pc-hero .pc-bar { position:relative; inset:auto; grid-column:1; grid-row:1; display:grid; gap:18px; padding:20px var(--pf-gutter); background:none; border-bottom:1px solid var(--line); animation:none; }
  body.pf .pc-hero .pc-brand { color:var(--ink); gap:10px; }
  body.pf .pc-hero .pc-brand>span { display:block; font-size:13px; }
  body.pf .pc-hero .pc-brand img { filter:brightness(0) invert(1); }
  body.pf .pc-hero .pc-bar .pf-nav { display:flex; flex-wrap:nowrap; justify-content:space-between; width:100%; gap:12px; min-width:0; }
  body.pf .pc-hero .pc-bar .pf-nav a { color:var(--ink); font-size:13px; min-height:44px; display:inline-flex; align-items:center; text-shadow:none; }
  body.pf .pc-hero .pc-bar .pf-theme { flex:none; padding:3px; border-color:var(--ink); }
  body.pf .pc-hero .pc-bar .pf-theme span { padding:8px; font-size:10px; }
  body.pf .pc-hero .pc-bar .pf-theme i { top:3px; bottom:3px; left:3px; width:calc(50% - 3px); }
  body.pf .pc-hero .pc-body { position:relative; grid-column:1; grid-row:2; align-self:stretch; margin:0; padding:28px var(--pf-gutter); transform:none!important; opacity:1!important; }
  body.pf .pc-hero .pc-name { margin:0 0 22px!important; font:400 min(calc(var(--pc-vw) * 1.6vw),12.5svh)/.92 var(--k-font-logo)!important; text-transform:none; letter-spacing:-.025em; }
  body.pf .pc-hero .pc-w { padding:.02em 0 .08em; margin:0; overflow:visible; }
  body.pf .pc-hero .pc-l { transform:none; animation:none; }
  body.pf .pc-hero .pc-role { color:var(--ink2); font:400 clamp(19px,5vw,26px)/1.3 var(--k-font-logo); text-transform:none; letter-spacing:0; animation:none; }
  body.pf .pc-hero .pc-role em { color:var(--ink); font:italic 400 1em var(--k-font-logo); }
  body.pf .pc-hero .pc-media { position:relative; inset:auto; grid-column:1; grid-row:3; width:calc(100% - 2 * var(--pf-gutter)); height:44svh; min-height:280px; max-height:520px; margin:0 var(--pf-gutter) 42px; border:0; box-shadow:none; z-index:0; transform:none!important; -webkit-mask-image:none; mask-image:none; }
  body.pf .pc-hero .pc-img { top:0; height:100%; object-fit:cover; object-position:var(--pc-focus-m,var(--pc-focus,50% 25%)); filter:none; animation:none; }
  body.pf .pc-hero .pc-lit { display:none; }
  body.pf .pc-hero .pc-stats { grid-column:1; grid-row:4; display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:0; padding:0 var(--pf-gutter) 30px; animation:none; }
  body.pf .pc-hero .pc-stats li { min-width:0; padding-top:14px; }
  body.pf .pc-hero .pc-stats b { color:var(--ink); font-size:clamp(26px,7vw,38px); overflow-wrap:anywhere; }
  body.pf .pc-hero .pc-stats span { color:var(--ink2); max-width:none; overflow-wrap:anywhere; font-size:10px; line-height:1.5; }
  body.pf .pc-hero .pc-stats li:nth-child(3):last-child { grid-column:1/-1; }
  body.pf .pc-hero .pc-cue { display:none; }
  html[data-theme="light"] body.pf .pc-hero .pc-brand img { filter:brightness(0); }
}

html { overflow-x:clip; max-width:100%; }
body.pf { overflow-x:clip; max-width:100%; touch-action:pan-y pinch-zoom; }
body.pf .pc-hero,body.pf .pc-marquee { overflow:clip; max-width:100vw; }
.pc-track { overflow-y:hidden!important; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }

/* desktop hero: the photograph fades into the page far less (about a quarter of the earlier fade) */
@media (min-width: 901px) {
  body.pf .pc-hero .pc-media { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
  html[data-theme="dark"] body.pf .pc-hero .pc-shade, body.pf .pc-hero .pc-shade {
    background: linear-gradient(90deg, #0a0a0a 0, #0a0a0a 12%, rgba(10, 10, 10, .5) 24%, rgba(10, 10, 10, 0) 38%), linear-gradient(0deg, #0a0a0a 0, rgba(10, 10, 10, 0) 10%), linear-gradient(180deg, rgba(10, 10, 10, .55), rgba(10, 10, 10, 0) 9%); }
  html[data-theme="light"] body.pf .pc-hero .pc-shade {
    background: linear-gradient(90deg, #f4f0e9 0, #f4f0e9 12%, rgba(244, 240, 233, .5) 24%, rgba(244, 240, 233, 0) 38%), linear-gradient(0deg, #f4f0e9 0, rgba(244, 240, 233, 0) 10%), linear-gradient(180deg, rgba(244, 240, 233, .5), rgba(244, 240, 233, 0) 9%); }
}
@media (min-width: 901px) {
  /* the menu sits over the photograph, so it stays light-on-dark in both themes */
  html[data-theme="light"] body.pf .pc-hero .pc-bar .pf-nav { --ink: #f2f2f0; --bg: #0a0a0a; --line: rgba(255, 255, 255, .4); }
  html[data-theme="light"] body.pf .pc-hero .pc-bar .pf-nav a { color: #f2f2f0; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
  html[data-theme="light"] body.pf .pc-hero .pc-shade { background-blend-mode: normal; }
  body.pf .pc-hero::before { content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 62%; height: 190px; pointer-events: none; background: radial-gradient(ellipse 85% 100% at 78% 0, rgba(10, 10, 10, .5), rgba(10, 10, 10, 0) 72%); }
}