/* Phone and tablet layout. Loaded after style.css on every page. */

/* The ring is drawn square; a stage wider than its max-height letterboxed it and the label floor was computed against the wrong width. */
.radial-stage{max-width:770px}

/* Touch: hover states stay put after a tap, so movement on hover is desktop only. */
@media(hover:none){
.work-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.project-index a:hover{padding-left:0;background:none}
.feature-art:hover,.feature-art:hover img{transform:none}
a:hover .round-link{transform:none}
}

/* Tap targets: every standalone control is at least 44px on its short side. */
@media(max-width:1100px),(pointer:coarse){
.brand,.site-nav a{display:inline-flex;align-items:center;min-height:44px}
.site-nav a{padding-block:0}
.icon-button{width:44px;height:44px}
.layout-choice{min-height:44px;padding-block:0}
.category-filter{min-height:44px}
.hero-actions a{display:inline-flex;align-items:center;min-height:44px}
.hero-actions .round-link{width:44px;height:44px}
.project-breadcrumb{align-items:center;row-gap:0}
.project-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.section-heading>a,.navigator-bottom a,.story-embed-link,.mini-link,.project-links a,.center-copy .center-link,.contact-strip>a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:var(--line)}
.center-copy .center-link{text-decoration-color:currentColor}
.contact-strip>a .round-link{width:44px;height:44px}
.center-copy.default button{min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:var(--line)}
.nav-pagination button{width:44px;height:44px}
.home-index summary,.mobile-category-index summary{min-height:44px}
.home-index li a{min-height:44px;align-items:center;padding-block:0}
.email-link{display:inline-flex;align-items:center;min-height:44px}
.site-footer a,.site-footer button{display:inline-flex;align-items:center;min-height:44px}
.draft-bar a{display:inline-flex;align-items:center;min-height:44px}
}

/* Tablet and small laptop: the center of the ring keeps its mark and control; the subject count is already above the ring. */
@media(max-width:1100px){
.center-copy.default .eyebrow{display:none}
.center-copy.default{justify-content:center;gap:10px}
.layout-choice span{display:none}
.hero{min-height:0}
.case-art .story-figure{margin-inline:-28px;border-radius:0;border-inline:0}
.story-figure{overscroll-behavior-x:contain}
}

/* Figures keep a readable minimum width and scroll sideways; edge shadows show there is more, and the caption stays in view. */
@media(max-width:1100px){
.case-art .figure-svg{min-width:740px}
.story-figure{background:linear-gradient(90deg,var(--panel) 40%,transparent) left/48px 100% no-repeat local,linear-gradient(270deg,var(--panel) 40%,transparent) right/48px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) left/16px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 22%,transparent),transparent) right/16px 100% no-repeat scroll,var(--panel)}
.story-figure figcaption{position:sticky;left:0}
.card-art.is-figure .story-figure{background:none}
.story-figure.figure-bars{direction:rtl}
.story-figure.figure-bars>*{direction:ltr}
.card-art .story-figure.figure-bars{direction:ltr}
}
/* A label dot beside a wrapped label sits on its first line. */
@media(max-width:1100px){
.case-text .eyebrow,.project-header .eyebrow,.work-card-text .eyebrow{align-items:flex-start}
.case-text .eyebrow .color-dot,.project-header .eyebrow .color-dot,.work-card-text .eyebrow .color-dot{margin-top:.6em}
.mini-link{padding-inline:0}
}

/* Phones */
@media(max-width:760px){
.site-header{padding-block:6px;min-height:0;row-gap:0}
.site-nav{gap:8px}
.hero{padding-top:16px;padding-bottom:20px}
.hero-copy>.eyebrow{margin-bottom:8px}
.hero h1{margin-bottom:4px}
.hero-copy .role{margin-bottom:10px}
.hero-intro{font-size:23px;line-height:1.28}
.layout-picker{margin-top:14px;padding-top:6px}
.layout-choice[data-layout-choice=orbit],.settings-choice[data-layout-choice=orbit]{display:none}
.navigator-top{padding-inline:0;min-height:44px}
.navigator-bottom{padding-inline:0}
.segment-index{display:none}
.center-copy{padding:14px 12px}
.center-copy.default .center-mark{font-size:46px;width:58px;height:58px}
.center-copy .eyebrow{letter-spacing:.01em;max-width:88%}
.center-copy.default .center-sub{max-width:100%}
.radial-center.has-image .center-copy .eyebrow{display:none}
.nav-instruction{margin-top:4px}
.story-figure,.case-art .story-figure{margin-inline:-18px;border-radius:0;border-inline:0;padding:14px 18px}
.story-embed-frame{height:max(18rem,min(35rem,calc(100svh - 7rem)))}
.project-facts,.project-media.no-media .project-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.project-facts .stack-row{grid-column:1/-1}
.work-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:20px}
.section-heading{flex-wrap:wrap;row-gap:4px}
}

/* Short landscape screens: the ring sits beside the introduction and is sized to the screen height. */
@media(orientation:landscape) and (max-height:520px){
.site-header{min-height:0;padding-block:4px}
.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:24px;padding-top:12px}
.navigator{max-width:none;margin:0}
.radial-stage{width:min(100%,calc(100svh - 1.5rem));max-width:none;margin-inline:auto}
.hero-description{display:none}
.layout-picker{flex-wrap:wrap;max-width:none}
.story-embed-frame{aspect-ratio:auto;min-height:0;height:max(18rem,calc(100svh - 6rem))}
.about-emblem{width:160px}
}