/* Homepage: one navigation, visible roles, a curated editorial section. */
.home-menu { display:none; }
.s-roli { position:relative; }
.projects-anchor { position:absolute; top:0; }
.s-roli .role-desc { grid-template-rows:1fr; opacity:.88; }
.s-roli .role-desc-inner { padding-left:0; }
.s-roli .role-head { padding-bottom:18px; }
.s-roli .role-sub .role-head { padding-bottom:18px; }
.s-roli .role-desc { max-width:46em; }

.publications { min-width:0; }
.writing-header { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:20px; }
.writing-header h2, .press-block > h2 { font:400 11px/1.6 var(--mono); color:#77746f; }
.writing-header > a { color:var(--ink); text-decoration:none; font:12px/1.6 var(--mono); padding:8px 0; margin:-8px 0; white-space:nowrap; }
.writing-header > a span { color:var(--pink); margin-left:6px; }
.writing-list { border-bottom:1px solid var(--ink); }
.writing-row { display:grid; grid-template-columns:84px minmax(0,1fr) 20px; grid-template-rows:auto auto; gap:0 22px; align-content:center; padding:16px 0; min-height:94px; border-top:1px solid rgba(17,17,16,.25); color:var(--ink); text-decoration:none; }
.writing-row:first-child { border-top-color:var(--ink); }
.writing-kind { grid-column:2; grid-row:1; margin-bottom:7px; color:#77746f; font:10px/1.5 var(--mono); }
.writing-row h3 { grid-column:2; grid-row:2; font:800 clamp(16px,1.65vw,22px)/1.3 var(--display); text-transform:uppercase; letter-spacing:0; text-wrap:pretty; transition:transform .3s cubic-bezier(.25,.8,.25,1); }
.writing-row img { grid-column:1; grid-row:1 / 3; align-self:center; display:block; width:84px; height:56px; object-fit:cover; filter:grayscale(1) contrast(1.03); transition:filter .3s ease; }
.writing-arrow { grid-column:3; grid-row:1 / 3; align-self:center; justify-self:end; font:18px/1 var(--mono); color:var(--pink); transition:transform .3s ease; }
.press-block { margin-bottom:36px; }
.press-block > h2 { margin-bottom:18px; }
.press-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.press-row { position:relative; display:flex; flex-direction:column; gap:15px; min-width:0; padding:22px 0; border-top:1px solid rgba(17,17,16,.25); }
.press-row:nth-child(-n+3) { border-top:0; }
.press-brand { font:800 clamp(20px,2.15vw,28px)/1.2 var(--display); text-transform:uppercase; text-wrap:balance; transition:transform .3s cubic-bezier(.25,.8,.25,1); }
.press-stories { min-width:0; }
.press-story { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 14px; gap:6px 10px; color:var(--ink); text-decoration:none; }
.press-story:only-child { position:static; }
.press-story:only-child::after { content:''; position:absolute; inset:0; }
.press-story + .press-story { margin-top:12px; padding-top:12px; border-top:1px solid rgba(17,17,16,.18); }
.press-kind { grid-column:1; color:#77746f; font:10px/1.5 var(--mono); }
.press-title { grid-column:1; font:500 16px/1.4 var(--text); text-wrap:pretty; }
.press-arrow { grid-column:2; grid-row:1 / 3; align-self:end; justify-self:end; color:var(--pink); font:16px/1.4 var(--mono); transition:transform .3s ease; }
.publications a:focus-visible, .home-menu summary:focus-visible, .home-menu a:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.press-row:has(.press-story:only-child:focus-visible) { outline:2px solid var(--ink); outline-offset:4px; }
.press-story:only-child:focus-visible { outline:0; }
@media(hover:hover) {
  .writing-row:hover h3 { transform:translateX(6px); }
  .writing-row:hover img { filter:grayscale(0) contrast(1); }
  .writing-row:hover .writing-arrow, .press-story:hover .press-arrow { transform:translate(3px,-3px); }
  .press-row:has(.press-story:only-child:hover) .press-brand { transform:translateX(6px); }
  .writing-header > a:hover, .press-story:hover .press-title { text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:4px; }
}

/* The desktop contents are hidden below 1101px; the same routes live in Menu. */
@media(max-width:1100px) {
  .hero .topbar:has(.language-switcher) { grid-template-columns:auto auto minmax(0,1fr) auto; }
  .hero .topbar .loc { font-size:0; }
  .hero .topbar .loc #clock { font-size:11px; }
  .hero .topbar .loc::before { margin-right:5px; }
  .home-menu { display:block; grid-column:4; grid-row:1; }
  .home-menu > summary { display:flex; align-items:center; min-height:44px; padding:0 0 0 8px; cursor:pointer; list-style:none; font:12px var(--mono); }
  .home-menu > summary::-webkit-details-marker { display:none; }
  .home-menu > summary::after { content:'+'; color:var(--pink); margin-left:8px; }
  .home-menu[open] > summary::after { content:'−'; }
  .home-menu nav { position:absolute; top:100%; right:18px; width:min(360px,calc(100vw - 36px)); max-height:calc(100svh - 90px); overflow-y:auto; overscroll-behavior:contain; padding:12px 20px; background:var(--bg); border:1px solid var(--ink); }
  .home-menu a { display:flex; align-items:center; min-height:44px; gap:18px; border-bottom:1px solid rgba(17,17,16,.18); color:var(--ink); font:12px/1.5 var(--mono); text-decoration:none; }
  .home-menu a:last-child { border-bottom:0; }
  .home-menu a span { color:#66635e; }
  .home-menu a:hover { text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:4px; }
}
@media(max-width:960px) {
  .press-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
  .press-row:nth-child(3) { border-top:1px solid rgba(17,17,16,.25); }
}
@media(max-width:760px) {
  .hero .topbar:has(.language-switcher) { gap:10px; }
  .s-roli .role-head { padding-bottom:12px; }
  .writing-header { padding-bottom:14px; gap:12px; }
  .writing-header h2, .writing-header > a { font-size:10px; }
  .writing-row { grid-template-columns:60px minmax(0,1fr) 14px; gap:0 14px; padding:16px 0; min-height:92px; }
  .writing-kind { font-size:9px; margin-bottom:6px; }
  .writing-row img { width:60px; height:40px; }
  .writing-row h3 { font-size:16px; }
  .writing-arrow { font-size:16px; }
  .press-block { margin-bottom:32px; }
  .press-block > h2 { margin-bottom:16px; font-size:10px; }
  .press-list { gap:0 20px; }
  .press-row { padding:18px 0; gap:12px; }
  .press-brand { font-size:clamp(16px,4.5vw,23px); text-wrap:pretty; }
  .press-story { gap:5px 7px; grid-template-columns:minmax(0,1fr) 12px; }
  .press-title { font-size:14px; }
  .press-kind { font-size:9px; }
  .press-arrow { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .writing-row h3, .writing-row img, .writing-arrow, .press-brand, .press-arrow { transition:none; }
}