@font-face{font-family:Space;src:url('assets/space-grotesk-regular.ttf');font-display:swap}
:root{--bg:#0b0b0b;--surface:#141414;--text:#ededed;--muted:#9b9b9b;--line:#2c2c2c;--accent:#d6d6d6}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--text);font-family:Space,Arial,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}::selection{background:var(--accent);color:var(--bg)}.skip{position:fixed;top:12px;left:20px;transform:translateY(-200%);z-index:100;padding:14px;background:var(--text);color:var(--bg)}.skip:focus{transform:none}
.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;padding:22px 6%;display:flex;align-items:center;justify-content:space-between}.wordmark{display:inline-flex;align-items:center;flex-shrink:0}.brand-logo{display:block;width:68px;height:68px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}.site-header nav{display:flex;gap:34px;font-size:14px}.site-header nav a{padding:12px 0;color:var(--muted);text-shadow:0 1px 12px rgb(7 7 7/.85)}.site-header nav a:hover{color:var(--text)}
.canvas-section{position:relative;padding:64px 8% 100px;background:var(--bg)}.section-heading{margin-bottom:40px}.section-heading h2{font-size:22px;letter-spacing:-.025em;font-weight:400;margin:0}.artboards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 32px}.board-label{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:18px}.board-label strong{font-weight:400;font-size:22px;letter-spacing:-.025em}.board-label>span{color:var(--muted);font-size:14px;text-align:right}
.outside{padding:55px 8% 0;border-top:1px solid var(--line)}.contact{display:block;font-size:clamp(38px,5.5vw,76px);line-height:1.15;letter-spacing:-.05em;padding:25px 0 80px}.contact:hover{color:var(--accent)}.footer-line{padding:25px 8%;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line)}.outside .footer-line{padding-left:0;padding-right:0}.footer-line .brand-logo{width:58px;height:58px}.social-links{display:flex;gap:28px;font-size:14px;color:var(--muted)}.social-links a:hover{color:var(--text)}
/* Project pages */
.project-page .site-header{position:relative}.project-intro{padding:62px 8% 25px}.project-intro h1{font-size:clamp(54px,8.5vw,132px);font-weight:400;line-height:1.04;letter-spacing:-.06em;margin:0 0 30px}.project-summary p{margin:0;max-width:580px;line-height:1.65;color:var(--muted)}.chapter-nav{display:flex;flex-wrap:wrap;gap:18px 32px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.chapter-nav a:hover{color:var(--text)}.project-content{padding:0 8%}.project-group{margin:42px 0 90px;scroll-margin-top:30px}.group-heading{margin-bottom:28px}.group-heading h2{font-size:24px;letter-spacing:-.025em;font-weight:400;margin:0}.piece-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px;align-items:start}.piece-grid figure{margin:0}.piece{display:block;background:none;border:0;padding:0;width:100%;cursor:zoom-in}.piece img{display:block;width:100%;height:auto;background:var(--surface)}.piece-grid figcaption{font-size:14px;display:flex;justify-content:space-between;gap:20px;line-height:1.5;margin-top:14px;color:var(--muted)}.source{color:var(--accent);white-space:nowrap;font-size:12px}.source:hover{text-decoration:underline}.next-layer{display:block;position:relative;border-top:1px solid var(--line);padding:65px 8%;background:var(--surface)}.next-layer .eyebrow{display:block;font-size:12px;letter-spacing:.14em;color:var(--muted);margin-bottom:22px}.next-layer strong{font-size:clamp(38px,5.5vw,76px);font-weight:400;letter-spacing:-.045em;display:block;padding-right:60px}.next-plus{position:absolute;right:8%;top:50%;font-size:48px;color:var(--accent);transform:translateY(-50%)}
.lightbox{border:0;color:var(--text);background:var(--bg);width:100vw;height:100svh;max-width:none;max-height:none;padding:0;margin:0;overflow:hidden}.lightbox::backdrop{background:#0d0d0ded;backdrop-filter:blur(12px)}.lightbox[open]{display:flex;flex-direction:column}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 4%;flex-shrink:0;font-size:14px}.viewer-top{min-height:68px}.viewer-title{color:var(--muted)}.viewer-top button,.viewer-bottom button{border:1px solid var(--line);border-radius:30px;background:transparent;padding:11px 22px;font-size:14px;min-height:44px}.viewer-top button:hover,.viewer-bottom button:hover{background:var(--surface)}.viewer-close{white-space:nowrap}.viewer-close span{padding-left:10px;font-size:20px}.viewer-image{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 5%}.viewer-image img{max-height:100%;max-width:100%;object-fit:contain}.viewer-count{color:var(--muted)}.viewer-bottom{padding-bottom:max(20px,env(safe-area-inset-bottom))}
@media(max-width:700px){.site-header{padding:14px 5%}.brand-logo{width:60px;height:60px}.site-header nav{gap:25px}.canvas-section{padding:38px 7% 65px}.section-heading{margin-bottom:28px}.artboards{grid-template-columns:1fr;gap:42px}.board-label{margin-top:15px}.board-label strong{font-size:21px}.board-label>span{font-size:14px}.outside{padding:35px 7% 0}.contact{padding:22px 0 55px;font-size:clamp(34px,8.5vw,56px)}.footer-line{padding:22px 7%;gap:20px}.social-links{gap:20px}.footer-line .brand-logo{width:50px;height:50px}.project-intro{padding:42px 7% 20px}.project-intro h1{font-size:clamp(46px,12vw,78px);margin-bottom:24px}.chapter-nav{margin-top:30px;gap:16px 24px;line-height:1.5}.project-content{padding:0 7%}.project-group{margin:32px 0 64px}.piece-grid{grid-template-columns:1fr;gap:32px}.group-heading h2{font-size:22px}.group-heading{margin-bottom:24px}.next-layer{padding:50px 7%}.next-plus{font-size:38px}.viewer-title{font-size:12px;max-width:63%}.viewer-top{padding:16px 5%}.viewer-top button,.viewer-bottom button{padding:10px 16px}.viewer-image{padding:0 2%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.project-index{display:grid;gap:84px}.project-panel{display:block;min-width:0}.project-cover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;aspect-ratio:12/5;overflow:hidden;background:#0b0b0b}.project-cover img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;transition:transform .65s ease}.project-panel .board-label{margin-top:22px}.project-panel .board-label strong{font-size:clamp(26px,3.1vw,44px)}.project-panel .board-label>span{font-size:14px}.cover-thel{background:#f5c928}.cover-saudi-eleague{background:#0098c8}.cover-mufcnet{background:#121212}.cover-hail{background:#072555}
@media(hover:hover){.project-panel:hover .project-cover img,.next-project:hover .project-cover img{transform:scale(1.025)}}
.next-project{display:block;padding:60px 8% 80px;border-top:1px solid var(--line)}.next-label{display:block;font-size:14px;color:var(--muted);margin-bottom:26px}.next-project .project-cover{max-height:450px}.next-project strong{display:block;font-weight:400;font-size:clamp(30px,4vw,60px);letter-spacing:-.04em;margin-top:24px}.season-title{font-size:clamp(38px,5vw,64px);font-weight:400;letter-spacing:-.04em;padding-top:34px;margin:0 0 25px;border-top:1px solid var(--line)}.season{scroll-margin-top:35px}.season+.season{margin-top:75px}.group-heading h3{font-size:24px;font-weight:400;letter-spacing:-.025em;margin:0}.project-summary p[lang=ar]{text-align:left;font-family:Arial,sans-serif;font-size:20px}
.logo-transition{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-items:center;pointer-events:none;animation:logo-reveal .45s ease .85s both}.logo-transition .brand-logo{width:142px;height:142px;animation:logo-appear .65s ease both}.logo-transition.leaving{animation:none;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s}.logo-transition.leaving .brand-logo{animation:logo-appear .25s ease both}
@keyframes logo-appear{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes logo-reveal{to{opacity:0;visibility:hidden}}
@media(max-width:700px){.project-index{gap:52px}.project-cover{grid-template-columns:1fr;aspect-ratio:4/5}.project-cover img:not(:first-child){display:none}.project-panel .board-label{display:block;margin-top:18px}.project-panel .board-label strong{font-size:28px}.project-panel .board-label>span{display:block;text-align:left;margin-top:5px}.next-project{padding:45px 7% 55px}.next-project .project-cover{max-height:none}.next-project strong{font-size:34px;margin-top:20px}.next-label{margin-bottom:20px}.group-heading h3{font-size:22px}.season-title{padding-top:26px}.logo-transition .brand-logo{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.logo-transition{display:none}.logo-transition.leaving{display:none}.project-cover img{transform:none!important}}
/* Cover proportions follow the artwork. */
.cover-espl{background:transparent}.cover-ewc{background:transparent}.cover-mufcnet{grid-template-columns:1fr;aspect-ratio:16/8;background:#fff}.cover-mufcnet img{object-fit:contain;padding:24px}
.cover-thel{grid-template-columns:1.15fr 1fr;aspect-ratio:16/8;gap:0;background:#e5ae3f}.cover-thel img:first-child{object-fit:contain;filter:grayscale(1) contrast(20);mix-blend-mode:multiply}.cover-thel img:nth-child(2){object-fit:cover}
.cover-hail{grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:3/1;background:transparent;gap:0}.cover-hail img{object-fit:contain}
.logo-transition .loading-mark{display:grid;justify-items:center;gap:10px}.loading-line{width:96px;height:2px;background:#393939;display:block;overflow:hidden}.loading-line>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--load-progress,.12));transform-origin:left;transition:transform .3s ease}.logo-transition.is-loading{animation:none;opacity:1;visibility:visible;pointer-events:auto}.logo-transition.ready{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}.logo-transition.leaving{animation:none;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease}.logo-transition.leaving .loading-line>span{transform:scaleX(.7)}
@media(max-width:700px){.cover-mufcnet{aspect-ratio:1}.cover-mufcnet img{padding:12px}.cover-thel{grid-template-columns:1fr 1fr;aspect-ratio:4/3}.cover-thel img:nth-child(2){display:block}.cover-hail{grid-template-columns:1fr;aspect-ratio:1}.loading-line{width:78px}.logo-transition .loading-mark{gap:5px}}
@media(prefers-reduced-motion:reduce){.logo-transition.is-loading,.logo-transition.leaving{display:none}}
/* MUFCNET returns to its three illustrations. */
.cover-mufcnet{grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:12/5;background:#121212;gap:4px}.cover-mufcnet img{padding:0;object-fit:contain}
/* Keep the Thel colour layer still and isolated from hover compositing. */
.cover-thel{grid-template-columns:1.2fr .8fr 1fr;aspect-ratio:12/5;gap:0;background:#e5ae3f;isolation:isolate}
.cover-thel img{display:block;object-fit:cover;transition:none!important;transform:none!important;mix-blend-mode:normal;filter:none}
.cover-thel img:first-child{object-fit:contain;filter:grayscale(1) contrast(20);mix-blend-mode:multiply;position:relative;z-index:0}
.cover-thel img:nth-child(2),.cover-thel img:nth-child(3){object-fit:cover}
@media(max-width:700px){
 .cover-mufcnet{grid-template-columns:1fr;aspect-ratio:4/5}
 .cover-thel{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
 .cover-thel img:first-child{grid-column:1/-1;width:100%;height:100%}
 .cover-thel img:nth-child(2),.cover-thel img:nth-child(3){display:block;width:100%;height:100%}
}
/* Muted cinematic light sits behind the whole site, independent of artwork. */
:root{--bg:#0b0b0b;--surface:#141414}
body{position:relative;isolation:isolate;background:var(--bg)}
body:before{content:'';position:fixed;inset:-18%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 52% 48% at 78% 22%,#4e4e4e88,transparent 74%),radial-gradient(ellipse 48% 50% at 13% 79%,#39393988,transparent 75%),radial-gradient(ellipse 37% 40% at 52% 55%,#3c3c3c33,transparent 80%);animation:cinematic-light 22s ease-in-out infinite alternate;will-change:transform}
@keyframes cinematic-light{from{transform:translate3d(-3%,-2%,0) rotate(-3deg)}to{transform:translate3d(4%,3%,0) rotate(4deg)}}
.canvas-section{padding-top:24px;background:transparent}
/* Clip each image within its own colour surface while it scales. */
.cover-thel{isolation:isolate;grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:1fr;gap:0}
.cover-thel .cover-cell{display:block;position:relative;overflow:hidden;isolation:isolate;min-width:0;min-height:0;background:#e5ae3f}
.cover-thel .cover-cell img{display:block;width:100%;height:100%;position:static;object-fit:cover;filter:none;mix-blend-mode:normal;transform:scale(1)!important;transition:transform .65s ease!important}
.cover-thel .cover-cell:first-child img{object-fit:contain;filter:grayscale(1) contrast(20);mix-blend-mode:multiply}
@media(hover:hover){.project-panel:hover .cover-thel .cover-cell img,.next-project:hover .cover-thel .cover-cell img{transform:scale(1.025)!important}}
.project-panel:focus-visible .cover-thel .cover-cell img,.next-project:focus-visible .cover-thel .cover-cell img{transform:scale(1.025)!important}
@media(max-width:700px){
 .canvas-section{padding-top:20px}
 .cover-thel{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
 .cover-thel .cover-cell:first-child{grid-column:1/-1}
 .cover-thel .cover-cell img{grid-column:auto;width:100%;height:100%}
}
@media(prefers-reduced-motion:reduce){body:before{animation:none;will-change:auto}.cover-thel .cover-cell img{transform:none!important;transition:none!important}}
/* Broad, low-contrast light with fine dither instead of visible gradient bands. */
body:before{background:linear-gradient(135deg,#17171700 8%,#34343466 45%,#20202011 75%),radial-gradient(ellipse 72% 95% at 80% 12%,#4d4d4d33,transparent 85%);filter:blur(24px);animation-duration:26s}
body:after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('assets/ambient-grain.svg') repeat;opacity:.075;mix-blend-mode:soft-light}
.canvas-section{padding-top:12px}
/* A separate black-ink layer avoids changing the yellow during cover motion. */
.cover-thel .cover-cell{background:#e5ae3f;isolation:isolate}
.cover-thel .cover-cell .cover-art{display:block;width:100%;height:100%;filter:none;mix-blend-mode:normal;transform:scale(1)!important;transition:transform .65s ease!important;object-fit:cover}
.cover-thel .cover-cell .thel-ink{overflow:visible}
@media(hover:hover){.project-panel:hover .cover-thel .cover-cell .cover-art,.next-project:hover .cover-thel .cover-cell .cover-art{transform:scale(1.025)!important}}
.project-panel:focus-visible .cover-thel .cover-cell .cover-art,.next-project:focus-visible .cover-thel .cover-cell .cover-art{transform:scale(1.025)!important}
@media(max-width:700px){
 .canvas-section{padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.cover-thel .cover-cell .cover-art{transform:none!important;transition:none!important}}

/* ==========================================================================
   Opening: a short introduction next to the Ronaldo poster, in black and white.
   The poster sits to the right, at the full height of the opening so the
   player is always shown whole, and its edges fade into the page.
   ========================================================================== */
:root{color-scheme:dark}
.intro{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding:110px 7% 72px;background:var(--bg)}

/* The poster. Its width follows from its height (16:9); the player (52% across the image)
   stands at 73% of the window. cqh/cqw are the opening's height and width. */
.hero-frame{position:absolute;inset:0;z-index:-2;overflow:hidden;container-type:size;pointer-events:none}
.hero-art{position:absolute;top:0;height:100%;width:auto;max-width:none;aspect-ratio:16/9;
 left:calc(73vw - 92.44vh);left:calc(73cqw - 92.44cqh);user-select:none;-webkit-user-select:none}
/* Shade behind the copy, the page colour at the bottom so Projects follow on, a little under the navigation. */
.intro:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--bg) 0%,rgb(11 11 11/.6) 8%,rgb(11 11 11/0) 20%),linear-gradient(180deg,rgb(6 6 6/.55) 0%,rgb(6 6 6/0) 14%),linear-gradient(90deg,rgb(11 11 11/.9) 0%,rgb(11 11 11/.75) 30%,rgb(11 11 11/.3) 48%,rgb(11 11 11/0) 60%)}

/* Copy */
.intro-text{grid-column:1;grid-row:1;position:relative;z-index:3;max-width:min(60vw,980px)}
.intro h1{margin:0;font-weight:400;font-size:clamp(40px,4.6vw,88px);line-height:1.04;letter-spacing:-.05em}
.intro h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.intro h1 .line>span{display:inline-block;transition:transform 1s cubic-bezier(.16,.84,.24,1)}
.intro h1 .line-2{color:#b4b4b4}
.intro h1 .line-2>span{transition-delay:.1s}
.intro h1 .line-3>span{transition-delay:.2s}
.intro-link{display:inline-flex;align-items:center;gap:56px;margin-top:52px;padding:0 0 16px;border-bottom:1px solid currentColor;color:var(--text);font-size:clamp(16px,1.2vw,20px)}
.intro-link svg{transition:transform .3s ease}
.intro-link:hover svg{transform:translateY(3px)}
.intro-link{transition:opacity .8s ease .5s,transform .8s cubic-bezier(.16,.84,.24,1) .5s}
.intro-link{transition-delay:.65s}

/* Entrance. site.js adds .will-build, so without the script everything simply shows. */
.intro.is-instant,.intro.is-instant *{transition:none!important}
.intro.will-build .hero-art{opacity:0;transform:scale(1.03)}
.intro.will-build h1 .line>span{transform:translate3d(0,108%,0)}
.intro.will-build .intro-link{opacity:0;transform:translate3d(0,10px,0)}
.intro.is-lit .hero-art{opacity:1;transform:none;transition:opacity 1.4s ease,transform 2.6s cubic-bezier(.16,.84,.24,1)}
.intro.is-lit h1 .line>span,.intro.is-lit .intro-link{transform:none;opacity:1}

/* Projects follow straight on from the opening. */
.canvas-section:before{content:'';position:absolute;left:0;right:0;top:0;height:220px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--bg),rgb(11 11 11/0))}
.canvas-section{padding-top:clamp(40px,7vh,88px);padding-top:clamp(40px,7svh,88px)}
.section-heading{margin-bottom:clamp(32px,4.5vw,56px)}
.section-heading h2{font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.045em}

/* Upright screens (phones, iPads held upright): the player at the top, the copy below. */
@media(max-aspect-ratio:1/1){
 .intro{align-items:end;padding:92px 7% 40px}
 .hero-art{top:52px;height:min(62vh,150vw);height:min(62cqh,150cqw);left:calc(50vw - .52 * min(62vh,150vw) * 16 / 9);left:calc(50cqw - .52 * min(62cqh,150cqw) * 16 / 9)}
 .intro:after{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 26%,rgb(11 11 11/.7) 38%,rgb(11 11 11/0) 52%),linear-gradient(180deg,rgb(6 6 6/.6) 0%,rgb(6 6 6/0) 12%)}
 .intro-text{max-width:none}
 .intro h1{font-size:clamp(34px,8.6vw,64px)}
 .intro-link{margin-top:30px;gap:40px;font-size:16px}
}
@media(max-aspect-ratio:1/1) and (min-width:700px){
 .intro{padding:100px 8% 64px}
 .hero-art{height:min(68vh,150vw);height:min(68cqh,150cqw);left:calc(50vw - .52 * min(68vh,150vw) * 16 / 9);left:calc(50cqw - .52 * min(68cqh,150cqw) * 16 / 9)}
 .intro h1{font-size:clamp(48px,7.6vw,80px)}
 .intro-link{margin-top:40px;font-size:19px}
}
/* Phones on their side: the computer layout, smaller, with the player clear of the menu. */
@media(orientation:landscape) and (max-height:560px){
 .intro{min-height:0;padding:84px 6% 28px}
 .hero-art{top:36px;height:calc(100% - 20px);left:calc(73vw - .52 * (100vh - 20px) * 16 / 9);left:calc(73cqw - .52 * (100cqh - 20px) * 16 / 9)}
 .intro h1{font-size:clamp(28px,4.8vw,44px)}
 .intro-link{margin-top:22px;font-size:15px;padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
 .intro h1 .line>span,.intro-link,.hero-art{transform:none;opacity:1;transition:none}
}

/* Phones: one cover per project. Thmanyah Football shows its third image; Posters and Thel have a
   cover made for phones (img.cover-phone), hidden on larger screens. */
.project-panel .project-cover img.cover-phone{display:none}
@media(max-width:700px){
 .project-panel .cover-thmanyah img:first-child{display:none}
 .project-panel .cover-thmanyah img:nth-child(3){display:block}
 .project-panel .project-cover:has(.cover-phone)>*{display:none}
 .project-panel .cover-posters>img:not(.cover-phone),.project-panel .cover-thel>.cover-cell{display:none}
 .project-panel .project-cover img.cover-phone{display:block;width:100%;height:100%;object-fit:cover}
 .project-panel .cover-thel{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/5;background:var(--bg)}
}

/* ==========================================================================
   Loading screen, shown when a visitor arrives from outside the site.
   The script in the page head adds html.is-booting; boot.js plays it
   (the logo fills, then the view goes through it) and removes the class. Without scripts, or
   with reduced motion, none of this shows.
   ========================================================================== */
.boot{display:none}
html.is-booting{overflow:hidden}
html.is-booting .boot{display:block;position:fixed;inset:0;z-index:1000}
html.is-booting .logo-transition{display:none!important}
.boot-logo{display:block;filter:invert(1)}                 /* the logo file is black on transparent */
.boot-pct{font-size:13px;letter-spacing:.14em;color:#9b9b9b;font-variant-numeric:tabular-nums}
/* The opening image is part of the loading screen here, so it is already in place underneath. */
html.boot-art .intro.will-build .hero-art{opacity:1;transform:none;transition:none}

/* 3. The logo fills with white as the page loads; then it becomes a window onto the page and the view goes through it. */
html.is-booting .boot-3{display:grid;place-items:center}
.boot-3 .boot-window{position:absolute;inset:0;background:#0b0b0b}
.boot-3 .boot-window.is-window{
 -webkit-mask-image:url('assets/am-logo.png'),linear-gradient(#000,#000);mask-image:url('assets/am-logo.png'),linear-gradient(#000,#000);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude;
 -webkit-mask-size:var(--ms) var(--ms),100% 100%;mask-size:var(--ms) var(--ms),100% 100%;
 -webkit-mask-position:var(--mx) var(--my),0 0;mask-position:var(--mx) var(--my),0 0}
.boot-3 .boot-mark{position:relative;display:grid;justify-items:center;gap:6px}
.boot-3 .boot-fill{position:relative;display:block;width:170px;height:170px}
.boot-3 .boot-fill .boot-logo{position:absolute;inset:0;width:100%;height:100%}
.boot-3 .boot-logo.dim{opacity:.14}
/* The shape spans 17.8% to 82.1% of the image's height: fill exactly that span. */
.boot-3 .boot-logo.full{clip-path:inset(calc((.821 - .643 * var(--p,0)) * 100%) 0 0 0)}
@media(max-width:700px){.boot-3 .boot-fill{width:140px;height:140px}}

/* Contact: the address itself, with a copy button (shown by site.js). */
.outside .contact{padding-bottom:12px}
.contact-email{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 80px;font-size:clamp(17px,1.4vw,21px);color:var(--muted)}
.contact-email a{border-bottom:1px solid transparent}
.contact-email a:hover{color:var(--text);border-bottom-color:currentColor}
.copy-email{min-height:36px;padding:0 15px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--text);font-size:13px;letter-spacing:.02em}
.copy-email:hover{background:var(--surface)}
@media(max-width:700px){.outside .contact{padding-bottom:10px}.contact-email{margin-bottom:56px;font-size:17px}}