/* Refinements, loaded by every page after the site's own styles. Nothing here changes the
   layout or the look: it tunes the type, the spacing and a few small interactions.
   Rules under html.rf need scripts/refine.js. */

/* ---------- type, everywhere ---------- */
body { font-kerning: normal; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
::selection { background: var(--ink); color: var(--ground); }
.big-statement { text-wrap: balance; }
.work-desc, .experience td { text-wrap: pretty; }
.experience, .work-counter { font-variant-numeric: tabular-nums; }

/* ---------- header: the initials open into the full name on hover ---------- */
.site-header .logo { display: inline-flex; align-items: baseline; white-space: pre; }
.logo-rest { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; font-weight: 500; vertical-align: bottom;
  transition: max-width .6s var(--ease-out), opacity .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .site-header .logo:hover { opacity: 1; }
  .site-header .logo:hover .logo-rest, .site-header .logo:focus-visible .logo-rest { max-width: 4.2em; opacity: 1; transition: max-width .6s var(--ease-out), opacity .45s ease .1s; }
}

/* ---------- buttons: a small press ---------- */
.cta { transition: background-color .3s ease, opacity .3s ease, transform .25s var(--ease-out); }
.cta:active { transform: scale(.975); }

/* ---------- project image: a very slight push in on hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .work-card img, .work-card video { transition: transform 1.4s var(--ease-out); }
  .work-card:hover img, .work-card:hover video { transform: scale(1.012); }
}

/* ---------- section lines draw in from the left as a section arrives ---------- */
html.rf .section { position: relative; border-top-color: transparent; }
html.rf .section::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out); }
html.rf .section.is-in::before { transform: none; }

/* ---------- about: the experience table ---------- */
.experience td:nth-child(1) { font-weight: 500; }
.experience td:nth-child(2) { color: var(--muted); }
.experience th { font-size: 14px; letter-spacing: .01em; }
.experience tbody tr { transition: opacity .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .experience tbody:hover tr:not(:hover) { opacity: .4; }
}

/* ---------- contact and footer links: the same underline as the menu, plus a small arrow ---------- */
.contact-links a { position: relative; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.contact-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.contact-links a::before { content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor; opacity: .22; }
.contact-links a:hover { color: var(--ink); }
.link-arrow { flex: none; width: 11px; height: 11px; transition: transform .45s var(--ease-out); }
.site-footer .text-button { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .contact-links a::after { transform: scaleX(0); transform-origin: 100% 50%; }
  .contact-links a:hover::after, .contact-links a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
  .contact-links a:hover .link-arrow.is-out { transform: translate(2px, -2px); }
  .contact-links a:hover .link-arrow.is-down { transform: translateY(3px); }
  .site-footer .text-button:hover { color: var(--ink); }
  .site-footer .text-button:hover .link-arrow { transform: translateY(-3px); }
}

/* ---------- desktop: hierarchy and rhythm ---------- */
@media (min-width: 701px) {
  /* hero: the name leads, the title sits a step back */
  .work-intro h1 { letter-spacing: -0.03em; }
  .work-intro p { margin-top: 22px; color: var(--muted); letter-spacing: -0.015em; }

  /* sections: even space above and below, labels a step back, and the label sits on
     the same baseline as the first line of the sentence next to it */
  .section { padding: 136px 0; }
  .section-grid { align-items: baseline; }
  .section-title { font-size: 18px; letter-spacing: 0; color: var(--muted); }
  .section-body { gap: 56px; }
  .big-statement { max-width: 22ch; font-size: clamp(40px, 3.5vw, 52px); line-height: 1.08; letter-spacing: -0.035em; }
  .experience td { padding-top: 16px; padding-bottom: 16px; }
  .experience th { padding-bottom: 14px; }
  .contact-links { gap: 8px 36px; }
  .site-footer .wrap { padding-top: 24px; padding-bottom: 24px; }
}

/* ---------- case studies ---------- */
.case-outcome, .chapter-text, .chapter-line, .scene-text, .impact-grid p { text-wrap: pretty; }
.case-lead, .chapter-title, .chapter-statement { text-wrap: balance; }
.case-meta, .impact-number { font-variant-numeric: tabular-nums; }

/* "All work": the chevron leans back on hover */
.back-link svg { transition: transform .45s var(--ease-out); }
.back-link:hover svg { transform: translateX(-4px); }

/* the lines above the details and above each chapter draw in from the left */
html.rf .case-meta > div { position: relative; border-top-color: transparent; }
html.rf .chapter.rf-rule, html.rf .project-nav { position: relative; border-top-color: transparent; }
html.rf .case-meta > div::before, html.rf .chapter.rf-rule::before, html.rf .project-nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out); pointer-events: none; }
html.rf .case-meta > div::before { transition-duration: 1.1s; transition-delay: calc(var(--rf-i, 0) * 90ms); }
html.rf .case-meta.rf-in > div::before, html.rf .chapter.rf-in::before, html.rf .project-nav.rf-in::before { transform: none; }

/* previous / next: the label steps back, a small arrow points the way */
.project-link-label { display: inline-flex; align-items: center; gap: 8px; }
.project-link-label .link-arrow { transition: transform .45s var(--ease-out); }
.project-link.is-prev:hover .link-arrow { transform: translateX(-4px); }
.project-link.is-next:hover .link-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  html.rf .section::before, html.rf .case-meta > div::before, html.rf .chapter.rf-rule::before, html.rf .project-nav::before { transform: none; }
  .logo-rest { transition: none; }
}

/* ---------- phones: images have 4px corners ---------- */
@media (max-width: 700px) {
  .work-card { border-radius: 4px; }
  .work-card.is-peek { border-radius: 4px 4px 0 0; }
}
@media (max-width: 760px) {
  .case-hero, .case-shot, .chapter-media, .chapter-media.is-row img, .chapter-media.is-row video,
  .chapter-media.is-strip img, .chapter-media.is-scroll img, .glimpse, .scene-frame, .scene-thumb, .scene-thumb img,
  .placeholder { border-radius: 4px; }
  .case-hero.is-full .case-shot, .chapter-media.is-composed.is-bare, .chapter-media.is-device, .chapter-media.is-phone,
  .chapter-media.is-phones, .chapter-media.is-device video { border-radius: 0; }
}

/* phones: a head image with empty margins (Life Tribute) is enlarged and spreads to the screen edges */
@media (max-width: 760px) {
  .case-hero.has-phone-crop { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); aspect-ratio: var(--hp-aspect); border-radius: 0; }
  .case-hero.has-phone-crop.is-full .case-shot { width: var(--hp-w); height: auto; left: var(--hp-left); top: var(--hp-top); object-fit: fill; }
}

/* phones: tighter space between chapters and sections */
@media (max-width: 760px) {
  .case-hero.has-phone-crop { margin-top: 24px; }
  .case-hero.has-phone-crop + .case-meta { margin-top: 10px; }
  .case-lead { margin-top: 72px; }
  .case-chapters { margin-top: 88px; }
  .case-chapters.is-continued { margin-top: 72px; }
  .chapter { padding-top: 40px; padding-bottom: 44px; }
  .chapter.is-sub { padding-top: 40px; }
  .chapter.has-subs + .chapter.is-sub { padding-top: 36px; }
  .chapter.is-title-only + .chapter.is-sub { padding-top: 0; }
  .chapter.is-sub.is-last { padding-bottom: 44px; }
  .chapter.is-scene { padding-top: 56px; }
  .project-nav { margin-top: 40px; }
  .scene.is-static .scene-shot:last-child { margin-bottom: 0; }
  .project-link { padding: 32px 0 40px; }
}

/* phones: a single phone mockup sits in the middle of the page */
@media (max-width: 760px) {
  .chapter-media.is-phone { width: min(100%, 320px); margin-left: auto; margin-right: auto; justify-self: center; }
  .chapter-media.is-narrow { width: min(100%, 375px); margin-left: auto; margin-right: auto; justify-self: center; }
}

/* phones: the line under a chapter title lines up with the title (as on desktop); a narrower number column and a slightly smaller size keep short sentences on one line */
@media (max-width: 760px) {
  .chapter.has-subtitle .chapter-head .chapter-line { font-size: 20px; }
  .chapter-head { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; }
}

/* phones: the scene's two screens (The verdict, Capabilities breakdown) have the same width and the same shadow */
.scene.is-static .scene-shot.is-flat {
  width: 100%; height: auto; border-radius: 4px;
  filter: drop-shadow(0 14px 22px rgba(17, 17, 17, 0.14)) drop-shadow(0 1px 3px rgba(17, 17, 17, 0.1));
}
:root[data-theme="dark"] .scene.is-static .scene-shot.is-flat { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
/* phones: no pinning, so the pull-up that belongs to the pinned layout is dropped and the scene follows the other sections */
.scene.is-static { margin-top: 0; }
@media (max-width: 760px) {
  .chapter.is-scene { padding-top: 40px; }
  /* swiping is enough on a touch screen: no arrow buttons on the sideways strips */
  .strip-arrow { display: none; }
}

/* ---------- the funnel chart: horizontal bars on phones (the picture is used on larger screens) ---------- */
.funnel-m { display: none; }
@media (max-width: 760px) {
  .chapter-media.has-m-chart > img { display: none; }
  .chapter-media.has-m-chart { overflow: visible; }
  .funnel-m {
    display: block; padding: 22px 20px 24px; border-radius: 4px; background: #fff; color: #1F2430;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.05), 0 14px 28px -14px rgba(17, 17, 17, 0.2);
  }
  .fm-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
  .fm-overall { margin-top: 26px; padding: 14px 16px 16px; border-radius: 4px; background: #FDF1EE; }
  .fm-overall-label { font-size: 12px; color: #C0392B; }
  .fm-overall strong { display: block; margin-top: 2px; font-size: 40px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: #C0392B; font-variant-numeric: tabular-nums; }
  .fm-overall p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #1F2430; }
  .fm-steps { list-style: none; margin: 20px 0 0; padding: 0; }
  .fm-step .fm-label { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; color: #5B6270; }
  .fm-step .fm-label b { font-size: 14px; font-weight: 600; color: #1F2430; }
  .fm-value { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
  .fm-value strong { font-size: 20px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .fm-value span { font-size: 12px; color: #5B6270; }
  .fm-track { height: 26px; margin-top: 8px; border-bottom: 1.5px solid #D9DBDF; }
  .fm-track i { display: block; width: var(--w); min-width: 6px; height: 100%; border-radius: 4px 4px 0 0; background: #E8705A; transform-origin: 0 50%; transition: transform .9s var(--ease-out); }
  .fm-drop { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; font-size: 12px; font-weight: 500; color: #C0392B; }
  .fm-drop::before { content: ''; flex: none; width: 1.5px; height: 14px; margin-left: 6px; background: #E8B3A9; }
  .fm-step + .fm-drop, .fm-drop + .fm-step { }
  html.rf .funnel-m:not(.is-in) .fm-track i { transform: scaleX(0); }
}

/* ---------- the flywheel: stacked for phones (the picture is used on larger screens) ---------- */
.wheel-m { display: none; }
@media (max-width: 760px) {
  .wheel-m {
    display: block; padding: 22px 20px 8px; border-radius: 4px; background: #fff; color: #1F2430;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.05), 0 14px 28px -14px rgba(17, 17, 17, 0.2);
  }
  .wm-title { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
  .wm-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #4B5563; }
  .wm-ring { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 26px auto 18px; }
  .wm-ring > img { display: block; width: 100%; height: 100%; }
  .wm-center { position: absolute; left: 31.2%; top: 39.2%; width: 37.6%; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
  .wm-center b { font-size: clamp(17px, 6vw, 21px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
  .wm-center span { font-size: 11px; line-height: 1.2; color: #4B5563; }
  .wm-badge { display: grid; place-items: center; box-sizing: border-box; border: 2.25px solid var(--bc); border-radius: 50%; background: #fff; color: #1F2430; font-style: normal; font-weight: 600; }
  .wm-b1 { --bc: #F4A894; } .wm-b2 { --bc: #EE8A71; } .wm-b3 { --bc: #D9573F; }
  .wm-ring .wm-badge { position: absolute; width: 10.5%; height: 10.5%; font-size: 13px; border-width: 2.5px; }
  .wm-ring .wm-b1 { left: 77.84%; top: 23.24%; } .wm-ring .wm-b2 { left: 46.8%; top: 84.16%; } .wm-ring .wm-b3 { left: 9.57%; top: 26.82%; }
  .wm-steps { list-style: none; margin: 0; padding: 0; }
  .wm-steps li { display: flex; gap: 12px; padding: 18px 0; border-top: 1px solid #D1D5DB; }
  .wm-steps .wm-badge { flex: none; width: 28px; height: 28px; font-size: 12px; }
  .wm-steps b { display: block; font-size: 17px; line-height: 1.25; font-weight: 600; }
  .wm-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #4B5563; }
}

/* ---------- the two design directions: each option on its own on phones ---------- */
.dirs-m { display: none; }
@media (max-width: 760px) {
  .chapter-media.has-m-chart > .annot { display: none; }
  .dirs-m { display: block; }
  .dm-opt + .dm-opt { margin-top: 44px; }
  .dm-label { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
  /* the screen is shown at a readable size and swiped sideways; it runs to the screen edge so it is clear there is more */
  .dm-scroll { margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dm-scroll::-webkit-scrollbar { display: none; }
  .dm-scroll img { display: block; width: 960px; max-width: none; height: auto; border-radius: 4px;
    filter: drop-shadow(0 12px 20px rgba(17, 17, 17, 0.14)) drop-shadow(0 1px 3px rgba(17, 17, 17, 0.1)); }
  :root[data-theme="dark"] .dm-scroll img { filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
  .dm-q { list-style: none; margin: 0; padding: 0; }
  .dm-q li { position: relative; padding: 14px 0 14px 18px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.4; color: var(--ink); }
  .dm-q li::before { content: ''; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
}

/* phones: less space between a paragraph and the image under it */
@media (max-width: 760px) {
  .chapter-body { row-gap: 22px; }
  .chapter.is-wide .chapter-body { gap: 22px; }
  .chapter.is-sub .chapter-body { padding-top: 12px; }
  .chapter.is-sub.is-full .chapter-body { padding-top: 16px; }
  .chapter.is-sub.is-full:has(.chapter-media.is-strip) .chapter-body { padding-top: 16px; }
}