/* Self-hosted fonts (SIL Open Font License, see fonts/OFL-*.txt) */
@font-face{ font-family:'Alegreya'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Alegreya-Regular.woff') format('woff'); }
@font-face{ font-family:'Alegreya'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Alegreya-Medium.woff') format('woff'); }
@font-face{ font-family:'Alegreya'; font-weight:400; font-style:italic; font-display:swap; src:url('../fonts/Alegreya-Italic.woff') format('woff'); }
@font-face{ font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Inter-Regular.woff') format('woff'); }
@font-face{ font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Inter-Medium.woff') format('woff'); }
@font-face{ font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/Inter-SemiBold.woff') format('woff'); }
@font-face{ font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/IBMPlexMono-Regular.woff') format('woff'); }
@font-face{ font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/IBMPlexMono-Medium.woff') format('woff'); }

  :root{
    --bg: #faf9f6;
    --bg-alt: #f2f0eb;
    --fg: #16181b;
    --muted: #6f6f68;
    --accent: #6b4a35;
    --line: #d8d5cc;
    --nav-h: 76px;
    --max: 1400px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    background:var(--bg);
    color:var(--fg);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  ::selection{ background:var(--accent); color:#fff; }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  /* ---------- Filmstrip scroll indicator ---------- */
  .filmstrip{
    position:fixed;
    left:0; top:0; bottom:0;
    width:14px;
    z-index:200;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:calc(var(--nav-h) + 20px) 0 20px;
    pointer-events:none;
  }
  .filmstrip .track{
    position:relative;
    width:1px;
    flex:1;
    background:var(--line);
  }
  .filmstrip .fill{
    position:absolute;
    top:0; left:0; width:100%;
    height:0%;
    background:var(--accent);
    transition:height 0.05s linear;
  }
  .filmstrip .sprocket{
    width:5px; height:5px;
    border-radius:1px;
    border:1px solid var(--line);
    margin:8px 0;
    flex-shrink:0;
  }
  @media (max-width:800px){ .filmstrip{ display:none; } }

  /* ---------- Nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    background:transparent;
    transition:background 0.35s ease, border-color 0.35s ease;
    border-bottom:1px solid transparent;
  }
  header.solid{
    background:rgba(250,249,246,0.9);
    backdrop-filter:blur(10px);
    border-color:var(--line);
  }
  .wordmark{
    font-family:'Alegreya', serif;
    font-size:21px;
    font-weight:500;
    letter-spacing:0.01em;
  }
  header.on-hero .wordmark, header.on-hero .navlink{ color:#fff; }
  nav.navlinks{
    display:flex;
    gap:34px;
  }
  .navlink{
    font-family:'IBM Plex Mono', monospace;
    font-size:16px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    position:relative;
    padding-bottom:3px;
  }
  .navlink::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0%; height:1px;
    background:currentColor;
    transition:width 0.25s ease;
  }
  .navlink:hover::after, .navlink:focus-visible::after{ width:100%; }
  .nav-toggle{ display:none; }
  /* Phone header: the logo, spacing and padding scale with the screen width
     so the four links (16px) always fit next to the name. */
  @media (max-width:700px){
    header{ padding:0 clamp(8px, 3vw, 20px); }
    nav.navlinks{ gap:clamp(5px, 2.2vw, 14px); }
    .navlink{ font-size:16px; letter-spacing:0; }
    .wordmark{ white-space:nowrap; margin-right:6px; font-size:clamp(14px, 4.2vw, 19px); letter-spacing:0; }
  }
  @media (max-width:340px){
    header{ padding:0 6px; }
    nav.navlinks{ gap:3px; }
    .wordmark{ margin-right:3px; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:560px;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
  }
  .hero img{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transform:scale(1.03);
  }
  .hero::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,8,0.15) 0%, rgba(10,10,8,0.05) 40%, rgba(10,10,8,0.65) 100%);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    color:#fff;
    padding:0 40px 64px;
    width:100%;
  }
  .hero-inner .eyebrow{ color:rgba(255,255,255,0.75); margin-bottom:18px; }
  .hero h1{
    font-family:'Alegreya', serif;
    font-weight:400;
    font-size:clamp(2.6rem, 8vw, 7rem);
    line-height:0.95;
    letter-spacing:-0.01em;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:400;
  }
  .hero-meta{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:26px;
    gap:24px;
    flex-wrap:wrap;
  }
  .hero-meta p{
    max-width:34ch;
    font-size:15px;
    color:rgba(255,255,255,0.82);
  }
  .scroll-cue{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.7);
    writing-mode:vertical-rl;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .scroll-cue::before{
    content:'';
    width:1px; height:36px;
    background:rgba(255,255,255,0.5);
    animation:cue 2.4s ease-in-out infinite;
  }
  @keyframes cue{
    0%,100%{ transform:scaleY(0.4); opacity:0.4; }
    50%{ transform:scaleY(1); opacity:1; }
  }
  @media (max-width:700px){
    .hero-inner{ padding:0 20px 44px; }
    .scroll-cue{ display:none; }
  }

  section{
    padding:120px 40px;
    max-width:var(--max);
    margin:0 auto;
  }
  @media (max-width:700px){
    section{ padding:80px 20px; }
  }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:56px;
    gap:24px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:24px;
  }
  .section-head h2{
    font-family:'Alegreya', serif;
    font-weight:400;
    font-size:clamp(2rem, 4vw, 3.2rem);
  }
  .section-head .eyebrow{ margin-bottom:10px; }
  .section-head .count{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
  }

  /* ---------- Works grid ---------- */
  .works-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:6px;
  }
  .work{
    position:relative;
    overflow:hidden;
    background:var(--bg-alt);
    cursor:pointer;
  }
  .work img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.7s cubic-bezier(.2,.7,.2,1);
  }
  .work:hover img, .work:focus-within img{ transform:scale(1.06); }
  .work .cap{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:16px;
    background:linear-gradient(0deg, rgba(10,10,8,0.72) 0%, rgba(10,10,8,0) 100%);
    color:#fff;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.3s ease, transform 0.3s ease;
  }
  .work:hover .cap, .work:focus-within .cap{ opacity:1; transform:translateY(0); }
  .work .cap .t{ font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.06em; color:rgba(255,255,255,0.75); text-transform:uppercase; }
  .work .cap .n{ font-family:'Alegreya', serif; font-size:17px; margin-top:4px; }

  .work.w1{ grid-column:span 4; aspect-ratio:4/3; }
  .work.w2{ grid-column:span 2; aspect-ratio:3/4; }
  .work.w3{ grid-column:span 2; aspect-ratio:3/4; }
  .work.w4{ grid-column:span 2; aspect-ratio:3/4; }
  .work.w5{ grid-column:span 2; aspect-ratio:1/1; }
  .work.w6{ grid-column:span 3; aspect-ratio:4/3; }
  .work.w7{ grid-column:span 3; aspect-ratio:4/3; }

  @media (max-width:900px){
    .works-grid{ grid-template-columns:repeat(2, 1fr); }
    .work.w1,.work.w2,.work.w3,.work.w4,.work.w5,.work.w6,.work.w7{ grid-column:span 1; aspect-ratio:4/5; }
  }

  /* ---------- Text / statement ---------- */
  .statement{
    display:grid;
    grid-template-columns:0.9fr 1.4fr;
    gap:70px;
  }
  .statement blockquote{
    font-family:'Alegreya', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    line-height:1.35;
    color:var(--fg);
  }
  .statement blockquote::before{ content:'“'; color:var(--accent); }
  .statement blockquote::after{ content:'”'; color:var(--accent); }
  .statement .body p{ margin-bottom:20px; max-width:62ch; color:#2c2c28; }
  .statement .body p:last-child{ margin-bottom:0; }
  @media (max-width:800px){
    .statement{ grid-template-columns:1fr; gap:36px; }
  }

  /* ---------- Vita ---------- */
  .vita-group{ margin-bottom:52px; }
  .vita-group:last-child{ margin-bottom:0; }
  .vita-group h3{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:18px;
  }
  .vita-row{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:24px;
    padding:16px 0;
    border-top:1px solid var(--line);
  }
  .vita-group .vita-row:last-child{ border-bottom:1px solid var(--line); }
  .vita-row .yr{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    padding-top:2px;
  }
  .vita-row .desc{ min-width:0; overflow-wrap:break-word; }
  .vita-row .desc strong{ font-weight:600; }
  .vita-row .desc span{ display:block; color:var(--muted); font-size:14px; margin-top:2px; }

  /* ---------- Contact ---------- */
  .contact-wrap{
    display:grid;
    grid-template-columns:minmax(0, 640px);
  }

  form{ display:flex; flex-direction:column; gap:22px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .field input, .field textarea{
    font-family:'Inter', sans-serif;
    font-size:16px;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    padding:10px 2px;
    color:var(--fg);
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:var(--accent);
  }
  .submit-btn{
    align-self:flex-start;
    margin-top:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    background:var(--fg);
    color:var(--bg);
    border:none;
    padding:16px 30px;
    cursor:pointer;
    transition:background 0.2s ease;
  }
  .submit-btn:hover{ background:var(--accent); }
  .submit-btn:disabled{ opacity:0.6; cursor:default; }
  .form-status{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    min-height:18px;
  }
  @media (max-width:800px){
  }

  footer{
    border-top:1px solid var(--line);
    padding:36px 40px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
  }
  .footer-left{ display:flex; flex-wrap:wrap; gap:6px 28px; }
  footer a{ color:inherit; border-bottom:1px solid var(--line); transition:color 0.2s ease, border-color 0.2s ease; }
  footer a:hover, footer a:focus-visible{ color:var(--fg); border-color:var(--fg); }

  /* ---------- Legal pages (Impressum) ---------- */
  .legal{ max-width:640px; line-height:1.7; overflow-wrap:anywhere; }
  .legal h2{ font-family:'Alegreya', serif; font-weight:400; font-size:1.5rem; margin:36px 0 10px; }
  .legal h2:first-child{ margin-top:0; }
  .legal h2.legal-part{ font-size:2.4rem; margin:0 0 24px; }
  #datenschutz{ padding-top:24px; }
  .legal h3{ font-family:'Alegreya', serif; font-weight:500; font-size:1.2rem; margin:28px 0 8px; }
  .legal mark{ background:#fff1a8; color:var(--fg); padding:0 4px; }
  .legal p{ margin-bottom:14px; }
  .legal a{ color:var(--accent); border-bottom:1px solid currentColor; }

  /* ---------- Page header (non-hero pages) ---------- */
  .page-header{
    padding:calc(var(--nav-h) + 64px) 40px 0;
    max-width:var(--max);
    margin:0 auto;
  }
  .page-header .eyebrow{ margin-bottom:14px; }
  .page-header h1{
    font-family:'Alegreya', serif;
    font-weight:400;
    font-size:clamp(2.4rem, 6vw, 4.4rem);
  }
  @media (max-width:700px){
    .page-header{ padding:calc(var(--nav-h) + 40px) 20px 0; }
  }

  /* ---------- Homepage works teaser ---------- */
  .works-teaser{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
  }
  .works-teaser .work{ aspect-ratio:3/2; }
  @media (max-width:700px){
    .works-teaser{ grid-template-columns:1fr; }
  }
  .view-all{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:36px;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    border-bottom:1px solid var(--fg);
    padding-bottom:4px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .view-all:hover, .view-all:focus-visible{ color:var(--accent); border-color:var(--accent); }

  /* ---------- Vita: intro + year-grouped entries ---------- */
  .vita-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:60px;
  }
  .vita-intro .bio p{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    line-height:1.7;
  }
  .vita-legend{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    letter-spacing:0.02em;
  }

  .vita-year{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    padding:20px 0;
    border-top:1px solid var(--line);
  }
  .vita-group .vita-year:last-child{ border-bottom:1px solid var(--line); }
  .vita-year .yr{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    padding-top:2px;
  }
  .vita-year .entries{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .vita-year .entries div{
    font-size:15px;
    color:#2c2c28;
    line-height:1.5;
  }
  .vita-year .entries .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.04em;
    color:var(--muted);
    margin-left:4px;
    white-space:nowrap;
  }
  @media (max-width:600px){
    .vita-year{ grid-template-columns:1fr; gap:8px; }
  }

  /* ---------- Text / Press: year-grouped entries with linked titles ---------- */
  .text-year{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    padding:20px 0;
    border-top:1px solid var(--line);
  }
  #text-page .text-year:last-child{ border-bottom:1px solid var(--line); }
  .text-year .yr{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    padding-top:2px;
  }
  .text-year .entries{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .text-entry .prefix{
    display:block;
    font-size:14px;
    color:var(--muted);
    margin-bottom:2px;
  }
  .text-entry .title-link{
    font-family:'Alegreya', serif;
    font-style:italic;
    font-size:18px;
    color:var(--fg);
    border-bottom:1px solid transparent;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .text-entry .title-link:hover, .text-entry .title-link:focus-visible{
    color:var(--accent);
    border-color:var(--accent);
  }
  .text-entry .kind-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:3px;
    padding:2px 6px;
    margin-left:8px;
    vertical-align:middle;
  }
  .text-entry .rest{
    display:block;
    font-size:14px;
    color:#2c2c28;
    margin-top:6px;
    line-height:1.55;
  }
  .text-entry .lang{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    margin-left:6px;
  }
  @media (max-width:600px){
    .text-year{ grid-template-columns:1fr; gap:8px; }
  }

  /* ---------- Works: view toggle ---------- */
  .view-toggle{
    display:flex;
    gap:20px;
  }
  .view-btn{
    background:none;
    border:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    cursor:pointer;
    padding-bottom:4px;
    border-bottom:1px solid transparent;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .view-btn:hover{ color:var(--fg); }
  .view-btn.active{ color:var(--fg); border-color:var(--fg); }

  /* ---------- Works: list view with hover preview ---------- */
  .works-list{ display:none; flex-direction:column; }
  .works-list.active{ display:flex; }
  .works-grid.hidden{ display:none; }

  .list-head{
    display:grid;
    grid-template-columns:1fr 320px 100px;
    padding:0 0 14px;
    border-bottom:1px solid var(--fg);
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .list-row{
    display:grid;
    grid-template-columns:1fr 320px 100px;
    align-items:center;
    padding:24px 0;
    border-bottom:1px solid var(--line);
    position:relative;
    transition:padding-left 0.3s ease, color 0.2s ease;
  }
  .list-row:hover, .list-row:focus-visible{
    padding-left:18px;
  }
  .list-row .lt{
    font-family:'Alegreya', serif;
    font-style:italic;
    font-size:clamp(1.1rem, 2.4vw, 1.5rem);
    color:var(--fg);
    transition:color 0.2s ease;
  }
  .list-row:hover .lt, .list-row:focus-visible .lt{ color:var(--accent); }
  .list-row .lc, .list-row .ly{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
  }
  @media (max-width:700px){
    .list-head{ grid-template-columns:1fr 90px; }
    .list-head .lh-year{ display:none; }
    .list-row{ grid-template-columns:1fr 90px; }
    .list-row .ly{ display:none; }
  }

  .list-preview{
    position:fixed;
    top:0; left:0;
    width:340px;
    height:227px;
    pointer-events:none;
    z-index:150;
    opacity:0;
    overflow:hidden;
    transform:translate(-50%,-50%);
    transition:opacity 0.2s ease;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
  }
  .list-preview.active{ opacity:1; }
  .list-preview img{
    width:100%; height:100%;
    object-fit:cover;
  }
  @media (max-width:900px){
    .list-preview{ display:none; }
  }

  /* ---------- Work detail page ---------- */
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    transition:color 0.2s ease;
  }
  .back-link:hover, .back-link:focus-visible{ color:var(--fg); }

  .wd-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:32px;
    padding-top:26px;
    border-top:1px solid var(--line);
  }
  .wd-specs{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
  }
  .wd-buy{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .wd-price{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--fg);
  }
  .buy-btn{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    background:var(--fg);
    color:var(--bg);
    padding:13px 28px;
    transition:background 0.2s ease;
  }
  .buy-btn:hover, .buy-btn:focus-visible{ background:var(--accent); }

  .wd-images{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:6px;
  }
  .wd-image{
    aspect-ratio:3/2;
    overflow:hidden;
    background:var(--bg-alt);
  }
  .wd-image img{
    width:100%; height:100%;
    object-fit:cover;
  }
  @media (max-width:700px){
    .wd-images{ grid-template-columns:1fr; }
  }

  .wd-text{
    max-width:70ch;
  }
  .wd-text p{
    font-size:16px;
    color:#2c2c28;
    line-height:1.75;
  }

  /* ---------- Work detail: editorial gallery (varied, non-uniform grid) ---------- */
  .aa-gallery{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:6px;
    align-items:start;
  }
  .aa-tile{
    overflow:hidden;
    background:var(--bg-alt);
  }
  .aa-tile img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .aa-tile.full{ grid-column:span 6; aspect-ratio:3/2; }
  .aa-tile.half{ grid-column:span 3; aspect-ratio:3/2; }
  .aa-tile.strip{ grid-column:span 2; aspect-ratio:10/11; }
  .aa-tile.wide{ grid-column:span 6; aspect-ratio:1000/540; }
  .aa-tile.half.ratio-43{ aspect-ratio:4/3; }
  .aa-figure{ grid-column:span 3; }
  /* narrower portrait photo that should end up exactly as tall as its neighbour (575:866 vs 736:1024) */
  .aa-tile.match-height{ width:calc(100% * (575/866) / (736/1024)); }
  .aa-figure .aa-gallery-caption{ margin:8px 0 0; }
  /* Installation views with identical vertical rhythm: photo -> caption 10px, caption -> next photo 28px */
  .aa-gallery.inst-even{ row-gap:0; }
  .aa-gallery.inst-even .aa-gallery-caption{ margin:10px 0 28px; }
  .aa-gallery.inst-even .aa-figure{ margin-bottom:28px; }
  .aa-gallery.inst-even .aa-figure .aa-gallery-caption{ margin:10px 0 0; }
  .installation-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:400;
    margin-bottom:18px;
  }

  .aa-gallery-caption{
    grid-column:1 / -1;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--muted);
    margin:8px 0 18px;
  }

  @media (max-width:700px){
    .aa-tile.half{ grid-column:span 6; }
    .aa-figure{ grid-column:span 6; }
    .aa-tile.match-height{ width:100%; }
    .aa-tile.strip{ grid-column:span 3; }
  }

  /* ---------- Work detail: full-bleed single-column gallery (Sortiment) ---------- */
  .stack-gallery{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .stack-gallery .aa-tile{ aspect-ratio:3/2; }

  /* ---------- Work detail: three-part segmented layout (Périphérique) ---------- */
  .periph-segment{ margin-bottom:80px; }
  .periph-segment:last-child{ margin-bottom:0; }
  .periph-segment h2{
    font-family:'Alegreya', serif;
    font-weight:400;
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom:28px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .periph-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
  .periph-item img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    background:var(--bg-alt);
  }
  /* A single tall photo that should be visible in one screen: as tall as the window minus the header and a little air */
  .periph-item img.fit-screen{
    width:auto;
    max-width:100%;
    height:calc(100vh - 130px);
    height:calc(100svh - 130px);
    min-height:360px;
  }
  /* Same idea for a wide photo: as large as fits in one window (set --ar to width/height) */
  .periph-item img.fit-screen-l{
    height:auto;
    width:min(100%, max(calc((100vh - 130px) * var(--ar)), calc(360px * var(--ar))));
    width:min(100%, max(calc((100svh - 130px) * var(--ar)), calc(360px * var(--ar))));
  }
  @media (max-width:700px){
    .periph-item img.fit-screen{ width:100%; height:auto; min-height:0; }
    .periph-item img.fit-screen-l{ width:100%; }
  }
  .periph-item p{
    font-size:14px;
    color:var(--muted);
    margin-top:12px;
    line-height:1.5;
  }
  .periph-grid.cols-2{ grid-template-columns:repeat(2, 1fr); align-items:start; row-gap:28px; }
  /* 6-column grid whose items span 2 or 3 columns (e.g. 2 photos, then 3); stacks on phones */
  .periph-grid.g6{ grid-template-columns:repeat(6, 1fr); align-items:start; row-gap:28px; }
  .periph-grid.g6 .periph-item.s3{ grid-column:span 3; }
  .periph-grid.g6 .periph-item.s2{ grid-column:span 2; }
  @media (max-width:700px){
    .periph-grid{ grid-template-columns:1fr; }
    .periph-grid.cols-2{ grid-template-columns:1fr; }
    .periph-grid.g6{ grid-template-columns:1fr; }
    .periph-grid.g6 .periph-item.s3, .periph-grid.g6 .periph-item.s2{ grid-column:auto; }
  }

  /* ---------- Phones: every photo grid shows its images stacked, one per row ---------- */
  @media (max-width:700px){
    .periph-grid, .periph-grid.cols-2, .periph-grid.g6{ grid-template-columns:1fr !important; }
    .periph-grid .periph-item{ grid-column:auto !important; }
    .wd-images{ grid-template-columns:1fr !important; }
    .wd-images .wd-image{ grid-column:auto !important; }
    .aa-gallery{ grid-template-columns:1fr; }
    .aa-gallery .aa-tile, .aa-gallery .aa-figure{ grid-column:auto !important; }
    .aa-gallery .aa-gallery-caption{ grid-column:auto; }
  }