/* Works inherits the navy / paper / pink archive shared by the other inner pages. */
.works-hero { overflow:visible; }
.works-hero__collage { position:relative; height:min(82svh,48rem); min-height:42rem; isolation:isolate; }
.works-hero__collage a { color:var(--ink); text-decoration:none; }
.works-hero__pet,.works-hero__phone,.works-hero__site { position:absolute; display:block; transition:filter 180ms ease; }
.works-hero__pet { z-index:3; top:12%; left:0; width:46%; transform:rotate(-5deg); }
.works-hero__pet-kicker { display:block; color:var(--pink-ink); font-size:.88rem; font-weight:700; letter-spacing:.07em; }
.works-hero__pet img { display:block; width:100%; height:19rem; object-fit:contain; filter:drop-shadow(.4rem .8rem .55rem rgba(8,12,27,.3)); }
.works-hero__pet strong,.works-hero__phone span,.works-hero__site span { position:absolute; z-index:7; display:inline-block; bottom:-.65rem; left:5%; padding:.45rem .8rem; background:var(--pink); color:var(--ink); font-size:.88rem; font-weight:750; white-space:nowrap; box-shadow:.25rem .5rem 1rem rgba(8,12,27,.15); }
.works-hero__phone { z-index:4; top:-2%; right:0; width:39%; transform:rotate(6deg); }
.works-hero__phone img { display:block; width:100%; height:auto; filter:drop-shadow(.5rem .8rem .8rem rgba(8,12,27,.26)); }
.works-hero__phone span { top:-.8rem; right:-.4rem; bottom:auto; left:auto; }
.works-hero__site { z-index:5; right:0; bottom:2%; width:73%; padding:.55rem; background:var(--paper); box-shadow:.65rem 1.25rem 2.5rem rgba(8,12,27,.23); transform:rotate(2deg); }
.works-hero__site span { left:auto; right:1rem; bottom:-.8rem; }
.works-hero__site img { display:block; width:100%; height:auto; }
.works-hero__clay { position:absolute; z-index:2; display:block; width:21%; max-height:12rem; left:4%; bottom:3%; object-fit:contain; transform:rotate(-10deg); pointer-events:none; filter:drop-shadow(.3rem .7rem .6rem rgba(8,12,27,.24)); }
.works-hero__collage a:hover { filter:brightness(1.04); }

.works-reading { padding-bottom:2rem; }
.work-case { min-width:0; scroll-margin-top:7rem; padding-bottom:clamp(5rem,9vw,8rem); }
.work-case + .work-case { padding-top:clamp(3rem,6vw,6rem); }
.work-case__head { margin-bottom:1.7rem; }
.work-case__index,.case-small-label { margin:0 0 .7rem; color:var(--pink); font-size:.94rem; font-weight:700; letter-spacing:.07em; }
.work-case__head h2 { margin:0; font-size:clamp(2.25rem,4vw,3.65rem); line-height:1.2; letter-spacing:-.03em; }
.work-case__type { margin:.8rem 0 0; color:var(--experience-muted); font-size:1rem; }
.work-case__lead { max-width:37em; margin:0 0 3.5rem; color:var(--paper-light); font-size:clamp(1.08rem,1.4vw,1.24rem); line-height:1.85; }
.case-section-heading { margin:0 0 1.7rem; }
.case-section-heading h3 { margin:0 0 .65rem; font-size:clamp(1.6rem,2.6vw,2.45rem); line-height:1.25; letter-spacing:-.025em; }
.case-section-heading > p:last-child { max-width:38em; margin:0; color:var(--experience-muted); line-height:1.8; }
.case-ledger { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:3.5rem; }
.case-ledger h3,.site-decisions h3 { margin:0 0 .55rem; color:var(--pink); font-size:1.02rem; }
.case-ledger p,.site-decisions p { margin:0; color:var(--paper-light); font-size:1.05rem; line-height:1.8; }
.case-action { margin-top:2.3rem; }

/* A full poster anchors the pet case; the interactive state sheet shows the real sprites. */
.pet-feature { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr); align-items:center; gap:clamp(2rem,5vw,5rem); }
.pet-poster { width:min(100%,34rem); margin:0; color:var(--paper-light); }
.pet-poster a { display:block; }
.pet-poster img { display:block; width:100%; height:auto; object-fit:contain; }
.pet-poster figcaption { display:inline-block; margin-top:.85rem; padding:.4rem .65rem; background:var(--paper-light); color:var(--ink); font-size:.92rem; }
.pet-feature__copy h3 { margin:0 0 1.4rem; font-size:clamp(1.95rem,3vw,2.8rem); line-height:1.25; letter-spacing:-.025em; }
.pet-feature__copy p:not(.case-small-label) { max-width:30em; color:var(--experience-muted); line-height:1.9; }
.pet-states { margin-top:clamp(5rem,9vw,8rem); }
.pet-states__layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:1.5rem; align-items:center; padding:clamp(1.5rem,3vw,2.7rem); color:var(--ink); background:var(--paper-light); box-shadow:.55rem 1rem 2rem rgba(8,12,27,.17); }
.pet-states__display { display:grid; grid-template-columns:56% 1fr; align-items:center; min-height:17rem; gap:1.2rem; }
.pet-states__display img { width:100%; height:auto; max-height:18rem; object-fit:contain; }
.pet-states__display strong { display:block; font-size:clamp(1.35rem,2vw,1.8rem); }
.pet-states__display p { max-width:13em; color:var(--ink-muted); font-size:1rem; line-height:1.7; }
.pet-states__choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.pet-states__choices button { min-height:3rem; padding:.55rem .8rem; border:1px solid rgba(32,40,64,.2); border-radius:2rem; background:transparent; color:var(--ink); font-size:.95rem; font-weight:650; text-align:center; cursor:pointer; transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease; }
.pet-states__choices button[aria-pressed="true"] { border-color:var(--navy); background:var(--navy); color:var(--paper-light); }
.pet-states__choices button:hover:not([aria-pressed="true"]) { background:#e7dae3; }
.pet-evidence { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr); align-items:end; gap:clamp(1.5rem,4vw,3rem); margin-top:4rem; }
.pet-evidence figure { min-width:0; margin:0; }
.pet-evidence__info img { width:100%; height:auto; }
.pet-evidence__learning { max-width:22rem; }
.pet-evidence__learning img { width:100%; height:auto; }
.pet-evidence figcaption { margin-top:.9rem; color:var(--experience-muted); font-size:.95rem; line-height:1.7; }

/* The phone sequence shows PicWords as an interaction, then the process strip names ownership. */
.picwords-showcase { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:clamp(.7rem,2vw,1.6rem); }
.picwords-showcase figure { min-width:0; margin:0; }
.picwords-showcase img { display:block; width:100%; height:auto; aspect-ratio:466 / 978; object-fit:contain; filter:drop-shadow(.6rem 1rem 1.1rem rgba(8,12,27,.25)); }
.picwords-showcase figcaption { max-width:17em; margin:.65rem auto 0; color:var(--experience-muted); font-size:.95rem; line-height:1.6; text-align:center; }
.picwords-demo-launch { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; margin:2rem 0 0; padding:.85rem 1.1rem; border:0; background:var(--pink); color:var(--navy); font:inherit; font-weight:750; cursor:pointer; }
.picwords-demo-launch:hover { background:var(--paper-light); }
.picwords-demo-dialog { width:min(31rem,calc((100dvh - 3rem)*.47746),calc(100vw - 2rem)); height:min(65rem,calc(100dvh - 3rem),calc((100vw - 2rem)*2.09442)); max-width:none; max-height:none; padding:0; border:0; overflow:visible; background:transparent; color:var(--ink); }
.picwords-demo-dialog[open] { display:block; }
.picwords-demo-dialog::backdrop { background:rgba(9,15,32,.8); }
.picwords-demo-dialog__close { position:absolute; top:1.2rem; right:-4rem; display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:0; border-radius:50%; background:var(--paper-light); color:var(--ink); font:inherit; font-size:1.8rem; line-height:1; cursor:pointer; }
.picwords-demo-dialog__close:hover { background:var(--pink); }
.picwords-demo-dialog iframe { display:block; width:100%; height:100%; border:0; border-radius:0; background:transparent; }
.picwords-process { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,4vw,4rem); margin-top:clamp(4rem,7vw,7rem); }
.picwords-process h3 { margin:0; font-size:clamp(1.65rem,2.2vw,2.15rem); line-height:1.35; letter-spacing:-.025em; }
.picwords-process h3 span { display:block; white-space:nowrap; }
.picwords-process ol { display:grid; gap:1.25rem; margin:0; padding-left:1.3rem; color:var(--paper-light); line-height:1.85; }
.picwords-process li { padding-left:.35rem; }
.picwords-process li::marker { color:var(--pink); font-weight:700; }
.work-case--picwords .case-ledger { grid-template-columns:repeat(3,minmax(0,1fr)); }
.work-case--site .case-ledger { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* The site is shown as a real artifact, without a made-up before/after screenshot. */
.site-showcase { margin:0; padding:clamp(.8rem,1.7vw,1.35rem); background:var(--paper); color:var(--ink); box-shadow:.75rem 1.4rem 2.7rem rgba(8,12,27,.22); transform:rotate(-2deg); }
.site-showcase img { display:block; width:100%; height:auto; }
.site-showcase figcaption { margin:.7rem 0 .1rem; color:var(--ink-muted); font-size:.95rem; }
.site-decisions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem 3rem; margin-top:4rem; }

@media (max-width:1000px) {
  .works-hero__collage { height:36rem; min-height:0; }
  .works-hero__pet img { height:16rem; }
  .pet-feature { gap:2.5rem; }
  .pet-states__layout { grid-template-columns:1fr; }
  .pet-states__display { min-height:14rem; }
}
@media (max-width:700px) {
  .works-hero { padding-bottom:4rem; }
  .works-hero__collage { height:26rem; width:min(100%,31rem); margin-inline:auto; }
  .works-hero__pet { top:10%; left:0; width:52%; }
  .works-hero__pet-kicker { font-size:.55rem; }
  .works-hero__pet img { height:11rem; }
  .works-hero__pet strong { font-size:.72rem; }
  .works-hero__phone { width:40%; right:0; }
  .works-hero__phone span,.works-hero__site span { font-size:.62rem; }
  .works-hero__site { width:72%; right:0; bottom:2%; }
  .works-hero__clay { display:block; width:21%; left:2%; bottom:2%; max-height:8rem; }
  .picwords-demo-dialog { width:min(31rem,calc((100dvh - 8rem)*.47746),calc(100vw - 3rem)); height:min(65rem,calc(100dvh - 8rem),calc((100vw - 3rem)*2.09442)); }
  .picwords-demo-dialog__close { top:auto; right:.5rem; bottom:-3.3rem; }
  .work-case__lead { margin-bottom:2.4rem; font-size:1rem; }
  .work-case + .work-case { padding-top:2rem; }
  .pet-feature { grid-template-columns:1fr; gap:3rem; }
  .pet-poster { width:min(100%,24rem); margin-inline:auto; }
  .pet-feature__copy { max-width:33rem; }
  .pet-states { margin-top:4rem; }
  .pet-states__layout { padding:1.2rem; }
  .pet-states__display { grid-template-columns:50% 1fr; gap:.5rem; min-height:11rem; }
  .pet-states__display strong { font-size:1.15rem; }
  .pet-states__display p { font-size:.78rem; }
  .pet-states__choices button { min-height:2.7rem; font-size:.78rem; }
  .pet-evidence { grid-template-columns:1fr 1fr; gap:1rem; align-items:start; margin-top:2.5rem; }
  .pet-evidence figcaption { font-size:.7rem; }
  .case-ledger,.work-case--picwords .case-ledger,.work-case--site .case-ledger { grid-template-columns:1fr; gap:1.6rem; margin-top:2.7rem; }
  .picwords-showcase { gap:.3rem; }
  .picwords-showcase figcaption { font-size:.66rem; }
  .picwords-process,.site-decisions { grid-template-columns:1fr; gap:1.8rem; margin-top:3rem; }
  .picwords-process h3 span { white-space:normal; }
  .site-showcase { transform:rotate(-1deg); }
}
@media (max-width:430px) {
  .works-hero__collage { height:22rem; }
  .works-hero__pet img { height:8.7rem; }
  .works-hero__pet strong { font-size:.82rem; }
  .pet-states__display { grid-template-columns:1fr 1fr; }
  .pet-states__display img { max-height:10rem; }
  .pet-evidence { grid-template-columns:1fr; gap:2.2rem; }
  .pet-evidence__learning { width:70%; margin-left:auto !important; }
  .picwords-showcase { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; }
  .picwords-showcase figure,.picwords-showcase figure:first-child { flex:0 0 min(64vw,13rem); width:min(64vw,13rem); margin:0; scroll-snap-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .works-hero__pet,.works-hero__phone,.works-hero__site,.pet-states__choices button { transition:none; }
}