/* Original typography is supplied by styles.css and motion.css. */
.brand-logo { display:block; flex-shrink:0; width:32px; height:auto; }
.scroll-type { background:var(--accent); border:0; margin-top:110px; padding-block:30px 42px; }
.scroll-type p + p { color:#4d5b27; }
.about-heading-close { color:#717568; }

/* The opening presents a small arrangement, then lets the work spread out. */
.opening-sequence { position:relative; }
.opening-pin { position:relative; min-height:860px; }
.hero.hero-editorial { display:block; position:relative; min-height:860px; height:calc(100svh - 86px); padding-top:36px; padding-bottom:32px; }
.hero-editorial h1 { display:flex; flex-direction:column; justify-content:space-between; position:absolute; inset:30px var(--gutter) 135px; }
.hero-editorial .hero-line { transform:none; opacity:1; filter:none; }
.hero-editorial h1 .second { padding-left:0; align-self:flex-end; transform:none; color:var(--ink); }
.hero-editorial .hero-note { position:absolute; left:var(--gutter); bottom:180px; padding:0; }
.hero-editorial .hero-note p { margin:0; }
.hero-editorial .hero-meta { position:absolute; inset:auto var(--gutter) 24px; margin:0; padding-top:16px; min-height:60px; }
.opening-art { position:absolute; inset:0; pointer-events:none; z-index:2; }
.opening-art-piece { position:absolute; width:clamp(260px,25vw,450px); aspect-ratio:4/5; top:46%; left:50%; box-shadow:0 14px 35px #0b180d26; transform:translate(-50%,-50%); transform-origin:center; overflow:hidden; background:#1a2420; }
.opening-art-piece img, .opening-art-piece video { width:100%; height:100%; object-fit:cover; }
.opening-art-magic img { position:absolute; width:171.43%; max-width:none; height:auto; left:50%; top:-30.36%; transform:translateX(-50%); }
.opening-art-evs img { object-fit:contain; background:#050709; }
.opening-art-magic { transform:translate(calc(-50% - 85px),calc(-50% + 8px)) rotate(-12deg); }
.opening-art-evs { transform:translate(calc(-50% + 85px),calc(-50% - 10px)) rotate(12deg); }
.opening-art-center { transform:translate(-50%,-50%) rotate(-3deg); }
.opening-art-center video { display:block; object-fit:cover; }
.pin-motion .opening-sequence { height:190svh; }
.pin-motion .opening-pin { position:sticky; top:0; height:100svh; min-height:0; overflow:clip; }
.pin-motion .hero.hero-editorial { min-height:0; height:100svh; }
.pin-motion .hero-editorial h1 { inset:30px var(--gutter) 125px; }
.pin-motion .hero-editorial .hero-line:first-child { transform:translateX(calc(var(--opening-progress,0) * -12vw)); }
.pin-motion .hero-editorial .hero-line.second { transform:translateX(calc(var(--opening-progress,0) * 12vw)); }
.pin-motion .hero-editorial h1, .pin-motion .hero-editorial .hero-note { opacity:var(--opening-type-opacity,1); }
.pin-motion .opening-art-piece { top:49%; width:min(clamp(260px,25vw,450px),46svh); }
.pin-motion .opening-art-magic { transform:translate(calc(-50% - 85px - var(--opening-progress,0) * 18vw),calc(-50% + 8px - var(--opening-progress,0) * 5vh)) rotate(calc(-12deg + var(--opening-progress,0) * 6deg)) scale(calc(1 + var(--opening-progress,0) * .4)); }
.pin-motion .opening-art-evs { transform:translate(calc(-50% + 85px + var(--opening-progress,0) * 18vw),calc(-50% - 10px + var(--opening-progress,0) * 4vh)) rotate(calc(12deg - var(--opening-progress,0) * 6deg)) scale(calc(1 + var(--opening-progress,0) * .4)); }
.pin-motion .opening-art-center { transform:translate(-50%,-50%) rotate(calc(-3deg + var(--opening-progress,0) * 3deg)) scale(calc(1 + var(--opening-progress,0) * .65)); }

/* Case studies share a quiet project rail and a generous evidence column. */
.case-layout { display:grid; grid-template-columns:minmax(260px,28%) minmax(0,1fr); gap:clamp(40px,5vw,90px); padding-top:55px; padding-bottom:50px; }
.case-rail, .case-flow { min-width:0; }
.case-overview .breadcrumb { margin:0 0 28px; }
.case-overview .breadcrumb > span { display:none; }
.case-overview .case-heading { font-size:clamp(44px,4.5vw,82px); margin:0 0 24px; overflow-wrap:normal; }
.case-overview .case-intro { display:block; margin:0; padding:0; }
.case-overview .case-tagline { font-size:22px; line-height:1.35; max-width:27ch; margin:0 0 28px; }
.case-overview .case-info { display:grid; grid-template-columns:1fr; gap:20px; margin:0; }
.case-overview .case-info dt { margin-bottom:7px; }
.case-overview .case-info dd { margin:0; }
.case-rail .chapter-nav { display:flex; flex-wrap:wrap; align-items:start; justify-content:start; gap:0 15px; position:static; min-height:0; white-space:normal; overflow:visible; margin-top:28px; padding:14px 0 0; border-top:1px solid var(--line); border-bottom:0; background:none; }
.case-rail .chapter-nav > span { display:none; }
.case-rail .chapter-nav a { padding:7px 0; }
.case-flow .wrap { padding-inline:0; }
.case-flow .case-story { display:block; padding-block:60px 30px; }
.case-flow .case-story > .eyebrow { display:block; margin-bottom:22px; }
.case-flow .case-story .section-title { max-width:23ch; margin-bottom:25px; }
.case-flow .story-content > p { max-width:58ch; }
.case-flow .decision-notes { padding:35px; margin-top:25px; background:#e9ece2; }
.case-flow .decision-note-grid { grid-template-columns:1fr; gap:26px; margin-top:35px; }
.case-flow .decision-note h3 { margin-block:14px; }
.case-flow .decision-note p { max-width:58ch; }
.case-flow .screen-presentation { padding:0; background:transparent; }
.case-flow .case-film video { max-height:none; }
.case-flow .case-film figcaption { flex-wrap:wrap; }
.case-flow .tin-evidence { padding-block:30px; }
.case-flow .tin-full-site { padding-bottom:50px; }
.case-flow .project-facts { gap:20px; padding-block:30px; }
.case-flow .evs-project-meta, .case-flow .case-project-meta { gap:20px; padding-bottom:30px; }
.case-flow .evs-highlight-evidence { grid-template-columns:1fr; gap:30px; }
.case-flow .evs-screenshot-gallery { grid-template-columns:1fr; gap:40px; padding-block:15px 35px; }
.case-flow .archive-images, .case-flow .magic-gallery { grid-template-columns:1fr; gap:35px; padding:0; background:none; }
.case-flow .magic-case-cover { aspect-ratio:1.2; padding:0; }
.case-flow .magic-case-cover img { width:100%; }
.case-flow .project-client-quote, .case-flow .evs-client-quote { padding:40px; }
.case-flow .case-credits { padding-block:35px; }
@media(min-width:1100px) and (min-height:820px) {
 .case-rail-inner { position:sticky; top:30px; }
}

/* Tenaya keeps its immersive opening; each family keeps its own story in view. */
@media(min-width:1100px) {
 .beer-family { display:grid; grid-template-columns:minmax(240px,28%) minmax(0,1fr); gap:5vw; padding-block:70px; }
 .beer-family-heading { display:block; align-self:start; position:sticky; top:40px; margin:0; }
 .beer-family-heading h3 { margin:22px 0; }
 .beer-family-heading p { max-width:30ch; }
 .beer-family .three-art { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .beer-family .three-art .archive-art:first-child { grid-column:1/-1; width:100%; max-width:600px; justify-self:center; }
 .beer-family .three-art .archive-art a, .beer-family .four-art .archive-art a { aspect-ratio:auto; }
 .beer-family .three-art .archive-art img, .beer-family .four-art .archive-art img { height:auto; }
 .beer-family .three-art .archive-art:first-child a { max-height:650px; }
 .beer-family .three-art .archive-art:first-child img { max-height:650px; width:100%; object-fit:contain; }
 .beer-family .single-art { width:100%; }
}

@media(max-width:1099px) {
 .case-overview .case-heading { font-size:clamp(64px,11vw,180px); }
 .case-overview .case-tagline { font-size:clamp(25px,3vw,48px); line-height:1.15; }
 .case-layout { grid-template-columns:1fr; gap:40px; padding-top:35px; }
 .case-overview .case-intro { display:grid; grid-template-columns:1fr 1fr; gap:35px; }
 .case-overview .case-info { grid-template-columns:1fr 1fr; }
 .case-rail .chapter-nav { margin-top:15px; }
}
@media(max-width:700px) {
  .brand-logo { width:28px; }
 .case-overview .case-heading { font-size:17vw; }
 .case-overview .case-tagline { font-size:28px; }
 .opening-pin { min-height:0; }
  .hero.hero-editorial { height:max(760px,120vw); min-height:0; padding:0 var(--gutter); }
  .hero-editorial h1 { inset:28px var(--gutter) 180px; }
 .hero-editorial .hero-note { bottom:125px; }
 .hero-editorial .hero-meta { bottom:16px; min-height:78px; align-items:end; }
 .hero-editorial .hero-meta p { max-width:21ch; }
  .opening-art-piece { top:41%; width:55vw; max-width:260px; }
 .opening-art-magic { transform:translate(calc(-50% - 12vw),calc(-50% + 5px)) rotate(-12deg); }
 .opening-art-evs { transform:translate(calc(-50% + 12vw),calc(-50% - 8px)) rotate(12deg); }
 .brand-heading-line { white-space:normal; }
 .scroll-type { margin-top:65px; padding-block:26px 32px; }
 .case-overview .case-intro { grid-template-columns:1fr; gap:0; }
 .case-overview .case-info { gap:20px; }
 .case-flow .case-story { padding-top:45px; }
 .case-flow .decision-notes { padding:25px 22px; }
 .case-flow .project-facts { gap:12px; }
 .case-flow .project-client-quote, .case-flow .evs-client-quote { padding:32px 22px; }
 .case-flow .case-project-meta, .case-flow .evs-project-meta { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce), print {
 .pin-motion .opening-sequence { height:auto; }
 .pin-motion .opening-pin { position:relative; height:auto; overflow:visible; }
 .hero-editorial h1, .hero-editorial .hero-note { opacity:1!important; }
 .hero-editorial .hero-line { transform:none!important; }
 .case-rail-inner, .beer-family-heading { position:static; }
}
@media print {
 .opening-art { display:none; }
 .hero.hero-editorial { height:400px; min-height:0; }
 .hero-editorial h1 { font-size:80px; position:static; }
 .hero-editorial .hero-note, .hero-editorial .hero-meta { display:none; }
 .case-layout { display:block; }
}

/* Project browsing keeps every case study in one consistent grid. */
.work-index { padding-block:clamp(38px,4vw,64px) clamp(70px,8vw,130px); }
.work-index-heading { margin-bottom:clamp(35px,4vw,60px); }
.work-index-heading h1 { margin:0; font-size:clamp(76px,10vw,160px); font-weight:500; line-height:.95; letter-spacing:-.075em; }
.work-index-grid { padding-top:0; }
.work-index-grid .project-card { min-width:0; }
.work-index-grid .card-caption .project-title { margin:0; }
@media(max-width:700px) {
  .work-index { padding-top:35px; }
  .work-index-heading { margin-bottom:32px; }
  .work-index-grid { padding-top:0; }
}

.partnerships-description, .stack-card.evs .stack-bottom p { text-wrap:balance; }

/* Vector arrows inherit the existing link color and type scale on every device. */
.icon-arrow { display:inline-block; width:1em; height:1em; flex-shrink:0; vertical-align:-.125em; pointer-events:none; }
.gallery-controls button, [data-artwork-prev], [data-artwork-next] { display:inline-grid; place-items:center; }