/* Comfortable shared outer spacing across all display sizes. */
:root{--site-gutter:max(clamp(20px,4vw,80px),env(safe-area-inset-left),env(safe-area-inset-right))}
/* A single physical page gutter, shared with the Home tunnel grid and header.
   Keep media containers fluid; reading-width limits belong to individual text. */
body #main :is(.page,.poster-page,.aw-page,.inquiry-page){box-sizing:border-box;width:100%;max-width:none;margin-inline:0;padding-left:var(--site-gutter);padding-right:var(--site-gutter)}
.tunnel-case :is(.tc-hero,.tc-idea,.tc-credits,.tc-more,.tc-outro,.ec-idea,.ec-credits,.ec-more,.ec-outro){padding-left:var(--site-gutter);padding-right:var(--site-gutter)}
.tunnel-case :is(.tc-gallery,.ec-gallery){box-sizing:border-box;width:calc(100% - var(--site-gutter) - var(--site-gutter));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.tunnel-case .tc-logo-concepts-grid{width:min(100%,calc(var(--concept-columns)*220px + (var(--concept-columns) - 1)*32px));max-width:100%;margin-inline:auto}
.tunnel-case :is(.tc-gallery,.ec-gallery) figure{max-width:none}
.tunnel-case .tc-gallery .ea-identity-film .ea-movie{width:100%;max-width:none}
.tunnel-case .tc-gallery :is(.sv-motion-grid,.hm-occasion-grid,.hf-paper-pair,.hf-photo-pair,.at-photo-grid,.ea-object-grid,.ea-stationery-grid,.tc-media-row){width:100%;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
body #main .aw-competition-hero{width:100%;max-width:none}
body #main .studio-team-grid{margin-left:0;margin-right:0}
body #site-footer{padding-left:var(--site-gutter);padding-right:var(--site-gutter)}

/* Project names scale with the same viewport as the opening artwork. */
.tunnel-case .tc-topline>span:first-child{font-size:clamp(18px,1.8vw,32px);line-height:1.25;font-weight:400;letter-spacing:-.025em;max-width:none;overflow-wrap:anywhere}

/* Playback controls follow the full width of their own media frame. */
.tunnel-case .tc-video-controls{width:100%;box-sizing:border-box;flex-wrap:nowrap}
.tunnel-case .tc-video-controls input[type=range]{flex:1 1 0;min-width:50px;max-width:none;width:auto;margin-inline:0}
.tunnel-case .tc-video-controls button,.tunnel-case .tc-video-controls [data-video-time]{flex:0 0 auto}
@media(max-width:600px){
 .tunnel-case .tc-video-controls{flex-wrap:wrap;justify-content:space-between;gap:10px 14px}
 .tunnel-case .tc-video-controls input[type=range]{order:1;flex:1 0 100%;width:100%;max-width:none}
}

/* Compact credits: the page remains fluid, related names stay together. */
.tunnel-case .tc-credits{display:block}
.tunnel-case .tc-credits>h2{margin:0 0 30px}
.tunnel-case .tc-credits>dl{display:grid;grid-auto-flow:row;grid-template-columns:repeat(var(--credit-columns,3),minmax(0,1fr));width:min(100%,1200px);gap:28px 32px;margin:0}
.tunnel-case .tc-credits>dl>div{display:flex;flex-direction:column;align-items:flex-start}
.tunnel-case .tc-credits dt{order:2;font-size:12px;line-height:1.5;margin:8px 0 0}
.tunnel-case .tc-credits dd{order:1;font-size:14px;line-height:1.6;margin:0;overflow-wrap:break-word}
.tunnel-case .tc-credits>a{display:inline-block;margin-top:28px}
@media(max-width:900px){.tunnel-case .tc-credits>dl{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.tunnel-case .tc-credits>dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.tunnel-case .tc-credits>h2{margin-bottom:26px}}
@media(max-width:380px){.tunnel-case .tc-credits>dl{grid-template-columns:minmax(0,1fr)}}

/* The studio signature shares the Home viewport anchor on every route. */
body.inside #site-footer{position:fixed;inset:auto 0 0;margin:0;padding:10px var(--site-gutter) max(10px,env(safe-area-inset-bottom));min-height:0;align-items:flex-end;background:transparent;border:0;box-shadow:none}

/* EAI uses the shared compact concept group and one original logotype. */

.tunnel-case .ea-signatures>.ea-wordmark-heading{display:flex;align-items:baseline;gap:32px;margin-bottom:32px}
.tunnel-case .ea-wordmark-heading h2{margin:0}
.tunnel-case .ea-wordmark-stage{display:grid;place-items:center;margin:0;padding:clamp(32px,6vw,80px);background:transparent}
.tunnel-case .ea-wordmark-stage img{display:block;width:clamp(180px,30vw,480px);max-width:100%;height:auto}
@media(max-width:600px){.tunnel-case .ea-signatures>.ea-wordmark-heading{display:block}.tunnel-case .ea-wordmark-heading h2{margin-top:16px}}

/* Anchor every ESSC result to the same grid coordinate, independent of references. */
.tunnel-case .ec-concept-panel{align-items:start}
.tunnel-case .ec-concept-panel>.ec-symbol-study{align-self:start;margin-top:0}
.tunnel-case .ec-concept-panel>.ec-concept-arrow{align-self:start;margin-top:135px}
@media(max-width:800px){
 .tunnel-case .ec-concept-visual{height:clamp(260px,65vw,420px)}
 .tunnel-case .ec-reference-images{height:calc(100% - 35px)}
 .tunnel-case .ec-reference-images img{height:100%;max-height:none;aspect-ratio:auto}
 .tunnel-case .ec-reference-label{margin-top:12px;min-height:15px}
 .tunnel-case .ec-concept-panel>.ec-concept-arrow{margin-top:0}
}

/* Keep editorial labels, headlines and descriptions together at every viewport. */
.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading){display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;text-align:center;width:100%;margin-inline:auto}
.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading)>div{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading) :is(h2,h3,p){text-align:center;margin:0;max-width:680px;width:100%}
.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading) :is(.tc-kicker,.ec-kicker,.sv-section-label,.hm-overline,.hf-label,.at-label,.ax-label,.ea-label){margin:0;text-align:center}
@media(max-width:800px){.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading){gap:12px}.tunnel-case :is(.tc-idea-intro,.ec-idea-intro,.tc-section-heading,.ec-section-heading,.sv-section-head,.hm-section-head,.hm-character-head,.hm-occasion-copy,.hf-section-head,.at-section-head,.ax-head,.ea-section-head,.ea-film-heading,.ea-wordmark-heading)>div{gap:12px}}
/* Calendar illustrations read from right to left, with their own captions intact. */
.tunnel-case .hm-season-grid{direction:rtl}
.tunnel-case .hm-season-grid>figure{direction:ltr}

/* Editorial titles use one line, fitted to the available device width. */
.tunnel-case .tc-single-line-heading{white-space:nowrap;overflow-wrap:normal;word-break:normal;max-width:none!important;width:100%;min-width:0}

/* One compact art box across every project; legacy image rules cannot crop symbols. */
.tunnel-case .tc-logo-concepts .tc-logo-concept-art{height:140px;overflow:visible}
.tunnel-case .tc-logo-concepts .tc-logo-concept-art img{display:block;width:120px;height:120px;max-width:100%;max-height:120px;aspect-ratio:auto!important;object-fit:contain;border-radius:0}
@media(max-width:800px){.tunnel-case .tc-logo-concepts .tc-logo-concept-art{height:120px}.tunnel-case .tc-logo-concepts .tc-logo-concept-art img{width:100px;height:100px;max-height:100px}}
/* The origin story forms a balanced text/image pair instead of a broad empty text column. */
.tunnel-case :is(.tc-concept-block.ax-legend,.tc-gallery .ax-object){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.tunnel-case :is(.ax-legend,.ax-object)>div{width:100%;max-width:480px;margin-inline:auto;text-align:center;min-width:0}
.tunnel-case :is(.ax-legend,.ax-object) .ax-label{margin-bottom:20px}
.tunnel-case :is(.ax-legend,.ax-object) p{margin:22px 0 0;color:var(--case-primary)}
.tunnel-case :is(.ax-legend,.ax-object) figure{width:100%;max-width:none;margin:0}
.tunnel-case :is(.tc-concept-block.ax-legend,.tc-gallery .ax-object) figure img{width:100%;height:auto;max-height:none}
@media(max-width:800px){.tunnel-case :is(.tc-concept-block.ax-legend,.tc-gallery .ax-object){grid-template-columns:minmax(0,1fr);gap:28px}}
/* Keep the Hormoz mark, its explanation and colour notes in one compact group. */
.tunnel-case .tc-concept-block.hm-mark{grid-template-columns:minmax(0,480px) minmax(0,600px);justify-content:center;align-items:center;gap:32px}
.tunnel-case .hm-mark .hm-mark-copy{padding:0;text-align:center;min-width:0}
.tunnel-case .hm-mark-copy>p{max-width:440px;margin:0 auto}
.tunnel-case .hm-mark-copy h2{margin:18px 0 22px}
.tunnel-case .hm-mark-copy .hm-colour-notes{justify-content:center;gap:32px;margin-top:26px;text-align:left}
.tunnel-case .hm-mark .hm-mark-stage{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:800px){.tunnel-case .tc-concept-block.hm-mark{grid-template-columns:minmax(0,1fr);gap:26px}.tunnel-case .hm-mark-copy{max-width:480px;justify-self:center}}
/* All four transport pictograms match the height and top edge of their pattern. */
.tunnel-case .hm-mode-panels{container-type:inline-size}
.tunnel-case .hm-mode-panel{--hm-mode-height:clamp(200px,25cqw,380px);grid-template-columns:minmax(0,var(--hm-mode-height)) minmax(0,1fr);gap:24px;align-items:start;min-height:0;padding-top:24px}
.tunnel-case .hm-mode-panel .hm-mode-info{padding:0;border:0;background:transparent;min-height:0;gap:20px}
.tunnel-case .hm-mode-panel .hm-mode-info>img{display:block;width:100%;height:var(--hm-mode-height);max-width:none;object-fit:contain;aspect-ratio:1;border-radius:8px;margin:0}
.tunnel-case .hm-mode-panel>.hm-figure{margin:0;padding:0;justify-content:flex-start}
.tunnel-case .hm-mode-panel>.hm-figure>button{height:var(--hm-mode-height)!important;max-height:none;aspect-ratio:auto!important}
.tunnel-case .hm-mode-panel>.hm-figure img{height:100%;min-height:0;object-fit:cover}
@media(max-width:800px){.tunnel-case .hm-mode-panel{--hm-mode-height:min(320px,100cqw);grid-template-columns:minmax(0,1fr);gap:24px}.tunnel-case .hm-mode-panel .hm-mode-info{flex-direction:column;align-items:center;text-align:center}.tunnel-case .hm-mode-panel .hm-mode-info>img{width:var(--hm-mode-height);max-width:100%}.tunnel-case .hm-mode-info>div{width:100%;max-width:480px}.tunnel-case .hm-mode-info h3,.tunnel-case .hm-mode-info p{max-width:none}}

/* A shared rule for every project explanation, rather than a list of project-specific headings. */
.tunnel-case .tc-editorial-copy{text-align:center;min-width:0}
.tunnel-case .tc-editorial-copy> :is(h2,h3,p),.tunnel-case .tc-editorial-copy>div>:is(h2,h3,p){text-align:center;margin-inline:auto}
.tunnel-case .tc-editorial-copy>p{width:100%;max-width:680px}
.tunnel-case .tc-editorial-stack{display:flex;flex-direction:column;align-items:center;gap:18px}
.tunnel-case .tc-editorial-stack>:is(h2,h3,p,span,div){margin-top:0;margin-bottom:0}
.tunnel-case .tc-editorial-stack>.hm-rule{margin:5px auto}
.tunnel-case .tc-editorial-stack>.ax-text-button{margin-top:4px}
.tunnel-case .tc-editorial-stack>.hm-colour-notes{margin-top:8px}
@media(max-width:800px){.tunnel-case .tc-editorial-stack{gap:14px}}

/* Every content tab shares the same filled active state and project palette. */
.tunnel-case{--case-active:var(--case-primary);--case-tab-ink:#fff}
.tunnel-case.hormoz-case{--case-active:var(--hm-gold,#c36d15)}
.tunnel-case [role="tab"]{transition:background-color .18s,color .18s,border-color .18s}
.tunnel-case [role="tab"][aria-selected="true"],.tunnel-case [role="tablist"] button[aria-pressed="true"]{background:var(--case-active)!important;color:var(--case-tab-ink)!important;border-color:var(--case-active)!important;text-decoration:none}
.tunnel-case [role="tab"][aria-selected="true"] :is(span,small),.tunnel-case [role="tablist"] button[aria-pressed="true"] :is(span,small){color:inherit!important;opacity:1}
.tunnel-case [role="tab"]:focus-visible{outline:2px solid var(--case-active);outline-offset:3px}

.tunnel-case .at-detail-slides{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.tunnel-case .at-detail-slides>figure{margin:0}
/* A compact, balanced copy/motion pair for the And T graphic rhythm. */
.tunnel-case .tc-gallery .at-pattern-film{grid-template-columns:minmax(0,480px) minmax(0,600px);justify-content:center;gap:32px;align-items:center}
.tunnel-case .at-pattern-film>div{width:100%;max-width:480px;margin-inline:auto;min-width:0;text-align:center}
.tunnel-case .at-pattern-film>div>p{max-width:440px;margin-inline:auto}
.tunnel-case .at-pattern-film>figure{width:100%;min-width:0;margin:0}
@media(max-width:800px){.tunnel-case .tc-gallery .at-pattern-film{grid-template-columns:minmax(0,1fr);gap:26px}}

/* Clean editorial caption below the outdoor photograph, with no shading layer. */
.tunnel-case .at-outside{background:transparent;color:var(--case-primary)}
.tunnel-case .at-outside::after{content:none;display:none;background:none}
.tunnel-case .tc-gallery .at-outside-copy{display:flex;flex-direction:column;align-items:center;gap:18px;position:static;inset:auto;padding:25px 0 0;text-align:center;background:none}
.tunnel-case .at-outside-copy h2{margin:0;width:100%;text-align:center;text-shadow:none}
.tunnel-case .at-outside-copy .at-overline{margin:0;text-align:center}
/* Original photographic spreads run at full presentation width, one after another. */
.tunnel-case .tc-gallery .at-photo-grid{grid-template-columns:minmax(0,1fr);gap:24px}
.tunnel-case .at-photo-grid>figure{width:100%;margin:0}

/* Centre the whole editorial block on the page, with media in the following row. */
.tunnel-case .tc-editorial-section{display:flex!important;flex-direction:column!important;align-items:center!important;gap:28px!important}
.tunnel-case .tc-editorial-section>.tc-editorial-copy{order:-1;box-sizing:border-box;align-self:center!important;width:100%!important;max-width:680px!important;margin-inline:auto!important;padding-inline:0;text-align:center}
.tunnel-case .tc-editorial-section>:not(.tc-editorial-copy){box-sizing:border-box;width:100%;max-width:none;min-width:0}
.tunnel-case .tc-editorial-copy{justify-self:center}
@media(max-width:800px){.tunnel-case .tc-editorial-section{gap:22px!important}}
/* Source-ratio columns give the two Axestory photographs the same height without cropping. */
.tunnel-case .tc-gallery .ax-world-pair{grid-template-columns:minmax(0,.799746fr) minmax(0,1.6fr);align-items:start;gap:14px}
.tunnel-case .ax-world-pair>figure,.tunnel-case .ax-world-pair>figure:first-child{width:100%;max-width:none;margin:0;min-width:0}
@media(max-width:800px){.tunnel-case .tc-gallery .ax-world-pair{grid-template-columns:minmax(0,1fr)}}
/* Every Hatefi study uses the same centred construction canvas and coordinates. */
.tunnel-case .hf-construction{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 0;text-align:center}
.tunnel-case .hf-construction .hf-overline{margin:0;text-align:center}
.tunnel-case .tc-concept-block .hf-construction img{display:block;width:min(100%,680px);max-width:680px;height:auto;aspect-ratio:1937 / 537;object-fit:contain;margin:0 auto}

/* Give the original Persian signature its own centred presentation. */
.tunnel-case .hf-persian-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:clamp(28px,5vw,64px) 0;text-align:center}
.tunnel-case .hf-persian-stage .hf-overline{margin:0;text-align:center}
.tunnel-case .tc-concept-block .hf-persian-stage>img{display:block;width:clamp(240px,34vw,460px);max-width:100%;height:auto;max-height:none;margin:0;object-fit:contain}
/* A single invariant reference/result frame height for all five ESSC concepts. */
.tunnel-case .ec-concept-panel{--ec-panel-height:clamp(280px,29vw,500px);align-items:start}
.tunnel-case .ec-concept-panel .ec-concept-visual{height:auto;min-height:0}
.tunnel-case .ec-concept-panel .ec-reference-images{height:var(--ec-panel-height);max-width:none;align-items:stretch}
.tunnel-case .ec-concept-panel .ec-reference-images img{height:100%;max-height:none;aspect-ratio:auto;object-fit:cover}
.tunnel-case .ec-concept-panel>.ec-symbol-study{height:var(--ec-panel-height);min-height:var(--ec-panel-height);box-sizing:border-box;align-self:start;margin-top:0}
.tunnel-case .ec-concept-panel>.ec-concept-arrow{height:var(--ec-panel-height);display:grid;place-items:center;align-self:start;margin:0}
.tunnel-case .ec-concept-copy{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.tunnel-case .ec-concept-copy>:is(h3,p){width:100%;max-width:680px;margin:0 auto;text-align:center}
@media(max-width:800px){.tunnel-case .ec-concept-panel{--ec-panel-height:clamp(260px,65vw,420px)}.tunnel-case .ec-concept-panel>.ec-concept-arrow{height:30px}}

/* The EAI film is an intentional compact copy/film pair, with the whole square visible. */
.tunnel-case .tc-gallery .ea-identity-film.tc-editorial-pair{display:grid;grid-template-columns:minmax(0,440px) minmax(0,min(520px,60svh));justify-content:center;align-items:center;gap:40px;background:transparent;color:var(--case-primary)}
.tunnel-case .tc-gallery .ea-identity-film>.ea-section-head{width:100%;margin:0;padding:0;gap:18px}
.tunnel-case .tc-gallery .ea-identity-film .ea-movie{width:100%;max-width:520px;margin:0}
.tunnel-case .ea-identity-film .tc-motion-frame{--case-frame-ratio:1 / 1!important;aspect-ratio:1!important}
.tunnel-case .tc-gallery .ea-movie>.tc-video-controls{background:transparent;color:var(--case-primary);overflow:visible;border-radius:0}
@media(max-width:800px){.tunnel-case .tc-gallery .ea-identity-film.tc-editorial-pair{grid-template-columns:minmax(0,1fr);gap:26px}.tunnel-case .tc-gallery .ea-identity-film .ea-movie{width:min(100%,60svh);justify-self:center}}
/* Remove inherited side-layout padding and keep the container photograph at full width. */
.tunnel-case .tc-editorial-section{padding-block:24px!important;margin-block:0 24px!important;min-height:0!important;gap:22px!important}
.tunnel-case .tc-editorial-section>.tc-editorial-copy{padding-block:0!important}
.tunnel-case .tc-editorial-section>.hm-container-image{padding:0}
.tunnel-case .hm-container-image>.hm-figure{flex:1 1 100%;width:100%;min-width:0;margin:0}
/* Enlarge the actual And T mark while clipping the empty source-artboard margins. */
.tunnel-case[data-case="and-t"] .tc-hero-art{position:relative;overflow:hidden;min-height:clamp(340px,52svh,560px)}
.tunnel-case[data-case="and-t"] .tc-hero-art>.tc-master-symbol{position:absolute;left:50%;top:50%;width:clamp(620px,70vw,1000px);max-width:none;height:auto!important;max-height:none;transform:translate(-50%,-50%)}
@media(max-width:800px){.tunnel-case[data-case="and-t"] .tc-hero-art>.tc-master-symbol{width:165vw}}

/* The craft photograph is a deliberate compact text-left/image-right composition. */
.tunnel-case .hf-craft.tc-editorial-pair{display:grid;grid-template-columns:minmax(0,480px) minmax(0,600px);justify-content:center;align-items:center;gap:32px}
.tunnel-case .hf-craft.tc-editorial-pair>div{order:-1;width:100%;max-width:480px;margin-inline:auto;text-align:center}
.tunnel-case .hf-craft.tc-editorial-pair>figure{width:100%;max-width:none;margin:0;min-width:0}
@media(max-width:800px){.tunnel-case .hf-craft.tc-editorial-pair{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Three separate original vector components, each centred in an invariant grid cell. */
.tunnel-case .hf-construction-art{--hf-component-size:clamp(70px,13vw,150px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(14px,3vw,40px);width:min(100%,680px);height:var(--hf-component-size);margin:0 auto}
.tunnel-case .tc-concept-block .hf-construction .hf-construction-art>img{width:var(--hf-component-size);height:var(--hf-component-size);max-width:100%;aspect-ratio:1;object-fit:contain;margin:0 auto}