/* ===================================================================
     DESIGN TOKENS — edit these to re-skin the whole site
     Concept: "LAYER" — 2026 theme. TKU trains photographers, designers
     and engineers side by side; this palette borrows the language of
     print colour-separation and darkroom registration marks: three
     translucent inks (cyan / magenta / yellow) that only resolve into
     a clean image when perfectly stacked — same as art + engineering.
  =================================================================== */
  :root{
    --paper:      #EDE9DF;
    --paper-deep: #E2DCCB;
    --ink:        #16171B;
    --ink-soft:   #53545A;
    --cyan:       #2E7D9E;
    --magenta:    #C6396B;
    --yellow:     #E7A93C;
    --line:       #C7BFA9;
    --white:      #FBFAF6;

    --font-display: "Hina Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --font-body:    "Yu Gothic", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    --font-mono:    "Yu Gothic", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

    --wide: 1240px;
    --pad: clamp(20px, 5vw, 64px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:400;
    line-height:1.3;
    margin:0;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .eyebrow::before{
    content:"";
    width:18px; height:1px;
    background:var(--ink-soft);
    display:inline-block;
  }
  .wrap{ max-width:var(--wide); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
  section{ position:relative; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }

  /* ---------- registration mark motif (print separation crosshair) --- */
  .regmark{
    position:absolute;
    width:34px; height:34px;
    opacity:.55;
    pointer-events:none;
    color:var(--ink);
  }
  .regmark svg{ width:100%; height:100%; }
  .coord{
    position:absolute;
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:.08em;
    color:var(--ink-soft);
    opacity:.7;
  }

  /* ---------------------------- top social bar -------------------------- */
  .top-bar{ background:var(--ink); color:var(--paper); }
  .top-bar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:1em; padding-top:9px; padding-bottom:9px;
  }
  .top-bar .tag{
    font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
    opacity:.75; white-space:nowrap;
  }
  .top-bar .social{ display:flex; align-items:center; gap:16px; }
  .top-bar .social a{
    color:var(--paper); display:flex; opacity:.85;
    transition:opacity .2s ease, color .2s ease, transform .2s ease;
  }
  .top-bar .social a:hover{ opacity:1; color:var(--yellow); transform:translateY(-1px); }
  .top-bar .social svg{ width:16px; height:16px; display:block; }
  .top-bar .social svg{ width:18px; height:18px; }
  @media (max-width:520px){ .top-bar .tag{ display:none; } }

  /* ---------------------------- header -------------------------------- */
  header.site{
    position:sticky; top:0; z-index:100;
    border-bottom:1px solid var(--line);
  }
  /* The blur lives on ::before, not on header.site itself, because
     filter/backdrop-filter on an element makes it the containing block
     for any position:fixed descendant. nav.primary (the fullscreen
     mobile menu) is a descendant of header.site, so if header.site had
     backdrop-filter directly, the "fixed, full-viewport" mobile panel
     would instead be confined to header's own small box. */
  header.site::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:rgba(237,233,223,.86);
    backdrop-filter:blur(10px);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:nowrap;
    gap:1.2em;
    padding-top:14px; padding-bottom:14px;
  }
  .brand{
    display:flex; align-items:center; gap:.7em;
    text-decoration:none;
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:400;
    letter-spacing:.02em;
    flex-shrink:0;
    white-space:nowrap;
  }
  .brand .mark{
    width:30px; height:30px; border-radius:50%;
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:.7rem; font-weight:700;
    flex-shrink:0;
  }
  nav.primary{ min-width:0; overflow-x:auto; scrollbar-width:none; }
  nav.primary::-webkit-scrollbar{ display:none; }
  nav.primary ul{
    list-style:none; display:flex; gap:1.5em; margin:0; padding:0;
    flex-wrap:nowrap; white-space:nowrap;
  }
  nav.primary a{
    text-decoration:none; font-size:.84rem; letter-spacing:.02em;
    position:relative; padding-bottom:3px;
  }
  nav.primary a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--magenta); transition:right .25s ease;
  }
  nav.primary a:hover::after{ right:0; }
  .nav-cta{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
    border:1px solid var(--ink); padding:.55em 1.1em; text-decoration:none;
    white-space:nowrap; flex-shrink:0;
  }
  .nav-cta:hover{ background:var(--ink); color:var(--paper); }
  .burger{
    display:none; background:none; border:0; cursor:pointer; padding:6px;
    flex-shrink:0; z-index:110; position:relative;
  }
  .burger span{
    display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;
    transition:transform .28s ease, opacity .2s ease, background-color .2s ease;
    transform-origin:center;
  }
  .burger.is-open{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-body);
    font-size:2.45rem;
    line-height:1;
    color:var(--ink);
    padding:0;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    position:fixed;
    top:14px;
    right:var(--pad);
    z-index:140;
    background:transparent;
  }

  /* Below 880px the full inline nav (8 links + CTA + logo) no longer fits
     on one row, so it moves off-canvas into a fullscreen panel toggled
     by .burger instead of wrapping. visibility is tied to .open so the
     panel can never intercept clicks or flash on screen while closed. */
  @media (max-width:880px){
    nav.primary{ overflow:visible; }
    nav.primary{
      position:fixed; inset:0; top:0;
      background:var(--paper);
      display:flex; align-items:flex-start; justify-content:center;
      padding-top:calc(60px + 10vh);
      transform:translateY(-100%);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:transform .35s ease, opacity .25s ease, visibility 0s linear .35s;
      z-index:120;
    }
    nav.primary.open{
      transform:translateY(0);
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transition:transform .35s ease, opacity .25s ease, visibility 0s linear 0s;
    }
    nav.primary ul{ flex-direction:column; text-align:center; gap:1.6em; white-space:normal; }
    nav.primary a{ font-size:1.2rem; }
    .nav-cta{ display:none; }
    .burger{ display:block; position:relative; z-index:2; }
    body.nav-open header.site{ z-index:130; }
  }

  /* ------------------------------ hero --------------------------------- */
  .hero{
    min-height:92vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .hero-media{
    position:absolute; inset:0; z-index:0;
  }
  .hero-media img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(.25) contrast(1.05);
  }
  .hero-media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(22,23,27,.15) 0%, rgba(22,23,27,.65) 78%, rgba(22,23,27,.86) 100%);
  }
  .hero-inner{
    position:relative; z-index:2; color:var(--white);
    padding-top:14vh; padding-bottom:56px;
  }
  .hero-eyebrow{ color:var(--paper); opacity:.85; }
  .hero-eyebrow::before{ background:var(--paper); }
  .layer-title{
    position:relative;
    margin-top:.5em;
    font-size:clamp(3.4rem, 12vw, 9.5rem);
    line-height:.92;
    letter-spacing:.02em;
  }
  .layer-title .stack{ position:relative; display:inline-block; }
  .layer-title .stack span{ display:block; }
  .layer-title .ghost{
    position:absolute; top:0; left:0;
    mix-blend-mode:screen;
    opacity:.75;
  }
  .layer-title .ghost.c{ color:var(--cyan); transform:translate(6px,-5px); }
  .layer-title .ghost.m{ color:var(--magenta); transform:translate(-6px,5px); }
  .layer-title .base{ color:var(--white); position:relative; }

  .hero-sub{
    margin-top:1.3em;
    display:flex; flex-wrap:wrap; gap:2.4em;
    font-family:var(--font-mono);
  }
  .hero-sub .item{ font-size:.85rem; }
  .hero-sub .item b{
    display:block; font-family:var(--font-display); font-size:1.35rem; font-weight:400; margin-bottom:.2em;
  }
  .hero-scroll{
    position:absolute; right:var(--pad); bottom:26px; z-index:2;
    color:var(--paper); font-family:var(--font-mono); font-size:.68rem;
    display:flex; align-items:center; gap:.6em; letter-spacing:.1em;
  }
  .hero-scroll .line{ width:1px; height:38px; background:var(--paper); opacity:.6; animation:drop 2.2s ease infinite; }
  @keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom; } }

  /* --------------------------- section shell ---------------------------- */
  .section{ padding:110px 0; border-bottom:1px solid var(--line); }
  .section.deep{ background:var(--paper-deep); }

  .head-row{
    display:flex; justify-content:space-between; align-items:flex-end; gap:2em;
    margin-bottom:56px; flex-wrap:wrap;
  }
  .head-row h2{ font-size:clamp(1.8rem, 3.4vw, 2.7rem); margin-top:.35em; }
  .head-row p{ max-width:32ch; font-size:.92rem; color:var(--ink-soft); margin:0; }

  /* -------------------------- about / concept ---------------------------- */
  .concept-grid{
    display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center;
  }
  .concept-visual{
    position:relative; aspect-ratio:4/5; border:1px solid var(--ink);
  }
  .concept-visual .plate{ position:absolute; inset:0; mix-blend-mode:multiply; }
  .concept-visual .plate.c{ background:var(--cyan); clip-path:polygon(0 0,64% 0,48% 100%,0% 100%); opacity:.75;}
  .concept-visual .plate.m{ background:var(--magenta); clip-path:polygon(38% 0,100% 0,100% 100%,54% 100%); opacity:.7;}
  .concept-visual .plate.y{ background:var(--yellow); clip-path:polygon(0 62%,100% 40%,100% 100%,0 100%); opacity:.55;}
  .concept-visual .cap{
    position:absolute; bottom:16px; left:16px; color:var(--white);
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  }
  .concept-copy .theme-word{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(2.2rem,5vw,3.4rem);
    margin:.3em 0 .5em;
  }
  .concept-copy p{ color:var(--ink-soft); font-size:.98rem; }
  .concept-copy p + p{ margin-top:1.1em; }

  @media (max-width:900px){ .concept-grid{ grid-template-columns:1fr; gap:40px; } }

  /* ------------------------------ stats strip ----------------------------- */
  .stats{
    display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .stats .stat{ padding:34px var(--pad); border-left:1px solid var(--line); }
  .stats .stat:first-child{ border-left:none; }
  .stats .stat .n{ font-family:var(--font-mono); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:700; }
  .stats .stat .l{ font-size:.78rem; color:var(--ink-soft); margin-top:.3em; }
  @media (max-width:760px){
    .stats{ grid-template-columns:repeat(2,1fr); }
    .stats .stat:nth-child(2n+1){ border-left:none; }
    .stats .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  }

  /* ------------------------------ event info ------------------------------ */
  .info-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .info-card{ background:var(--paper); padding:36px 30px; }
  .info-card .eyebrow{ margin-bottom:1.1em; }
  .info-card .big{ font-family:var(--font-display); font-size:1.6rem; margin-bottom:.4em; }
  .info-card p{ font-size:.88rem; color:var(--ink-soft); margin:0; }
  @media (max-width:820px){ .info-grid{ grid-template-columns:1fr; } }

  .map-frame{ position:relative; margin-top:56px; border:1px solid var(--ink); }
  .map-frame iframe{ width:100%; height:380px; border:0; filter:grayscale(.35) contrast(1.05); display:block; }

  /* ------------------------------ programs -------------------------------- */
  .prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .prog-card{
    display:block; text-decoration:none; color:inherit;
    border:1px solid var(--line); padding:30px 26px; background:var(--white);
    position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
  }
  .prog-card:hover{ transform:translateY(-5px); box-shadow:8px 10px 0 rgba(22,23,27,.08); }
  .prog-card .tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-soft); }
  .prog-card h3{ font-size:1.25rem; margin-top:.6em; }
  .prog-card p{ font-size:.86rem; color:var(--ink-soft); margin-top:.7em; }
  .prog-card .dot{ position:absolute; top:26px; right:26px; width:10px; height:10px; border-radius:50%; }
  .prog-card.c .dot{ background:var(--cyan); }
  .prog-card.m .dot{ background:var(--magenta); }
  .prog-card.y .dot{ background:var(--yellow); }
  @media (max-width:900px){ .prog-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .prog-grid{ grid-template-columns:1fr; } }

  /* ------------------------------ visitors notice -------------------------- */
  .notice-list{ display:flex; flex-direction:column; }
  .notice-item{ display:grid; grid-template-columns:70px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); }
  .notice-list .notice-item:last-child{ border-bottom:1px solid var(--line); }
  .notice-item .num{ font-family:var(--font-mono); color:var(--ink-soft); font-size:.85rem; }
  .notice-item h4{ font-size:1.05rem; font-weight:700; }
  .notice-item p{ font-size:.88rem; color:var(--ink-soft); margin:.5em 0 0; }

  /* ------------------------------ sponsor / recruit CTA duo ---------------- */
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  .duo-card{
    background:var(--paper); padding:56px var(--pad);
    display:flex; flex-direction:column; justify-content:space-between; min-height:340px;
  }
  .duo-card h3{ font-size:clamp(1.6rem,3vw,2.1rem); margin-top:.4em; max-width:16ch; }
  .duo-card p{ font-size:.9rem; color:var(--ink-soft); max-width:38ch; margin-top:1em; }
  @media (max-width:820px){ .duo{ grid-template-columns:1fr; } }

  .btn{
    display:inline-flex; align-items:center; gap:.6em;
    font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em;
    border:1px solid var(--ink); padding:.9em 1.5em; text-decoration:none;
    width:fit-content; margin-top:1.6em; background:transparent; cursor:pointer;
  }
  .btn:hover{ background:var(--ink); color:var(--paper); }
  .btn.on-dark{ border-color:var(--paper); }
  .btn.on-dark:hover{ background:var(--paper); color:var(--ink); }
  .btn::after{ content:"→"; transition:transform .2s ease; }
  .btn:hover::after{ transform:translateX(3px); }

  /* ------------------------------ archive --------------------------------- */
  .archive-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .archive-card{
    background:var(--ink); color:var(--paper);
    aspect-ratio:3/4; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
    text-decoration:none;
  }
  .archive-card .yr{ font-family:var(--font-mono); font-size:1.15rem; font-weight:700; }
  .archive-card .yr small{ display:block; font-size:.62rem; opacity:.7; margin-top:.3em; }
  .archive-card::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
    background:linear-gradient(160deg, var(--cyan), var(--magenta));
    mix-blend-mode:multiply;
  }
  .archive-card:hover::before{ opacity:.55; }
  @media (max-width:900px){ .archive-strip{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:520px){ .archive-strip{ grid-template-columns:repeat(2,1fr); } }

  /* ------------------------------ news list --------------------------------- */
  .news-list{ display:flex; flex-direction:column; }
  .news-item{
    display:grid; grid-template-columns:130px 90px 1fr auto; align-items:center; gap:24px;
    padding:20px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit;
  }
  .news-list .news-item:last-child{ border-bottom:1px solid var(--line); }
  .news-item .date{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }
  .news-item .cat{
    font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em;
    border:1px solid var(--ink-soft); padding:.3em .6em; text-align:center; color:var(--ink-soft);
  }
  .news-item .title{ font-size:.95rem; }
  .news-item .arrow{ opacity:0; transition:opacity .2s ease, transform .2s ease; }
  .news-item:hover .arrow{ opacity:1; transform:translateX(3px); }
  @media (max-width:640px){
    .news-item{ grid-template-columns:1fr; gap:6px; }
    .news-item .arrow{ display:none; }
  }

  /* ------------------------------ contact ----------------------------------- */
  .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
  .contact-form{ display:flex; flex-direction:column; gap:22px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-soft); }
  .field input, .field select, .field textarea{
    font-family:var(--font-body); font-size:.95rem; background:transparent;
    border:none; border-bottom:1px solid var(--ink-soft); padding:.6em 0; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:100px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--magenta); }
  .contact-side .item{ padding:22px 0; border-top:1px solid var(--line); }
  .contact-side .item:last-child{ border-bottom:1px solid var(--line); }
  .contact-side .item h4{ font-size:.98rem; font-weight:700; }
  .contact-side .item p, .contact-side .item a{ font-size:.85rem; color:var(--ink-soft); text-decoration:none; margin-top:.4em; display:block; }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

  /* -------------------------------- footer ----------------------------------- */
  footer.site{ background:var(--ink); color:var(--paper); padding:80px 0 30px; }
  .foot-top{
    display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px;
    padding-bottom:60px; border-bottom:1px solid #34353b;
  }
  .foot-brand .brand{ color:var(--paper); }
  .foot-brand .brand .mark{ background:var(--paper); color:var(--ink); }
  .foot-brand p{ font-size:.84rem; color:#B9B9B4; margin-top:1.3em; max-width:32ch; }
  .foot-col h5{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; color:#9A9A94; margin-bottom:1.2em; }
  .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8em; }
  .foot-col a{ text-decoration:none; font-size:.86rem; color:#DEDED8; }
  .foot-col a:hover{ color:var(--yellow); }
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:28px;
    font-family:var(--font-mono); font-size:.68rem; color:#8C8C86; flex-wrap:wrap; gap:12px;
  }
  @media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

/* =====================================================================
   PROGRAM DETAIL PAGES (one level below #programs)
   ===================================================================== */
.crumb{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-soft); display:flex; align-items:center; gap:.5em; flex-wrap:wrap;
}
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--magenta); }
.crumb .sep{ opacity:.5; }

.sub-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.sub-hero .tag-row{ display:flex; align-items:center; gap:.9em; margin-top:1.4em; }
.sub-hero .dot{ width:10px; height:10px; border-radius:50%; }
.sub-hero .dot.c{ background:var(--cyan); }
.sub-hero .dot.m{ background:var(--magenta); }
.sub-hero .dot.y{ background:var(--yellow); }
.sub-hero h1{ font-size:clamp(2.4rem,6vw,4.4rem); margin-top:.25em; line-height:1.05; }
.sub-hero .lead{ margin-top:1.1em; max-width:56ch; color:var(--ink-soft); font-size:1rem; }

.detail-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:start; }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr; gap:40px; } }
.detail-copy p{ color:var(--ink-soft); font-size:.98rem; }
.detail-copy p + p{ margin-top:1.1em; }
.detail-copy h3{ font-size:1.3rem; margin-top:1.6em; margin-bottom:.5em; }

.plate-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.plate-gallery .plate-box{
  position:relative; aspect-ratio:4/5; border:1px solid var(--ink); overflow:hidden;
}
.plate-gallery .plate-box:first-child{ grid-column:1/-1; aspect-ratio:16/10; }
.plate-gallery .plate-box .fill{ position:absolute; inset:0; mix-blend-mode:multiply; }
.plate-gallery .plate-box .fill.c{ background:var(--cyan); opacity:.6; }
.plate-gallery .plate-box .fill.m{ background:var(--magenta); opacity:.55; }
.plate-gallery .plate-box .fill.y{ background:var(--yellow); opacity:.5; }
.plate-gallery .plate-box .cap{
  position:absolute; bottom:12px; left:12px; color:var(--white);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em;
}

.spec-list{ border-top:1px solid var(--line); margin-top:2.2em; }
.spec-list .row{
  display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.spec-list .row dt{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; }
.spec-list .row dd{ margin:0; font-size:.92rem; }

.related-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2em; }
.related-row a{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  border:1px solid var(--line); padding:.6em 1em; text-decoration:none; color:var(--ink-soft);
}
.related-row a:hover{ border-color:var(--ink); color:var(--ink); }

.prog-card .more{
  display:inline-flex; align-items:center; gap:.4em; margin-top:1.1em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-soft);
  transition:gap .2s ease, color .2s ease;
}
.prog-card:hover .more{ gap:.7em; color:var(--ink); }

.site-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85em; }
.site-list a{
  text-decoration:none; font-size:.95rem; position:relative; padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-list a:hover{ border-color:var(--magenta); color:var(--magenta); }
@media (max-width:760px){
  .sub-hero + .section .wrap > div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:1fr !important; gap:36px !important;
  }
}