/* Work page only. Tokens come from site.css. Only transform and opacity are animated. */

/* ---------- project rows ---------- */
.work-section .section-lede,#concepts .section-lede{text-wrap:pretty}
.work-section .section-head{margin-bottom:clamp(20px,3vw,36px)}
.work-row{position:relative;border-top:1px solid var(--line);padding:clamp(40px,5.5vw,80px) 0}
.work-row-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(26px,3.4vw,44px)}
.work-name{font-family:var(--display);font-weight:800;font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.work-tags .tag{display:block;margin:0}
.work-topic{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.work-text{font-size:clamp(1.02rem,.98rem + .25vw,1.18rem);line-height:1.55;color:var(--ink-3);max-width:520px}
.work-visit{display:inline-flex;align-items:center;gap:10px;margin-top:18px}
.work-visit .i-arrow{transition:transform .25s var(--ease)}
.work-visit:hover .i-arrow{transform:translateX(4px)}
/* the link stretches over the whole row so the screenshots are one big target; the words stay selectable above it */
.work-visit::after{content:"";position:absolute;inset:0;z-index:1}
.work-name,.work-tags,.work-text{position:relative;z-index:2}

/* ---------- media: framed hero shot, with further tiles beside it for client work ---------- */
.work-media{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.3vw,18px)}
/* backdrop panel that holds the framed screenshot */
.work-stage{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(14px,4.2vw,64px) clamp(14px,4.2vw,64px) 0;overflow:hidden}
.work-row--flip .work-stage,.work-row--half:nth-child(even) .work-stage{background:var(--blue-soft)}
.work-shot{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);border-radius:clamp(14px,1.6vw,22px);background:var(--paper-2)}
.work-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .9s var(--ease)}
.work-media--depth{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-media--depth .work-stage{grid-column:1 / -1}

/* group heading and the pair of studio projects */
.work-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;border-top:1px solid var(--line);padding:clamp(28px,3.4vw,44px) 0}
.work-group-text{color:var(--muted);font-size:1.02rem}
.work-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,44px)}
.work-row--half{padding:clamp(28px,3.4vw,44px) 0 clamp(36px,4.5vw,60px)}
.work-row--half:last-child{padding-bottom:0}
.work-row--half:first-child{border-top:0;padding-top:0}

/* ---------- browser frame, drawn in CSS ---------- */
.browser{max-width:960px;margin-inline:auto;background:var(--ink);border-radius:16px 16px 0 0;padding:0 6px;box-shadow:0 40px 70px -40px rgba(11,13,20,.55);transition:transform .9s var(--ease)}
.browser-bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 10px}
.browser-dots{display:flex;gap:7px;flex:none}
.browser-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.26)}
.browser-dots i:first-child{background:var(--yellow)}
.browser-url{flex:0 1 380px;min-width:0;margin-inline:auto;padding:5px 16px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);font-size:13px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-bar::after{content:"";flex:none;width:44px}
/* every screenshot is cropped from the top to one shape so the frames match down the page */
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:4px 4px 0 0;background:var(--paper-2)}

/* ---------- hover: the shots dim and a pill appears in the middle ---------- */
.work-stage::after,.work-shot::after,.concept-shot::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .3s ease;pointer-events:none}
.work-pill{position:absolute;left:50%;top:50%;z-index:3;display:none;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:1rem;line-height:1;white-space:nowrap;box-shadow:0 24px 50px -12px rgba(11,13,20,.6);opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .25s ease,transform .25s var(--ease);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .work-pill{display:inline-flex}
  .work-row:has(.work-visit:hover) .work-stage::after,.work-row:has(.work-visit:hover) .work-shot::after{opacity:.5}
  .work-row:has(.work-visit:hover) .work-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .work-row:has(.work-visit:hover) .browser{transform:translateY(-8px)}
  .work-row:has(.work-visit:hover) .work-shot img{transform:scale(1.04)}
  .concept-card:hover .concept-shot::after{opacity:.5}
  .concept-card:hover .concept-shot--more::after{opacity:.3}
  .concept-card:hover .work-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .concept-card:hover .concept-shot img{transform:scale(1.04)}
  .concept-card:hover::before{opacity:1}
  .concept-card:hover .concept-go-icon{transform:translateX(5px)}
}

/* ---------- concepts ---------- */
.concept-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,32px)}
.concept-card{position:relative;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line-light);border-radius:calc(var(--radius) + 8px);padding:clamp(10px,1.3vw,18px)}
/* yellow ring, faded in on hover and keyboard focus */
.concept-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--yellow);opacity:0;transition:opacity .3s ease;pointer-events:none}
.concept-card:focus-within::before{opacity:1}
.concept-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.concept-shot{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:clamp(12px,1.4vw,18px);background:var(--ink)}
.concept-shot--lead{grid-column:1 / -1}
.concept-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .9s var(--ease)}
.concept-shot .tag{position:absolute;left:12px;bottom:12px;z-index:2;margin:0;box-shadow:0 4px 14px rgba(11,13,20,.3)}
.concept-shot--more .tag{left:8px;bottom:8px;padding:4px 9px;font-size:11px}
.concept-body{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);padding:clamp(20px,2.2vw,30px) clamp(8px,1.2vw,16px) clamp(12px,1.4vw,18px)}
.concept-kind{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.concept-name{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.3rem + 1.9vw,2.9rem);line-height:1;letter-spacing:-.04em;margin-top:10px;text-wrap:balance}
.concept-text{font-size:clamp(1rem,.97rem + .2vw,1.12rem);line-height:1.55;color:rgba(255,255,255,.76);max-width:560px;text-wrap:pretty}
.concept-info{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.concept-go{display:inline-flex;align-items:center;gap:14px;margin-top:auto;padding-top:clamp(16px,1.8vw,22px);font-weight:700;font-size:1.02rem;color:#fff;text-decoration:none}
.concept-go::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit}
.concept-go-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--ink);transition:transform .25s var(--ease)}

@media (min-width:900px){
  /* client rows: stage on one side, two tiles stacked on the other, sharing one height */
  .work-media--depth{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
  .work-media--depth .work-stage{grid-column:1;grid-row:1 / span 2}
  .work-media--depth .work-shot{grid-column:2;aspect-ratio:auto}
  .work-row--flip .work-media--depth{grid-template-columns:minmax(0,1fr) minmax(0,2.05fr)}
  .work-row--flip .work-media--depth .work-stage{grid-column:2}
  .work-row--flip .work-media--depth .work-shot{grid-column:1}
  .work-media--depth .work-stage{padding:clamp(28px,3.4vw,52px) clamp(28px,3.4vw,52px) 0}

  .work-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-row--half{border-top:0;padding-top:0;padding-bottom:0;display:flex;flex-direction:column}
  .work-row--half .work-row-head{flex:1;align-content:start}
  .work-row--half .work-row-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .work-row--half .work-name{font-size:clamp(1.8rem,1.1rem + 1.8vw,2.6rem)}
  .work-row--half .work-stage{padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0}

  .concept-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* wide feature: lead tile with the two further tiles stacked beside it */
  .concept-card--wide{grid-column:1 / -1}
  .concept-card--wide .concept-media{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
  .concept-card--wide .concept-shot--lead{grid-column:1;grid-row:1 / span 2}
  .concept-card--wide .concept-shot--more{grid-column:2;aspect-ratio:auto}
  .concept-card--wide.concept-card--flip .concept-media{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .concept-card--wide.concept-card--flip .concept-shot--lead{grid-column:2}
  .concept-card--wide.concept-card--flip .concept-shot--more{grid-column:1}
  .concept-card--wide .concept-body{flex-direction:row;justify-content:space-between;gap:clamp(24px,4vw,56px)}
  .concept-card--wide .concept-body>*{flex:1}
  .concept-card:not(.concept-card--wide) .concept-body{flex:1}
}
@media (min-width:1100px){
  /* the text moves beside the images */
  .concept-card--wide{flex-direction:row;align-items:stretch}
  .concept-card--wide.concept-card--flip{flex-direction:row-reverse}
  .concept-card--wide .concept-media{flex:0 0 64%;align-self:center}
  .concept-card--wide .concept-body{flex:1;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(14px,1.6vw,24px) clamp(22px,2.8vw,44px)}
  .concept-card--wide .concept-body>*{flex:none}
  .concept-card--wide .concept-name{font-size:clamp(2.2rem,1.2rem + 2.4vw,3.6rem)}
}

@media (max-width:899px){
  .work-row-head{grid-template-columns:1fr;align-items:start}
}
@media (max-width:799px){
  .browser{border-radius:12px 12px 0 0;padding:0 4px}
  .browser-bar{height:34px;gap:10px}
  .browser-dots i{width:8px;height:8px}
  .browser-bar::after{width:0}
  .browser-url{font-size:12px;padding:3px 12px}
  .concept-shot .tag{left:8px;bottom:8px;padding:4px 9px;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .browser,.work-shot img,.concept-shot img,.concept-go-icon,.work-visit .i-arrow{transition:none;transform:none!important}
  .work-pill{transition:none;transform:translate(-50%,-50%)!important}
}