/* Igor Andrić — the CTA "Meet Igor offstage" and the footer (locked 27 Sep 2026, from the CTA exploration:
   variant T "Harmonika", links as the list, phone version 1 "Skrol").
   Left, on the same axis as every other heading: the heading, the invitation and the three networks.
   Right: six private pictures as tall strips, one open; the one under the cursor opens. On a phone the strips
   become bands down the page and the band at the middle of the screen is the open one (cta.js).
   The footer is its own section: the name and the year in two lines at H1, the nav, the legal row.
   Tokens and fonts come from site.css, the arrow from arrows.css. */

/* ---------------------------------------------------------------- the CTA */
.cta{position:relative;z-index:1;padding:calc(var(--nav-h) + 72px) var(--gut) 16vh}
.cta-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 16px;align-items:start}
/* the left column is as tall as the strips (align-self:stretch) and spreads its content space-between
   (Lazar, 27 Sep): the heading and the invitation stand on the top edge of the pictures, the networks on
   their bottom edge */
.cta-l{grid-column:1 / span 5;align-self:stretch;display:flex;flex-direction:column}
.cta-r{grid-column:7 / span 6;position:relative;height:min(76vh,720px)}

/* H3 (27 Sep, was H4; H2 does not fit beside the pictures — "MEET IGOR" needs ~556px, the column is 541px
   at 1440). Both lines are one colour and one weight (Lazar). */
.cta-title{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink)}
.cta-title span{display:block}
/* 5 Oct (Lazar: the gap under the heading halved, or a third less): --sp-6 → --sp-2. What the eye sees is the ink
   gap, leading included — 43 → 27px at 1440, 38 → 22px at 385, about 40% less on every width */
.cta-sub{margin-top:var(--sp-2);font-weight:var(--fw-semi);color:var(--mute);max-width:38ch}

/* the networks: the names alone; the arrow draws itself out on hover. margin-top:auto pushes them to the
   bottom of the column — the space between the heading and the links */
.cta-links{list-style:none;margin:auto 0 0;padding:var(--sp-12) 0 0;display:flex;flex-direction:column;gap:var(--sp-4)}
.cta-links a{display:inline-flex;align-items:center;gap:0;transition:gap .4s cubic-bezier(.2,.8,.2,1)}
.cta-links .nm{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink)}
.cta-links .arrow{width:0;opacity:0;transition:width .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.cta-links .arrow::after{right:0;transform:translateY(-50%) rotate(45deg)}
.cta-links a:hover{gap:18px}
.cta-links a:hover .arrow{width:40px;opacity:1}
.cta-links a:focus{outline:none}
.cta-links a:focus-visible{outline:1px solid var(--mute);outline-offset:6px}

/* the accordion: six strips, one open; the rest are veiled in the page colour like the gallery thumbnails */
.akk{position:absolute;inset:0;display:flex;gap:16px}
.ak{position:relative;margin:0;flex:1 1 0;min-width:0;overflow:hidden;--veil:.45;
  transition:flex-grow .9s cubic-bezier(.16,1,.3,1)}
.ak.is-open{flex-grow:5;--veil:.04}
.ak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  filter:saturate(.92) contrast(1.03);-webkit-user-drag:none;user-select:none}
.ak::after{content:'';position:absolute;inset:0;background:var(--bg);opacity:var(--veil);pointer-events:none;
  transition:opacity .6s ease}

/* ---------------------------------------------------------------- the footer */
.ftr{position:relative;z-index:1;overflow:hidden;padding:18vh var(--gut) 40px}
/* the ambient colour as a large blurred pool in the bottom right — never a readable shape */
.ftr::before{content:'';position:absolute;right:-26vw;bottom:-50vh;width:80vw;height:100vh;z-index:0;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(108,61,31,1),rgba(108,61,31,.55) 45%,rgba(108,61,31,0));
  filter:blur(60px)}
.ftr>*{position:relative;z-index:1}
/* H1 by size only — the page's one <h1> stays the name in the hero */
.ftr-name{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--ink);line-height:.92;white-space:nowrap}
.ftr-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:24px 40px;margin-top:64px}
.ftr-nav{display:flex;flex-wrap:wrap;gap:12px clamp(28px,3.2vw,52px)}
/* hover (6 Oct): the nav rolls its letters like the bar at the top (.ftr-nav a is in ROLL_SEL, site.js) — the
   movement is the feedback, so there is no dimming any more */
.ftr-nav a{font-weight:var(--fw-bold);letter-spacing:.012em;text-transform:uppercase;color:var(--ink)}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;max-width:none;font-weight:var(--fw-semi);color:var(--mute)}
/* the small links are too small to roll: a 1px line draws itself under them from the left and leaves to the right
   (the position jumps while the line is 0 or 100% wide, so only the width is ever seen to move) */
.ftr-legal a{color:var(--mute);
  background:linear-gradient(currentColor,currentColor) no-repeat 100% calc(100% - .15em) / 0 1px;
  transition:color .25s ease,background-size .5s cubic-bezier(.2,.8,.2,1)}
.ftr-legal .ftr-top{color:var(--ink)}
@media (hover:hover){ .ftr-legal a:hover{color:var(--ink);background-position-x:0;background-size:100% 1px} }
.ftr-legal a:focus-visible{color:var(--ink);background-position-x:0;background-size:100% 1px}
.ftr a:focus{outline:none}
.ftr a:focus-visible{outline:1px solid var(--mute);outline-offset:6px}

/* ---------------------------------------------------------------- responsive (5 Oct): 1024 and up is the desktop above,
   untouched. Below 1024 the strips beside the heading get thinner than a finger (26px at 768), so the section becomes
   one column on the same left axis: the heading, the invitation, the networks, then the pictures under them. All type
   stays on the fluid rem tokens (.text-h3, .text-h5, .text-body-l in the markup); every gap is a --sp step. */
@media (max-width:63.99em){            /* <1024, in em like the Events and Music breakpoints */
  .cta{padding-top:calc(var(--nav-h) + var(--sp-16))}
  .cta-l,.cta-r{grid-column:1 / -1}
  .cta-l{align-self:start}
  /* tablet: the desktop accordion at the full width of the page, as tall as on a laptop */
  .cta-r{margin-top:var(--sp-16);height:min(76vh,45rem)}
}
/* a finger needs ~44px: on touch each link takes the gap as its own padding (8 + 8 = the 16px gap), so the
   tap area grows to ~45px and the visible rhythm stays exactly the same */
@media (pointer:coarse){
  .cta-links{gap:0;padding-top:calc(var(--sp-12) - var(--sp-2));margin-bottom:calc(var(--sp-2) * -1)}
  .cta-links a{padding:var(--sp-2) 0}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:760px){
  .cta-r{margin-top:var(--sp-12);height:auto}
  /* six bands down the page; the open one takes half the box, each closed one a tenth */
  .akk{position:relative;inset:auto;flex-direction:column;gap:var(--sp-3);height:120vh}
  .ak img{object-position:50% 30%}
}
@media (prefers-reduced-motion:reduce){ .ak,.ak::after,.cta-links a,.cta-links .arrow,.ftr-legal a{transition:none} }

/* ---------------------------------------------------------------- the footer, responsive (6 Oct): 1024 and up is the
   desktop above, untouched. Below it the nav and the legal row no longer share a line — they would meet in the
   middle — so they stack on the left axis under the name: the nav, then the legal row as one line of links with
   "Back to top" on the right edge (where it stands on the desktop) and the copyright alone under them. The name
   (H1, 68px at 385) breaks where it must: IGOR / ANDRIĆ / 2026 © on a phone. Gaps are --sp steps. */
@media (max-width:63.99em){            /* <1024, the same breakpoint as the CTA above it */
  .ftr-name{white-space:normal}
  .ftr-row{flex-direction:column;align-items:flex-start;gap:var(--sp-12);margin-top:var(--sp-16)}
  .ftr-legal{align-self:stretch;gap:var(--sp-2) var(--sp-6)}
  .ftr-legal .ftr-top{margin-left:auto}
  .ftr-legal span{order:1;flex-basis:100%}
}
/* phone: five links in a row break 3 + 2 at random, so the nav becomes a list — one link a line, like the networks
   in the CTA above */
@media (max-width:35.99em){            /* <576 */
  .ftr{padding-bottom:var(--sp-8)}
  .ftr-row{gap:var(--sp-10);margin-top:var(--sp-12)}
  .ftr-nav{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
}
/* a finger needs ~44px: the nav gap becomes each link's own padding, the small links get an invisible margin —
   the visible rhythm stays the same */
@media (pointer:coarse){
  .ftr-nav{row-gap:0;margin:calc(var(--sp-2) * -1) 0}
  .ftr-nav a{padding:var(--sp-2) 0}
  .ftr-legal a{position:relative}
  .ftr-legal a::before{content:'';position:absolute;inset:calc(var(--sp-3) * -1) calc(var(--sp-2) * -1)}
}