/* ============================================================
   POKORNY DESIGN — premium studio portfolio (V5 hero redesign)
   Design system + layout + components
   Grid: content 1440px @1920 (240px side margins) · mobile 360px / 24px margins
   ============================================================ */

/* ---------- Delight typeface ---------- */
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-thin.woff2") format("woff2"), url("assets/fonts/delight-thin.otf") format("opentype");       font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-extralight.woff2") format("woff2"), url("assets/fonts/delight-extralight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-light.woff2") format("woff2"), url("assets/fonts/delight-light.otf") format("opentype");      font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-regular.woff2") format("woff2"), url("assets/fonts/delight-regular.otf") format("opentype");    font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-medium.woff2") format("woff2"), url("assets/fonts/delight-medium.otf") format("opentype");     font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-semibold.woff2") format("woff2"), url("assets/fonts/delight-semibold.otf") format("opentype");   font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-bold.woff2") format("woff2"), url("assets/fonts/delight-bold.otf") format("opentype");       font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-extrabold.woff2") format("woff2"), url("assets/fonts/delight-extrabold.otf") format("opentype");  font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Delight"; src:url("assets/fonts/delight-black.woff2") format("woff2"), url("assets/fonts/delight-black.otf") format("opentype");      font-weight:900; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --paper:        #FFFFFF;
  --paper-2:      #FFFFFF;
  --card:         #ECECEC;
  --ink:          #16150F;
  --ink-soft:     #46443B;
  --muted:        #736F63;   /* WCAG AA ≥4.5:1 na papíru vč. 11px labelů (bylo #8C887C = 3.5) */
  --line:         rgba(22,21,15,.14);
  --line-soft:    rgba(22,21,15,.08);

  --accent:       #2F9680;   /* brand green */
  --accent-deep:  #226F5E;
  --accent-ink:   #0E2A23;
  --on-accent:    #F1F4EE;

  --ff-sans: "Delight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Delight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 24px margins @360 → 72px inner pad; column 1440px = 240px margins @1920 */
  --pad:  clamp(24px, 5vw, 72px);
  --colw: 1440px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);

  --r-lg: 22px;
  --r-md: 16px;

  /* themeable surface tokens (light defaults) */
  --nav-bg:          rgba(255,255,255,.55);
  --nav-bg-scrolled: rgba(255,255,255,.82);
  --surface-ink:     #16150F;   /* dark cards (featured) */
  --surface-fg:      #F1F4EE;   /* text on dark cards */
  --contact-bg:      #2F9680;   /* accent footer (light) */
  --contact-fg:      #F1F4EE;
  --chip-bg:         rgba(255,255,255,.9);
  --shadow:          rgba(0,0,0,.4);
  color-scheme: light;
}

/* ============================================================
   DARK MODE — premium, no pure black, WCAG AA
   ============================================================ */
html[data-theme="dark"]{
  --paper:        #15191B !important;
  --paper-2:      #15191B !important;
  --card:         #242B2D !important;
  --ink:          #ECEEED !important;
  --ink-soft:     #A7ADAD !important;
  --muted:        #858D8F !important;   /* WCAG AA ≥4.5:1 na tmavém (bylo #7B8284 = 4.4) */
  --line:         rgba(255,255,255,.14) !important;
  --line-soft:    rgba(255,255,255,.07) !important;

  --accent:       #5EF4C7 !important;
  --accent-deep:  #46E6BD !important;
  --on-accent:    #06231C !important;

  --nav-bg:          rgba(19,23,25,.55) !important;
  --nav-bg-scrolled: rgba(17,20,22,.85) !important;
  --surface-ink:     #31383F !important;
  --surface-fg:      #ECEEED !important;
  --contact-bg:      #5EF4C7 !important;   /* mint footer (dark) */
  --contact-fg:      #15191B !important;
  --chip-bg:         rgba(26,31,33,.82) !important;
  --shadow:          rgba(0,0,0,.6) !important;
  color-scheme: dark;
}

/* smooth, brief cross-theme transition (added by JS only when toggling) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  transition: background-color .5s var(--e-out), color .5s var(--e-out),
              border-color .5s var(--e-out), fill .5s var(--e-out),
              stroke .5s var(--e-out), box-shadow .5s var(--e-out) !important;
}

html[data-theme="dark"] .featured__media{ background:#0a1411; }

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-sans);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }

/* ---------- Focus-visible: konzistentní, brandový, jen při klávesnicové navigaci ----------
   :focus-visible se nezobrazuje při kliknutí myší/dotyku → nulový vliv na běžné prohlížení.
   Akcentní prstenec s odsazením (kontrast ≥3:1 vůči papíru i tmavému pozadí). */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
/* na akcentní zelené ploše (footer) je zelený prstenec neviditelný → světlý */
.contact a:focus-visible, .contact button:focus-visible{ outline-color:var(--contact-fg); }

/* When Lenis is active */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- Layout helpers ---------- */
.wrap{
  width:100%;
  max-width:calc(var(--colw) + 2 * var(--pad));
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{ position:relative; padding-block:clamp(80px,12vh,160px); }

.eyebrow{
  font-family:var(--ff-mono);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow .idx{ color:var(--accent-deep); }   /* hlubší zelená = AA na malém textu na papíru */

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding-bottom:clamp(32px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.02;
}
.section-head .note{
  max-width:38ch; color:var(--ink-soft); font-size:1rem; line-height:1.55; font-weight:300;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border-radius:100px;
  font-size:1rem; font-weight:400; letter-spacing:.01em;
  white-space:nowrap;
  position:relative; overflow:hidden;
  transition:transform .5s var(--e-out), color .45s var(--e-out), background-color .45s var(--e-out);
  will-change:transform;
}
.btn .ico{ width:16px; height:16px; flex:0 0 auto; transition:transform .5s var(--e-out); }
.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn--accent:hover{ background:var(--accent-deep); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn:hover .ico{ transform:translate(3px,-3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background-color:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:transform .6s var(--e-out), background-color .5s ease, box-shadow .5s ease, padding .5s ease, backdrop-filter .5s ease;
}
.nav.scrolled{
  background-color:var(--nav-bg-scrolled);
  box-shadow:0 1px 0 var(--line-soft), 0 18px 40px -30px var(--shadow);
  padding-block:13px;
}
.nav.hidden{ transform:translateY(-110%); }
.nav__brand{ display:flex; align-items:center; gap:0; }
.brand-logo{ display:block; width:auto; }
.nav__brand .brand-logo{ height:22px; }
.brand-logo--light{ display:none; }
html[data-theme="dark"] .nav__brand .brand-logo--dark{ display:none; }
html[data-theme="dark"] .nav__brand .brand-logo--light{ display:block; }
.nav__links{ display:flex; align-items:center; gap:38px; }
.nav__links a{
  font-size:.97rem; position:relative; color:var(--ink-soft);
  transition:color .35s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,
.nav__links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.active{ color:var(--ink); }
.nav__cta{ display:flex; align-items:center; gap:16px; }
.nav__cta .btn{ padding:11px 20px; font-size:.95rem; min-width:158px; justify-content:center; }

/* theme toggle (sun / moon) */
.theme-toggle{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  position:relative; overflow:hidden; color:var(--ink);
  transition:background-color .4s var(--e-out), color .4s var(--e-out), border-color .4s var(--e-out), transform .35s var(--e-out);
}
.theme-toggle:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.theme-toggle:active{ transform:scale(.9); }
.theme-toggle .ti{ position:absolute; width:23px; height:23px; transition:opacity .45s var(--e-out), transform .6s var(--e-out); }
.theme-toggle .ti--moon{ opacity:1; transform:rotate(0) scale(1); }
.theme-toggle .ti--sun{ opacity:0; transform:rotate(-90deg) scale(.3); }
html[data-theme="dark"] .theme-toggle .ti--moon{ opacity:0; transform:rotate(90deg) scale(.3); }
html[data-theme="dark"] .theme-toggle .ti--sun{ opacity:1; transform:rotate(0) scale(1); }
.nav__burger{
  display:none; position:relative; place-items:center;
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  background:transparent; transition:background-color .4s var(--e-out), border-color .4s var(--e-out);
}
.nav__burger span{ display:block; width:19px; height:1.6px; background:var(--ink); position:relative; transition:opacity .2s ease; }
.nav__burger span::before, .nav__burger span::after{ content:""; position:absolute; left:0; width:19px; height:1.6px; background:var(--ink); transition:transform .45s var(--e-out); }
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }
html.menu-open .nav__burger{ border-color:var(--ink); }
html.menu-open .nav__burger span{ background:transparent; }
html.menu-open .nav__burger span::before{ transform:translateY(6px) rotate(45deg); }
html.menu-open .nav__burger span::after{ transform:translateY(-6px) rotate(-45deg); }

/* nav right cluster + language switcher */
.nav__end{ display:flex; align-items:center; gap:clamp(20px,3vw,34px); }
.lang{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; }
.lang__btn{
  display:inline-block;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.08em; line-height:1;
  color:var(--muted); position:relative; padding:2px 1px 5px; cursor:pointer;
  transition:color .35s ease;
}
.lang__btn::after{
  content:""; position:absolute; left:1px; right:1px; bottom:0; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--e-out);
}
.lang__btn:hover{ color:var(--ink-soft); }
.lang__btn.active{ color:var(--ink); }
.lang__btn.active::after{ transform:scaleX(1); }
.lang__sep{ font-family:var(--ff-mono); font-size:12px; color:var(--muted); opacity:.4; user-select:none; }

/* language swap fade */
main, footer.contact, #pd{ transition:opacity .26s var(--e-out); }
.lang-anim main, .lang-anim footer.contact, .lang-anim #pd{ opacity:.12; }

/* ============================================================
   HERO — headline + 5 service tiles peeking from the fold
   @1920×949: headline top 208 · tiles 288×500 @y530 · 81px below fold
   ============================================================ */
.hero{
  --peek: clamp(56px, 9vh, 84px);
  position:relative;
  min-height:calc(100svh + var(--peek));
  display:flex; flex-direction:column;
  background:var(--paper);
  overflow:clip;
}
/* wrapper is transparent to layout by default (desktop + mobile fallback);
   only becomes a real pinned box when JS adds .hero.pinned on mobile */
.hero__pin{ display:contents; }
.hero__inner{
  padding-top:calc(88px + clamp(56px, 12.6vh, 120px));
}
/* headline — desktop: single centred line "MARTIN POKORNÝ | Grafik & UX/UI Designer"
   split by a 4px accent divider (line-height tall, symmetric 60px gaps @1920);
   mobile (≤768) restores the stacked two-line layout with the left rule */
.hero__headline{ display:flex; align-items:stretch; justify-content:center; gap:clamp(14px, 1.25vw, 24px); }
.hero__rule{
  display:none;                              /* mobile-only left rule */
  flex:0 0 auto; width:4px; border-radius:0;
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--e-out) .12s;
}
.hero.in .hero__rule{ transform:none; }
.hero__title{
  display:flex; flex-direction:row; align-items:flex-start;
  gap:clamp(28px, 3.125vw, 60px);            /* 60px @1920, symmetric per Figma */
  font-weight:400;
  font-size:clamp(2.2rem, 3.334vw, 4rem);    /* 64px @1920 */
  line-height:1.265;                          /* 81px @64px */
  letter-spacing:0;
  color:var(--ink);
}
.hero__title .l{ display:block; overflow:hidden; padding-top:.14em; margin-top:-.14em; }
.hero__title .l > span{ display:block; }
.hero__title .l--name{ font-weight:500; text-transform:uppercase; }
/* vertical divider between name and role — same load reveal as the mobile rule */
.hero__divider{
  flex:0 0 auto; width:4px; height:1.265em;  /* exactly one line tall */
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--e-out) .12s;
}
.hero.in .hero__divider{ transform:none; }
/* desktop: headline vertically centred between the navbar and the tile tops
   (per final alignment PDF); flex spacing also guarantees clearance for the
   hover-lifted tile (−64px) — free space around headline is ≥120px on all
   sane viewport heights */
@media (min-width:1025px){
  .hero__inner{
    flex:1 1 auto;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:88px;                        /* fixed navbar height */
  }
  .hero .hero__tiles{ padding-top:0; }       /* inner spans exactly navbar → tile tops */
}

.hero__tiles{
  margin-top:auto;
  padding-top:clamp(48px, 6.5vh, 120px);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
}
.tile{
  position:relative;
  height:clamp(380px, 53vh, 500px);
  isolation:isolate;
  /* entrance: rise from below the fold */
  transform:translateY(103%);
  transition:transform 1.15s var(--e-out);
  will-change:transform;
}
.hero__tiles.in .tile{ transform:none; }
.hero__tiles.in .tile:nth-child(1){ transition-delay:.10s; }
.hero__tiles.in .tile:nth-child(2){ transition-delay:.18s; }
.hero__tiles.in .tile:nth-child(3){ transition-delay:.26s; }
.hero__tiles.in .tile:nth-child(4){ transition-delay:.34s; }
.hero__tiles.in .tile:nth-child(5){ transition-delay:.42s; }
/* visual box — grows 64px upward on hover, bottom edge stays anchored */
.tile__box{
  position:absolute; top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  transition:top .65s var(--e-out);
}
/* fallback fills while images load — Figma placeholder ramp */
.tile:nth-child(1) .tile__box{ background:#5E5E5E; }
.tile:nth-child(2) .tile__box{ background:#4E4E4E; }
.tile:nth-child(3) .tile__box{ background:#404040; }
.tile:nth-child(4) .tile__box{ background:#303030; }
.tile:nth-child(5) .tile__box{ background:#212121; }

.tile__media{ position:absolute; inset:0; z-index:0; }
.tile__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.72) contrast(1.02);
  transform:scale(1.02);
  transition:filter .9s var(--e-out), transform 1.1s var(--e-out);
  will-change:transform, filter;
}
/* tonal ramp: tiles get progressively deeper left → right */
.tile__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,16,17,.42) 0%, rgba(13,16,17,.16) 45%, rgba(13,16,17,.5) 100%);
  transition:opacity .8s var(--e-out);
}
.tile:nth-child(2) .tile__shade{ background-color:rgba(13,16,17,.10); }
.tile:nth-child(3) .tile__shade{ background-color:rgba(13,16,17,.18); }
.tile:nth-child(4) .tile__shade{ background-color:rgba(13,16,17,.26); }
.tile:nth-child(5) .tile__shade{ background-color:rgba(13,16,17,.34); }
.tile + .tile::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; z-index:3;
  background:rgba(255,255,255,.08);
}
.tile__label{
  position:absolute; top:24px; left:24px; z-index:2;
  /* rotated via pure transform (reads bottom-to-top, box top-left stays at
     top/left) — vertical writing-mode text fails to paint in iOS WebKit
     inside compositor-transformed layers (labels vanished on mobile scroll) */
  transform-origin:top left;
  transform:rotate(-90deg) translateX(-100%);
  font-size:clamp(21px, 1.667vw, 32px);      /* 32px @1920 */
  font-weight:400; line-height:1.25;
  color:#fff; white-space:nowrap;
  text-transform:uppercase;
  opacity:0; transition:opacity .9s var(--e-out) .5s, color .5s var(--e-out), top .65s var(--e-out);
}
.hero__tiles.in .tile__label{ opacity:1; }
/* arrow ↗ — appears above the label when the tile lifts (22px, centred on the 40px label column) */
.tile__arrow{
  position:absolute; top:32px; left:24px; z-index:2;
  width:40px; display:flex; justify-content:center;
  color:#fff; pointer-events:none;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--e-out), transform .65s var(--e-out);
}
.tile__arrow svg{ width:22px; height:22px; display:block; }
/* hover: colour floods in, image breathes, label warms to accent */
@media (hover:hover){
  .tile:hover .tile__media img{ filter:grayscale(0) brightness(.86) contrast(1); transform:scale(1.055); }
  .tile:hover .tile__shade{ opacity:.55; }
  .tile:hover .tile__label{ color:var(--accent); }
}
/* hover lift (desktop): box extends 64px upward, bottom stays — arrow fades in, label eases down */
@media (hover:hover) and (min-width:1025px){
  .tile:hover .tile__box{ top:-64px; }
  .tile:hover .tile__label{ top:78px; }
  .tile:hover .tile__arrow{ opacity:1; transform:none; transition-delay:.1s; }
}

/* light theme: hairlines between tiles read on white */
html:not([data-theme="dark"]) .tile + .tile::before{ background:rgba(255,255,255,.16); }

/* Large / tall external monitors (≥1000px viewport height — e.g. 27"/32").
   Without this the hero grows 1:1 with viewport height while the tiles stay
   frozen at their 500px cap, so all the extra height dumps into dead white
   space around the headline. Here the hero is bounded to a tight premium band
   and the tiles scale up proportionally, keeping the same balance a 14" MacBook
   (~900px tall — below this query, so untouched) already has. Placed after the
   base .tile rules so it wins on source order (media queries add no specificity). */
@media (min-width:1025px) and (min-height:1000px){
  /* .hero keeps its base min-height:calc(100svh + peek) — hero must ALWAYS
     fill at least the full viewport (+ tile peek past the fold), never less.
     That contract is untouched here; only the tiles grow to absorb the
     extra vertical space that used to dump into whitespace around the headline. */
  .hero__tiles{ max-width:min(1860px, 92vw); }   /* widen the row so tiles grow wider, not just taller */
  .tile{ height:auto; aspect-ratio:288 / 500; }  /* height follows width → keeps the design proportion */
}

/* scroll-driven horizontal motion of the mobile tile row (see mobile media block) */
@keyframes pd-tiles-x{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-1 * var(--pin-extra, 0px)), 0, 0); }
}

/* ============================================================
   WORK
   ============================================================ */
.work .section-head{ margin-bottom:clamp(40px,5vw,72px); }

.featured{
  position:relative; border-radius:0;
  background:transparent; color:var(--surface-fg);
  display:grid; grid-template-columns:1fr 1fr; min-height:min(72vh,640px);
  margin-bottom:clamp(20px,3vw,40px);
}
.featured__media{ position:relative; background:#0c1c17; border-radius:0; overflow:hidden; }
.featured__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; transition:transform 1.1s var(--e-out); }
.featured:hover .featured__media img{ transform:scale(1.06); }
.featured__body{ padding:clamp(28px,3.4vw,56px); display:flex; flex-direction:column; justify-content:space-between; gap:32px; background:#31383F; border-radius:0; }
.featured__tag{
  align-self:flex-start;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.45); padding:8px 14px; border-radius:100px;
}
.featured__title{ font-size:clamp(2rem,3.6vw,3.4rem); font-weight:400; letter-spacing:-.025em; line-height:1; }
.featured__meta{ display:flex; gap:40px; flex-wrap:wrap; margin-top:22px; }
.featured__meta div{ display:flex; flex-direction:column; gap:4px; }
.featured__meta dt{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,244,238,.5); }
.featured__meta dd{ font-size:1.05rem; }
.featured__cta{ display:inline-flex; align-items:center; gap:12px; font-weight:400; color:#fff; }
.featured__cta .circ{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(241,244,238,.3);
  display:grid; place-items:center; transition:.5s var(--e-out);
}
.featured:hover .featured__cta .circ{ background:var(--accent); border-color:var(--accent); transform:rotate(45deg); }
.featured__cta .circ svg{ width:17px; height:17px; }
.featured__cta .circ svg path{ transition:stroke .4s ease; }
/* arrow must stay visible on the accent hover fill (mint in dark, green in light) */
.featured:hover .featured__cta .circ svg path{ stroke:var(--on-accent); }

/* project grid */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,40px); }
.project{ position:relative; cursor:pointer; display:block; }
.project__media{
  position:relative; border-radius:0; overflow:hidden;
  aspect-ratio:4/3; background:transparent;
}
.project__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e-out); }
.project:hover .project__media img{ transform:scale(1.05); }
.project__num{
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em;
  background:var(--chip-bg); backdrop-filter:blur(6px);
  padding:9px 12px 6px; border-radius:100px; color:var(--ink);
}
.project__arrow{
  position:absolute; top:14px; right:14px; z-index:3;
  width:46px; height:46px; border-radius:50%; background:#ffffff;
  display:grid; place-items:center;
  transform:scale(.5) rotate(-30deg); opacity:0;
  transition:.55s var(--e-out);
}
.project:hover .project__arrow{ transform:scale(1) rotate(0); opacity:1; }
.project__arrow svg{ width:18px; height:18px; }
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .project:hover .project__arrow svg path{ stroke:#16150F; }
}
.project__info{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:18px 4px 0; }
.project__title{ font-size:1.45rem; font-weight:400; letter-spacing:-.02em; }
.project__cat{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }

/* image-slot styling (shadow parts) */
.project__media image-slot{ width:100%; height:100%; color:var(--ink-soft); font-family:var(--ff-mono); font-size:13px; }
.project__media image-slot::part(frame){
  background:repeating-linear-gradient(135deg, var(--card) 0 20px, var(--paper-2) 20px 40px);
  border-radius:0;
}

/* motion toggle */
.no-motion .tile,
.no-motion .tile__media img,
.no-motion .featured__media img{ transition:none !important; transform:none !important; }

/* tonal project placeholder */
.proj-ph{ width:100%; height:100%; background:var(--card); display:grid; place-items:center; position:relative; overflow:hidden; border-radius:inherit; }
.proj-ph::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 26px, rgba(22,21,15,.025) 26px 52px); }
.proj-ph__name{ position:relative; font-size:clamp(2.6rem,6vw,4.4rem); font-weight:300; letter-spacing:-.03em; color:rgba(22,21,15,.14); transition:color .6s var(--e-out); }
html[data-theme="dark"] .proj-ph__name{ color:rgba(236,238,237,.13); }
.project:hover .proj-ph__name{ color:rgba(22,21,15,.22); }
html[data-theme="dark"] .project:hover .proj-ph__name{ color:rgba(236,238,237,.2); }

/* ============================================================
   ABOUT — portrait 424×524 · text column 755 · gap 101 @1920
   ============================================================ */
.about{ background:var(--paper); }
.about__grid{
  display:grid; grid-template-columns:minmax(280px, 424fr) minmax(0, 755fr);
  gap:clamp(48px, 7vw, 101px); align-items:start;
}
.about__portrait .img{
  border-radius:0; overflow:hidden; width:100%; aspect-ratio:424/524; background:var(--card);
}
.about__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform:scale(1.24); transform-origin:50% 34%; display:block; }
.about__body h2{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:400; letter-spacing:-.03em; line-height:1.08; margin-bottom:30px; }
.about__body p{ font-size:clamp(1.05rem,1.5vw,1.26rem); line-height:1.62; color:var(--ink-soft); margin-bottom:22px; max-width:60ch; font-weight:300; }
.about__body p strong{ color:var(--ink); font-weight:400; }
.about__body .btn{ margin-top:16px; }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%; display:flex; align-items:center; gap:24px;
  padding:clamp(22px,2.6vw,34px) 0; text-align:left;
}
.acc__idx{ font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em; color:var(--accent); flex:0 0 auto; width:42px; }
.acc__title{ flex:1; font-size:clamp(1.4rem,2.8vw,2.1rem); font-weight:400; letter-spacing:-.02em; transition:color .4s ease, transform .5s var(--e-out); }
.acc__sign{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.acc__sign::before, .acc__sign::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:transform .45s var(--e-out), background-color .4s ease;
}
.acc__sign::before{ width:16px; height:1.6px; }
.acc__sign::after{ width:1.6px; height:16px; }
.acc__item.open .acc__sign::after{ transform:translate(-50%,-50%) scaleY(0); }
.acc__item.open .acc__title{ color:var(--accent); transform:translateX(6px); }
.acc__item:hover .acc__title{ transform:translateX(6px); }
.acc__panel{ overflow:hidden; height:0; transition:height .5s var(--e-io); }
.acc__inner{ padding:0 0 clamp(26px,3vw,38px) 66px; }
.acc__inner p{ color:var(--ink-soft); font-size:1.08rem; line-height:1.62; max-width:54ch; font-weight:300; }

.faq{ background:var(--paper); }
.faq .acc__title{ font-size:clamp(1.15rem,2vw,1.5rem); }

/* ============================================================
   CONTACT / FOOTER — accent surface, ink typography
   light: brand green + light text · dark: mint + charcoal text
   ============================================================ */
.contact{ background:var(--contact-bg); color:var(--contact-fg); position:relative; overflow:hidden; }
.contact .wrap{ position:relative; z-index:2; }
.contact__top{ padding-block:clamp(72px,11vh,150px); display:grid; grid-template-columns:1.4fr .6fr; gap:60px; align-items:flex-end; }
.contact__lead{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.contact h2{ font-size:clamp(2.6rem,8vw,6.6rem); font-weight:300; letter-spacing:-.035em; line-height:.94; margin:22px 0 34px; }
.contact__mail{
  display:inline-flex; align-items:center; gap:14px; font-size:clamp(1.05rem,1.9vw,1.4rem); font-weight:400;
  padding:15px 28px; border-radius:100px;
  background:#15191B; color:#FFFFFF; border:1px solid #15191B;
  transition:background-color .6s var(--e-out), color .6s var(--e-out), border-color .6s var(--e-out);
}
.contact__mail:hover{ background:#FFFFFF; color:#15191B; border-color:#FFFFFF; }
.contact__mail svg{ transition:transform .7s var(--e-out); }
.contact__mail:hover svg{ transform:translate(3px,-3px); }
.contact__side{ display:flex; flex-direction:row; gap:clamp(36px,4vw,58px); justify-self:end; }
.contact__col h3{ font-family:var(--ff-mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.contact__col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.contact__col a{ font-size:1.05rem; opacity:.75; position:relative; width:fit-content; transition:opacity .3s ease; }
.contact__col a:hover{ opacity:1; }
.contact__col a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--e-out); }
.contact__col a:hover::after{ transform:scaleX(1); transform-origin:left; }

.contact__bottom{
  border-top:1px solid currentColor;
  padding-block:30px 38px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
/* footer mark: dark mark on mint (dark mode), light mark on green (light mode) */
.contact__mark{ display:inline-flex; align-items:center; }
.contact__mark .brand-logo{ height:30px; opacity:.95; }
.contact__mark .brand-logo--dark{ display:none; }
.contact__mark .brand-logo--light{ display:block; }
html[data-theme="dark"] .contact__mark .brand-logo--dark{ display:block; }
html[data-theme="dark"] .contact__mark .brand-logo--light{ display:none; }
.contact__bottom .cp{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; opacity:.85; }
.contact__bottom .top-link{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid currentColor; border-radius:100px; padding:13px 21px;
  transition:background-color .5s var(--e-out), color .5s var(--e-out);
}
.contact__bottom .top-link:hover{ background:var(--contact-fg); color:var(--contact-bg); }

/* ============================================================
   Reveal animations
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1.05s var(--e-out), transform 1.05s var(--e-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-line]{ display:block; transform:translateY(115%); transition:transform 1s var(--e-out); }
.in [data-reveal-line], [data-reveal-line].in{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  [data-reveal-line]{ transform:none; }
  .tile{ transform:none; }
  .tile__label{ opacity:1; }
  .hero__rule{ transform:none; }
  .hero__divider{ transform:none; }
}

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor{
  display:none;
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  transform:translate(-50%,-50%); transition:width .35s var(--e-out), height .35s var(--e-out), background-color .35s, opacity .3s;
  mix-blend-mode:difference; opacity:0;
}
.cursor.lg{ width:80px; height:80px; background:var(--paper); }
.cursor__txt{
  display:none;                              /* custom cursor vypnut (dot i text) */
  position:fixed; top:0; left:0; z-index:9001; pointer-events:none;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  transition:opacity .3s, transform .4s var(--e-out);
}
.cursor__txt.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none){ .cursor,.cursor__txt{ display:none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav__links{ gap:26px; }
}
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .about__portrait{ max-width:380px; }
}
@media (max-width:900px){
  body{ font-size:17px; }
  .featured{ grid-template-columns:1fr; }
  .featured__media{ min-height:340px; }
  .about__portrait{ max-width:420px; }
  .acc__inner{ padding-left:0; }
  .contact__top{ grid-template-columns:1fr; align-items:flex-start; gap:40px; }
  .contact__side{ flex-direction:row; gap:clamp(28px,9vw,64px); justify-self:start; }
  .contact__col{ flex:0 0 auto; }
}
@media (max-width:1024px){
  .nav__links a{ display:none; }
  .nav__cta{ display:none; }
  .nav__end > .lang{ display:none; }
  .nav__end > .theme-toggle{ display:none; }
  .nav--detail .nav__end > .theme-toggle{ display:grid; }
  .nav__end{ gap:0; }
  .nav--detail .nav__end{ gap:6px; }
  button.nav__burger{ display:grid; }
  a.nav__burger{ display:none; }
  .grid{ grid-template-columns:1fr; }
  .section-head{ align-items:flex-start; }
  .project__title{ font-size:1.3rem; }
  .section{ padding-block:clamp(52px,9vh,78px); }
  /* smaller portrait on mobile, always centred */
  .about__portrait{ max-width:clamp(200px, 62vw, 250px); margin-inline:auto; }

  /* ---- mobile hero: headline left-aligned, tiles as snap strip from the fold ---- */
  .hero{ --peek: clamp(44px, 7.5vh, 64px); }
  .hero__inner{ padding-top:calc(64px + clamp(14px, 3vh, 26px)); }
  /* mobile keeps the stacked two-line headline with the left rule (unchanged) */
  .hero__headline{ justify-content:flex-start; }
  .hero__rule{ display:block; }
  .hero__divider{ display:none; }
  .hero__title{ flex-direction:column; align-items:stretch; gap:0; font-size:clamp(1.65rem, 8.1vw, 2.6rem); line-height:1.22; }
  .hero__title .l + .l{ margin-top:clamp(10px, 3vw, 18px); }
  .hero__tiles{
    display:flex; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);
    padding-top:clamp(36px, 5.5vh, 64px);
    scrollbar-width:none;
  }
  .hero__tiles::-webkit-scrollbar{ display:none; }
  .tile{
    flex:0 0 clamp(196px, 60vw, 248px);
    height:clamp(320px, 46vh, 420px);
    scroll-snap-align:start;
  }
  .tile__label{ top:20px; left:20px; font-size:clamp(18px, 5.6vw, 22px); }
  /* iOS WebKit: rasterize each tile as ONE compositor layer — image, shade and
     label together. Per-image will-change (desktop hover optimisation) split
     tiles into separate layers inside the scroll-driven row and Safari dropped
     the text layers; flattening makes the label physically inseparable from
     the image, so it can never vanish mid-scroll. */
  .tile__box{ transform:translateZ(0); }
  .tile__media img{ will-change:auto; }

  /* ---- pinned horizontal scroll (JS-activated on mobile, non-reduced-motion) ----
     hero grows taller; inner content sticks to the viewport while the tile row
     translates horizontally in sync with vertical scroll, then releases. ---- */
  .hero.pinned{
    height:calc(100svh + var(--pin-extra, 0px));
    min-height:0;
    overflow:visible;
  }
  .hero.pinned .hero__pin{
    display:flex; flex-direction:column;
    position:sticky; top:0;
    height:100svh; overflow:hidden;
  }
  /* Compositor-driven tile motion (Safari 26+/iOS 26, Chrome 115+):
     the horizontal translation is bound directly to the scroll position via
     a scroll-driven animation, so it runs on the compositor thread — perfectly
     locked to native 120 Hz scrolling with zero main-thread work. Browsers
     without support fall back to the JS rAF loop (see app.js). */
  @supports (animation-timeline: scroll()){
    .hero.pinned.hero--sda .hero__tiles{
      animation:pd-tiles-x linear both;
      animation-timeline:scroll(root block);
      /* animation-range (0 → pin distance) is set inline by app.js */
    }
  }

  /* headline vertically centred in the space between the navbar and the tiles */
  .hero.pinned .hero__inner{
    flex:1 1 auto;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:82px;        /* = navbar height, so centring is between nav and tiles */
    padding-bottom:0;
  }
  .hero.pinned .hero__tiles{
    flex:0 0 auto;
    overflow:visible; overscroll-behavior:auto;
    scroll-snap-type:none;
    will-change:transform;
    touch-action:pan-y;
  }
  .hero.pinned .tile{ scroll-snap-align:none; }

  .contact__lead{ display:none; }
  .contact__top{ padding-block:clamp(52px,9vh,82px); }
  /* footer bottom: stacked; "Nahoru" keeps the same outlined pill as desktop */
  .contact__bottom{ flex-direction:column; align-items:flex-start; gap:22px; border-top:1px solid currentColor; padding-block:26px 34px; }
  .contact__bottom .top-link{ order:-1; }
  .contact__bottom .contact__mark{ order:1; }
  .contact__bottom .cp{ order:2; }
}
@media (max-width:420px){
  .nav--detail .nav__back span{ display:none; }
}
/* short viewports: keep headline clear of tiles (mobile only — desktop centres via flex) */
@media (max-width:1024px) and (max-height:720px){
  .hero__inner{ padding-top:calc(72px + clamp(28px, 6vh, 56px)); }
}
@media (max-height:720px){
  .tile{ height:clamp(280px, 48vh, 420px); }
}
html.menu-open, html.menu-open body{ overflow:hidden; }

/* show mobile-menu controls only inside the menu */
.mobile-menu__controls{ display:none; }

/* Mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(96px,17vh,150px) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-1.5%);
  transition:opacity .5s var(--e-out), transform .6s var(--e-out), visibility .5s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu__nav{ display:flex; flex-direction:column; }
.mobile-menu a.mm-link{
  display:flex; align-items:baseline; justify-content:flex-end; gap:16px; text-align:right;
  font-size:clamp(2.1rem,10vw,3.2rem); font-weight:300; letter-spacing:-.03em;
  padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink);
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out), color .3s ease;
}
.mobile-menu a.mm-link .mm-num{ display:none !important; }
.mobile-menu.open a.mm-link{ opacity:1; transform:none; }
.mobile-menu.open a.mm-link:nth-child(1){ transition-delay:.16s; }
.mobile-menu.open a.mm-link:nth-child(2){ transition-delay:.22s; }
.mobile-menu.open a.mm-link:nth-child(3){ transition-delay:.28s; }
.mobile-menu.open a.mm-link:nth-child(4){ transition-delay:.34s; }
.mobile-menu__foot{
  margin-top:auto; padding-top:34px; display:flex; flex-direction:column; gap:22px;
  opacity:0; transition:opacity .6s var(--e-out) .42s;
}
.mobile-menu.open .mobile-menu__foot{ opacity:1; }
.mobile-menu__cta{
  display:inline-flex; align-self:flex-end; align-items:center; gap:12px;
  background:var(--accent); color:var(--on-accent); padding:16px 28px; border-radius:100px;
  font-size:1.05rem; transition:background-color .4s var(--e-out);
}
.mobile-menu__cta svg{ width:16px; height:16px; transition:transform .5s var(--e-out); }
.mobile-menu__cta:active svg{ transform:translate(3px,-3px); }
.mobile-menu__social{ display:flex; justify-content:center; gap:32px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.mobile-menu__social a{ color:var(--ink-soft); min-height:44px; display:inline-flex; align-items:center; }

/* mobile menu utility controls (lang + theme) */
@media (max-width:1024px){
  .mobile-menu__controls{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding-top:24px; margin-top:4px; border-top:1px solid var(--line);
  }
}
.mobile-menu__controls .lang{ display:inline-flex; align-items:center; gap:6px; }
.mobile-menu__controls .lang__btn{
  min-width:52px; min-height:44px; padding:0 14px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.08em;
  color:var(--muted); border:1px solid var(--line); background:transparent;
  transition:color .3s ease, background-color .3s ease, border-color .3s ease;
}
.mobile-menu__controls .lang__btn.active{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.mobile-menu__controls .lang__sep{ display:none; }
.mobile-menu__controls .lang__btn::after{ display:none !important; content:none !important; }
.mobile-menu__controls .theme-toggle{
  width:48px; height:48px; flex:0 0 auto;
  display:grid; place-items:center; gap:0;
}
.mobile-menu__controls .theme-label{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.mobile-menu__theme{ display:inline-flex; align-items:center; gap:12px; }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.nav__back{ display:inline-flex; align-items:center; gap:9px; font-size:.97rem; color:var(--ink-soft); transition:color .3s ease; }
.nav__back:hover{ color:var(--ink); }
.nav__back svg{ width:15px; height:15px; transition:transform .45s var(--e-out); }
.nav__back:hover svg{ transform:translateX(-4px); }

.pd-hero{ padding-top:clamp(130px,18vh,190px); padding-bottom:clamp(40px,6vw,70px); }
.pd-hero__cat{ display:flex; align-items:center; gap:14px; }
.pd-hero__cat .ln{ height:1px; width:48px; background:var(--line); }
.pd-title{ font-size:clamp(2.8rem,9vw,7rem); font-weight:300; letter-spacing:-.04em; line-height:.96; margin:24px 0 0; text-transform:uppercase; }
.pd-lead{ font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:300; line-height:1.5; color:var(--ink-soft); max-width:52ch; margin-top:30px; }
.pd-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(40px,5vw,64px); padding-top:34px; border-top:1px solid var(--line); }
.pd-meta dt{ font-family:var(--ff-mono); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.pd-meta dd{ font-size:1.05rem; font-weight:400; }

.pd-figure{ width:100%; border-radius:0; overflow:hidden; background:var(--card); aspect-ratio:16/9; }
.pd-figure image-slot{ width:100%; height:100%; color:var(--ink-soft); font-family:var(--ff-mono); }
.pd-figure image-slot::part(frame){ background:repeating-linear-gradient(135deg, var(--card) 0 24px, var(--paper-2) 24px 48px); border-radius:0; }

.pd-block{ display:grid; grid-template-columns:0.42fr 1fr; gap:clamp(30px,6vw,90px); align-items:start; padding-block:clamp(56px,8vw,104px); }
.pd-block + .pd-block{ border-top:1px solid var(--line); }
.pd-block__label{ font-family:var(--ff-mono); font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); padding-top:8px; }
.pd-block__body h2{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400; letter-spacing:-.025em; line-height:1.1; margin-bottom:22px; }
.pd-block__body p{ font-size:clamp(1.05rem,1.4vw,1.22rem); font-weight:300; line-height:1.65; color:var(--ink-soft); margin-bottom:18px; max-width:62ch; }
.pd-block__body p strong{ color:var(--ink); font-weight:500; }
.pd-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.pd-tags span{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); border-radius:100px; padding:8px 15px; color:var(--ink-soft); }

.pd-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); padding-bottom:clamp(40px,6vw,80px); }
.pd-gallery .pd-figure{ aspect-ratio:4/3; }
.pd-gallery .pd-figure.wide{ grid-column:1 / -1; aspect-ratio:16/8; }

.pd-next{ border-top:1px solid var(--line); }
.pd-next a{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:clamp(48px,7vw,96px); }
.pd-next__lab{ font-family:var(--ff-mono); font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.pd-next__title{ font-size:clamp(2.2rem,6vw,4.6rem); font-weight:400; letter-spacing:-.035em; line-height:1; text-transform:uppercase; transition:transform .55s var(--e-out), color .4s ease; }
.pd-next a:hover .pd-next__title{ transform:translateX(14px); color:var(--accent); }
.pd-next__arrow{ flex:0 0 auto; width:clamp(60px,7vw,88px); height:clamp(60px,7vw,88px); border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.55s var(--e-out); }
.pd-next a:hover .pd-next__arrow{ background:var(--accent); border-color:var(--accent); transform:rotate(45deg); }
.pd-next__arrow svg{ width:24px; height:24px; }
.pd-next__arrow svg path{ stroke:var(--ink); }
.pd-next a:hover .pd-next__arrow svg path{ stroke:var(--on-accent); }

@media (max-width:900px){
  .pd-meta{ grid-template-columns:1fr 1fr; gap:28px 24px; }
  .pd-block{ grid-template-columns:1fr; gap:18px; }
  .pd-block__label{ padding-top:0; }
  .pd-gallery{ grid-template-columns:1fr; }
  .pd-gallery .pd-figure.wide{ aspect-ratio:4/3; }
}