/* ==========================================================================
   Project page — Senawa /work/<slug> (spec §3).

   Every rule body below is copied out of reference/senawa/project-page.css
   byte-for-byte; only the CSS-module hashes were dropped:

     page-module__Ro7qTW__X  -> .pp-x        FadeImage-module__X  -> .fi-x
     PortraitCarousel-module__X -> .pt-x     WorkGallery-module__X -> .wg-x

   Two blocks at the bottom are NOT in the vendored file and are marked as
   such: the handful of rules next/image supplied inline (frame images are
   `fill`ed by next/image, not by a stylesheet) and the responsive /
   reduced-motion blocks, which Senawa ships in a chunk we did not capture —
   their values come from spec §3's prose ("rail static, meta hidden, hero
   64svh/56svh, overview single column").
   ========================================================================== */

/* ------------------------------------------------------------------ page */
.pp-detail{background-color:var(--wool);grid-template-columns:clamp(300px,28vw,384px) 1fr;display:grid;position:relative}

/* ------------------------------------------------------------------ rail */
.pp-rail{height:100svh;color:var(--slate);flex-direction:column;align-self:start;padding:clamp(30px,4vh,52px) clamp(28px,2.4vw,40px) clamp(30px,4vh,52px) clamp(34px,3vw,52px);display:flex;position:sticky;top:0}
.pp-rail-top{flex-direction:column;gap:clamp(26px,5vh,60px);display:flex}
.pp-rail-utility{justify-content:space-between;align-items:baseline;gap:16px;display:flex}
.pp-rail-logo{color:var(--slate);transition:opacity var(--duration-fast) var(--ease-out);align-self:flex-start;display:inline-flex;position:relative}
.pp-rail-logo:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pp-rail-logo:hover{opacity:.78}
.pp-rail-menu{cursor:pointer;font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);transition:opacity var(--duration-fast) var(--ease-out);background:0 0;border:none;padding:0;font-size:10px;font-weight:500;position:relative}
.pp-rail-menu:before{content:"";width:max(100%,44px);height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pp-rail-menu:hover{opacity:.6}
.pp-breadcrumb{font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-caption);font-size:10px;font-weight:500}
.pp-breadcrumb a{position:relative}
.pp-breadcrumb a:before{content:"";width:max(100%,44px);height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pp-bc-slash{opacity:.4;padding:0 5px}
.pp-rail-title-block{flex-direction:column;gap:7px;margin-top:clamp(110px,28vh,320px);display:flex}
.pp-rail-title{font-family:var(--font-display);letter-spacing:-.01em;font-size:clamp(1.25rem,1.7vw,1.625rem);font-weight:600;line-height:1.15}
.pp-rail-title:before{content:"//";opacity:.45;margin-right:6px;font-weight:400}
.pp-rail-sub{font-family:var(--font-body);letter-spacing:.04em;color:var(--color-text-sub);opacity:.7;font-size:12px;font-weight:300}
.pp-rail-meta{flex-direction:column;gap:clamp(16px,2.4vh,26px);margin-top:clamp(64px,15vh,190px);display:flex}
.pp-rail-meta-item{flex-direction:column;gap:4px;display:flex}
.pp-rail-meta-label{font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-caption);font-size:10px;font-weight:500}
.pp-rail-meta-value{font-family:var(--font-body);letter-spacing:.02em;color:var(--color-text);font-variant-numeric:tabular-nums;font-size:12px;font-weight:300}
.pp-meta-mobile{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vh,28px) 32px;padding:clamp(28px,5vh,44px) clamp(28px,5vw,48px) 0;display:none}

/* --------------------------------------------------------------- content */
.pp-content{min-width:0}
.pp-hero-section{width:100%;height:100svh;position:relative;overflow:hidden}
.pp-overview{grid-template-columns:1fr clamp(280px,34vw,540px);align-items:stretch;min-height:100svh;display:grid}
.pp-overview-text{flex-direction:column;padding:clamp(72px,12vh,150px) clamp(36px,4.5vw,88px) clamp(56px,9vh,110px);display:flex}
.pp-overview-year{flex-direction:column;gap:4px;margin-bottom:clamp(28px,4vh,48px);display:flex}
.pp-overview-year-label{font-family:var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-caption);font-size:10px;font-weight:500}
.pp-overview-year-value{font-family:var(--font-body);letter-spacing:.04em;color:var(--color-text);font-variant-numeric:tabular-nums;font-size:13px;font-weight:300}
.pp-overview-body{flex-direction:column;gap:1.2em;max-width:560px;display:flex}
.pp-overview-body p{font-family:var(--font-display);font-size:clamp(.9375rem,1vw,1.0625rem);font-weight:300;line-height:var(--leading-body);color:var(--color-text)}
.pp-overview-thumbs{grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);max-width:560px;margin-top:clamp(40px,6vh,72px);display:grid}
.pp-overview-thumb{width:100%}
.pp-overview-image{min-height:100svh;position:relative}

/* ----------------------------------------------------------- detail nav */
.pp-detail-nav{background:var(--wool);border-top:1px solid #a8967e33;justify-content:space-between;align-items:center;gap:24px;padding:clamp(32px,6vw,72px) clamp(24px,6vw,96px);display:flex}
.pp-detail-nav-all{font-family:var(--font-body);letter-spacing:.04em;color:var(--walnut);transition:color var(--duration-quick) var(--ease-out);font-size:12px;text-decoration:none;position:relative}
.pp-detail-nav-all:before{content:"";width:max(100%,44px);height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pp-detail-nav-all:hover{color:var(--slate)}
.pp-detail-nav-next{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;text-decoration:none;display:flex}
.pp-detail-nav-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.18em;color:var(--walnut);font-size:10px}
.pp-detail-nav-title{font-family:var(--font-display);color:var(--slate);transition:color var(--duration-quick) var(--ease-out);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:600}
.pp-detail-nav-next:hover .pp-detail-nav-title{color:var(--lichen)}

/* ------------------------------------------------------------- FadeImage */
.fi-wrapper{background-color:var(--linen);position:relative;overflow:hidden}
.fi-wrapper.fi-fill{position:absolute;inset:0}
.fi-placeholder{background-color:var(--linen);position:absolute;inset:0}
.fi-image{object-fit:cover;width:100%;height:100%;display:block}
.fi-hidden{opacity:0;transform:scale(1.05)}
.fi-hidden-instant{opacity:0}
.fi-revealed{opacity:1;transition:opacity 1.2s cubic-bezier(.33,1,.68,1),transform 1.2s cubic-bezier(.33,1,.68,1);transform:scale(1)}
.fi-revealed-instant{opacity:1;transition:opacity .45s cubic-bezier(.5,1,.89,1)}

/* ----------------------------------------------------- PortraitCarousel */
.pt-carousel{background-color:var(--linen);outline:none;position:absolute;inset:0;overflow:hidden}
.pt-carousel:focus-visible{outline:2px solid var(--wool);outline-offset:-4px}
.pt-carousel:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(to top, rgba(var(--scrim-ink), .62) 0%, rgba(var(--scrim-ink), 0) 100%);height:32%;position:absolute;bottom:0;left:0;right:0}
.pt-stage{z-index:1;position:absolute;inset:0}
.pt-frame{opacity:0;transition:opacity var(--duration-slow) var(--ease-out);position:absolute;inset:0}
.pt-frame[data-active]{opacity:1}
.pt-frame-img{object-fit:cover}
.pt-sr-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.pt-controls{z-index:3;color:var(--wool);align-items:center;gap:clamp(8px,1.2vw,14px);display:flex;position:absolute;bottom:clamp(18px,2.4vw,30px);left:50%;transform:translate(-50%)}
.pt-arrow{cursor:pointer;width:44px;height:44px;color:var(--wool);font-family:var(--font-display);transition:opacity var(--duration-fast) var(--ease-out);background:0 0;border:none;flex:none;justify-content:center;align-items:center;font-size:24px;font-weight:300;line-height:1;display:flex}
.pt-arrow:hover{opacity:.6}
.pt-arrow[aria-disabled=true]{opacity:.3;cursor:default}
.pt-counter{font-family:var(--font-body);letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--wool);text-align:center;font-size:11px;font-weight:500}

/* --------------------------------------------------------- WorkGallery */
.wg-gallery{background-color:var(--slate);width:100%;height:100svh;color:var(--wool);outline:none;position:relative;overflow:hidden}
.wg-gallery:focus-visible{outline:2px solid var(--wool);outline-offset:-4px}
.wg-gallery:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(#16110d00 0%,#16110db3 100%);height:34vh;position:absolute;bottom:0;left:0;right:0}
.wg-stage{z-index:1;position:absolute;inset:0}
.wg-frame{opacity:0;transition:opacity var(--duration-slow) var(--ease-out);position:absolute;inset:0}
.wg-frame[data-active]{opacity:1}
.wg-frame-img{object-fit:cover}
.wg-sr-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.wg-thumb-film-mark{background:var(--wool);opacity:.9;height:2px;position:absolute;bottom:6px;left:6px;right:6px}
.wg-filmstrip{z-index:5;align-items:center;gap:clamp(8px,1.4vw,18px);max-width:min(92vw,760px);display:flex;position:absolute;bottom:clamp(20px,3vw,36px);left:50%;transform:translate(-50%)}
.wg-arrow{cursor:pointer;width:44px;height:44px;color:var(--wool);font-family:var(--font-display);transition:opacity var(--duration-fast) var(--ease-out);background:0 0;border:none;flex:none;justify-content:center;align-items:center;font-size:26px;font-weight:300;line-height:1;display:flex}
.wg-arrow:hover{opacity:.6}
.wg-arrow[aria-disabled=true]{opacity:.25;cursor:default}
.wg-thumbs{scroll-behavior:smooth;scrollbar-width:none;align-items:center;gap:8px;padding:4px;display:flex;overflow-x:auto}
.wg-thumbs::-webkit-scrollbar{display:none}
.wg-thumb{cursor:pointer;opacity:.5;outline-offset:0;width:clamp(64px,8vw,104px);height:clamp(44px,5.4vw,70px);transition:opacity var(--duration-fast) var(--ease-out), outline-color var(--duration-fast) var(--ease-out);border:none;outline:1px solid #0000;flex:none;padding:0;position:relative;overflow:hidden}
.wg-thumb:hover{opacity:.85}
.wg-thumb[data-active]{opacity:1;outline-color:var(--wool)}
.wg-thumb:focus-visible{outline:2px solid var(--wool);outline-offset:3px}
.wg-thumb-img{object-fit:cover}

/* ==========================================================================
   ADDITIONS — not in reference/senawa/project-page.css.

   Senawa renders every frame/thumb image through next/image `fill`, which
   emits `position:absolute;inset:0;width:100%;height:100%` as an inline
   style. We ship plain <img>, so the same four declarations have to live in
   the stylesheet or `object-fit:cover` has nothing to cover.
   ========================================================================== */
.pt-frame-img,.wg-frame-img,.wg-thumb-img{width:100%;height:100%;display:block}

/* The rail is sticky, so it opens a stacking context; .pp-hero-section is
   position:relative and comes later in the DOM, so without a z-index here the
   hero photo paints over the rail's dropdown card. */
.pp-rail{z-index:var(--z-nav)}

/* The rail wordmark. */
.pp-rail-logo img{width:auto;height:28px}

/* The rail's menu pill is the shared .nav-menu, which the nav bar positions
   absolutely. In the rail it sits in flow inside its own positioned wrapper
   so .nav-card-wrap (absolute, top:44px, left:0) anchors under it. The
   wrapper also carries `nav--light`, reusing the shell's light-page skin. */
.pp-rail-menu-wrap{position:relative}
.pp-rail-menu-wrap .nav-menu{position:relative;left:auto}

/* Unlike next/image, our thumbs carry no intrinsic size, so the three
   overview thumbs would each take their photo's own aspect ratio and the row
   would jag. One ratio keeps the grid level. */
.pp-overview-thumb .fi-wrapper{aspect-ratio:4/3}

/* ==========================================================================
   RESPONSIVE — spec §3 ("rail static, meta hidden -> .pp-meta-mobile grid,
   hero 64svh/56svh, overview single column"). Breakpoints are Senawa's own,
   1023 / 767.
   ========================================================================== */
@media (max-width:1023px){
  /* One gutter, not three: stacked, the rail / meta / overview clamps resolve
     to 34 / 28 / 36px and the column edge visibly jags. */
  .pp-detail{grid-template-columns:minmax(0,1fr)}
  .pp-rail{height:auto;padding:clamp(30px,4vh,52px) clamp(28px,5vw,48px) clamp(26px,4vh,40px);position:static}
  .pp-rail-title-block{margin-top:clamp(40px,9vh,90px)}
  .pp-rail-meta{display:none}
  .pp-meta-mobile{display:grid}
  .pp-hero-section{height:64svh}
  .pp-overview{grid-template-columns:minmax(0,1fr);min-height:0}
  .pp-overview-text{padding:clamp(48px,8vh,96px) clamp(28px,5vw,48px) clamp(40px,6vh,72px)}
  .pp-overview-image{min-height:68svh}
  .pp-rail-menu-wrap .nav-card-wrap{left:auto;right:0}
  .pp-rail-menu-wrap .nav-card{width:min(300px,calc(100vw - 56px))}
}
@media (max-width:767px){
  .pp-hero-section{height:56svh}
  .pp-overview-thumbs{gap:8px}
  .pp-detail-nav{flex-direction:column;align-items:flex-start;gap:24px}
  .pp-detail-nav-next{text-align:left;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .fi-revealed,.fi-revealed-instant{transition:none}
  .fi-hidden{transform:none}
  .pt-frame,.wg-frame,.pt-arrow,.wg-arrow,.wg-thumb,.pp-rail-logo,.pp-detail-nav-all,.pp-detail-nav-title{transition:none}
  .wg-thumbs{scroll-behavior:auto}
}