/* SAFU art direction: quiet typography, direct actions, image-led composition. */
.atlas{--atlas-paper:#f3f1ec;--atlas-ink:#20201d}
.atlas .masthead{padding-block:18px;text-shadow:0 1px 12px #0008}
.atlas .masthead .menu-toggle{gap:10px;font-size:0}
.atlas .masthead .menu-icon{width:22px;gap:5px}
.atlas .masthead .menu-icon i{height:1px}
.atlas .masthead .identity{font-size:12px;letter-spacing:.22em;font-weight:600}
.atlas .masthead .top-nav{gap:24px;font-size:10px;letter-spacing:.1em;font-weight:500}
.atlas .masthead .top-nav a{display:inline-flex;align-items:center;min-height:44px}
.atlas .atlas-menu{animation-duration:.35s}
.atlas .atlas-menu-links{border-top:0;margin-top:18px;margin-bottom:32px;padding-top:0}
.atlas-menu-card{font-size:12px;font-weight:400}
.atlas-menu-card strong{font-weight:500}
.atlas-menu-number{display:none}
.atlas-menu-card{grid-template-columns:108px minmax(0,1fr)}

/* The mark and one clear invitation. */
.atlas.reel-home .reel-frame{min-height:560px}
.atlas.reel-home .reel-vignette{background:linear-gradient(180deg,#0007,transparent 30%,transparent 55%,#0009)}
.atlas.reel-home .reel-watch,.atlas.reel-home .reel-frame.intro-stay .reel-watch{top:62%;bottom:auto;transform:translateX(-50%);flex-direction:row;gap:14px;padding:8px;min-height:60px}
.atlas.reel-home .reel-play-ring{width:46px;height:46px;border:1px solid #fff9;background:#10101030;color:#fff;backdrop-filter:blur(5px)}
.atlas.reel-home .reel-play-ring svg{width:15px;height:15px}
.atlas.reel-home .reel-watch:hover .reel-play-ring{transform:scale(1.04);background:#f3f1ec;color:#20201d}
.atlas.reel-home .reel-watch-label{font:500 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.08em;background:none;padding:0;text-shadow:0 1px 12px #000}
.reel-watch-label>span{margin-left:9px}
.atlas.reel-home .reel-frame-bottom{bottom:28px;left:auto;right:var(--pad);width:auto}
.atlas.reel-home .reel-frame-bottom button{font:500 10px Arial,Helvetica,sans-serif;letter-spacing:.06em}
.atlas.reel-home .reel-frame-bottom button:before{width:4px;height:4px;background:currentColor;margin-right:8px}
.reel-attribution{bottom:88px;right:var(--pad);max-width:42%;font-size:9px;letter-spacing:.02em;opacity:.8}
.reel-explore{position:absolute;bottom:28px;left:var(--pad);z-index:7;display:inline-flex;align-items:center;gap:28px;min-height:44px;color:#fff;font:500 12px Arial,Helvetica,sans-serif;letter-spacing:.02em}
.reel-explore span{font-size:18px}
.reel-player-heading h2,.reel-controls{letter-spacing:.03em}

/* Keep images large; reduce repeated instructions. */
.atlas-film-hub{padding-top:0;padding-bottom:64px}
.atlas-hub-head{display:flex;align-items:center;gap:48px;padding:22px 0;border:0}
.atlas-kicker{font-size:14px;font-weight:500;letter-spacing:0}
.atlas-hub-tools{margin-top:0;flex:1;align-items:center}
.atlas-hub-filters{gap:20px}
.atlas-hub-filters button{font-size:11px;font-weight:400;letter-spacing:.01em;min-height:44px;padding:10px 0;color:#676761}
.atlas-hub-filters button[aria-pressed=true]{border-bottom-color:#20201d}
.atlas-hub-filters span{font-size:9px;opacity:.65;margin-left:3px}
.atlas-hub-search{min-width:170px;max-width:200px;border-bottom-color:#20201d40}
.atlas-hub-search input{height:44px;font-weight:400;font-size:12px;letter-spacing:0}
.atlas-film-hub .atlas-project-grid{gap:6px;padding-top:0}
.atlas-film-hub .atlas-project-caption{padding:48px 24px 24px;gap:6px;background:linear-gradient(transparent,#0009)}
.atlas-film-hub .atlas-project-caption h3{font-size:clamp(17px,1.5vw,24px);font-weight:400;line-height:1.14;letter-spacing:-.025em;max-width:28ch}
.atlas-film-hub .atlas-project-caption span{font-size:9px;font-weight:400;letter-spacing:.08em;opacity:.8}
.atlas .stills-section{background:var(--atlas-paper);padding-block:64px 80px}
.direction-section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}
.atlas .atlas-stills-label{font-size:14px;font-weight:500;letter-spacing:0;margin:0}
.direction-section-head>a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
.interior-page .atlas-stills-label{margin-bottom:32px}
.atlas .stills-section .photo-grid{padding:0;column-gap:16px}
.atlas .stills-section .photo-grid figure{margin-bottom:16px}
.atlas .about-section{background:var(--atlas-paper);color:var(--atlas-ink);padding-block:70px 100px;border-top:1px solid #20201d20;gap:48px}
.atlas .about-section>div{grid-column:2}
.atlas .about-section p{font-size:clamp(23px,2.8vw,40px);line-height:1.25;max-width:900px;letter-spacing:-.025em}
.atlas .about-section p+p{font-size:14px;letter-spacing:0;margin-top:24px;color:#62625c}
.atlas .about-section .text-link{font-size:11px;letter-spacing:.04em;margin-top:30px;border-color:#20201d50}
.atlas .contact-section{padding-block:54px 36px;background:#161614;color:#f3f1ec}
.atlas .contact-section .section-heading{margin-bottom:24px}
.atlas .contact-section .section-heading>span{font-size:11px;letter-spacing:.04em}
.atlas .footer-links{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px 36px;border:0}
.atlas .footer-links>a{font-size:11px;letter-spacing:.04em;min-height:44px;display:inline-flex;align-items:center}
.atlas .footer-links>a:first-child{font-size:clamp(21px,3vw,40px);font-weight:400;letter-spacing:-.03em;text-transform:lowercase}
.atlas .footer-links>span{grid-column:1/-1;font-size:10px;color:#a7a79f;margin-top:20px;letter-spacing:.03em}

/* Project titles carry the hierarchy; controls stay understated. */
.atlas-film-copy>span{font-size:10px;font-weight:400;letter-spacing:.1em;margin-bottom:20px}
.atlas-film-copy h1{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(36px,5.4vw,78px);line-height:1.03;letter-spacing:-.045em;max-width:18ch}
.atlas-film-enter{width:80px;height:80px;font-weight:400;font-size:10px;letter-spacing:.05em;border-color:#fff8;background:#09090930;box-shadow:none}
.atlas-film-enter:hover,.atlas-film-enter:focus-visible{transform:scale(1.04)}
.atlas-film-copy>a{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;font-size:10px;letter-spacing:.05em}
.atlas-hero-rails strong,.atlas-film-rails strong{font:400 13px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}
.atlas-film-rails a{font-size:9px;font-weight:400;border-top-color:#fff4;gap:7px}
.atlas-project-notes,.atlas-project-frames{padding-block:64px}
.atlas-project-notes .atlas-detail-heading{border:0;padding:0}
.atlas-project-notes .atlas-detail-heading h2{font:400 clamp(25px,3vw,44px)/1.12 Arial,Helvetica,sans-serif;letter-spacing:-.03em;max-width:28ch;margin:20px 0 30px}
.atlas-detail-heading>span,.atlas-detail-heading>a,.atlas-project-copy h3{font-size:10px;font-weight:400;letter-spacing:.08em}
.atlas-project-frames .atlas-detail-heading{border:0;padding:0;margin-bottom:28px}

/* Studio becomes a concise statement instead of a second homepage. */
.about-page{background:var(--atlas-paper);color:var(--atlas-ink)}
.atlas.about-page .masthead{color:var(--atlas-ink);background:var(--atlas-paper);text-shadow:none}
.about-main{min-height:100svh;display:flex;flex-direction:column}
.about-main>.contact-section{flex-shrink:0}
.studio-overview{width:min(100%,640px);margin-inline:auto;padding:140px 28px 100px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;text-align:center}
.direction-eyebrow{grid-column:1/-1;font-size:14px}
.studio-overview h1{font-size:clamp(22px,2.2vw,28px);font-weight:400;line-height:1.3;letter-spacing:-.025em}
.studio-overview-heading p{margin-top:12px;font-size:13px;line-height:1.6;color:#62625c}
.studio-overview-copy{max-width:520px;font-size:14px;line-height:1.8;letter-spacing:0}
.studio-overview-copy p{text-wrap:balance}
.studio-overview-copy p+p{margin-top:22px}
.studio-overview-copy .text-link{margin-top:26px;font-size:12px;letter-spacing:0;border-color:#20201d50;min-height:44px}

/* A real address is the main event; waves remain a quiet background. */
.contact-stage canvas{opacity:.26}
.contact-ui{padding:120px var(--pad) 30px;letter-spacing:0;text-transform:none}
.contact-top{font-size:14px}
.contact-invitation h1{font:400 clamp(15px,2vw,24px)/1.4 Arial,Helvetica,sans-serif;letter-spacing:-.02em;color:#b8b8b0;margin-bottom:18px}
.contact-invitation .contact-email{pointer-events:auto;display:inline-block;font-size:clamp(24px,6.2vw,94px);line-height:1.2;letter-spacing:-.055em;user-select:all}
.contact-invitation .contact-email:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px}
.contact-bottom{justify-content:space-between;font-size:11px}
.contact-bottom a,.contact-bottom button{border:0;letter-spacing:.04em}
.contact-toast{top:auto!important;bottom:90px;border:0;background:#161614;letter-spacing:0;text-transform:none}

@media(max-width:1000px){
 .atlas-hub-head{gap:28px;align-items:start;flex-wrap:wrap}
 .atlas-hub-tools{flex-basis:100%;gap:12px;margin-top:-12px}
}
@media(max-width:850px){
 .atlas .masthead{grid-template-columns:1fr auto;padding:14px 20px;gap:0}
 .atlas .masthead .identity{display:block;grid-column:1;grid-row:1;justify-self:start;font-size:11px}
 .atlas .masthead .menu-toggle{grid-column:2;grid-row:1;justify-self:end;min-width:44px;justify-content:flex-end}
 .atlas .masthead .top-nav{display:none!important}
 html{scroll-padding-top:90px}
 .atlas .atlas-menu{padding-top:18px}
 .atlas .atlas-menu .atlas-menu-links{gap:8px 22px}
 .atlas.reel-home .reel-frame{height:100svh;min-height:500px}
 .atlas.reel-home .reel-watch,.atlas.reel-home .reel-frame.intro-stay .reel-watch{top:62%;bottom:auto}
 .atlas.reel-home .reel-frame-bottom{bottom:20px;right:20px}
 .reel-explore{bottom:20px;left:20px}
 .reel-attribution{right:20px;bottom:78px;font-size:9px;max-width:65%}
 .atlas-hub-head{padding-block:24px 18px;gap:26px}
 .atlas-hub-filters{gap:8px 18px}
 .atlas-hub-search{max-width:none;flex-basis:100%;min-width:0}
 .atlas-hub-search input{font-size:16px}
 .atlas-film-hub .atlas-project-caption{padding:44px 20px 20px}
 .atlas .about-section{grid-template-columns:1fr;gap:28px;padding-block:50px 65px}
 .atlas .about-section>div{grid-column:1}
 .atlas .about-section p{font-size:28px}
 .studio-overview{padding:120px 24px 80px;gap:30px}
 .studio-overview h1{font-size:24px}
 .studio-overview-copy{font-size:14px;max-width:520px;padding-top:0}
 .contact-ui{padding-top:110px}
}
@media(max-width:600px){
 .atlas-film-hub .atlas-project-grid{gap:5px}
 .atlas .stills-section{padding-block:42px 54px}
 .direction-section-head{margin-bottom:20px}
 .atlas .footer-links{grid-template-columns:1fr auto;gap:12px 20px}
 .atlas .footer-links>a:first-child{grid-column:1/-1;font-size:27px}
 .atlas .footer-links>a:nth-child(2){grid-column:1}
 .atlas .footer-links>a:nth-child(3){grid-column:2}
 .atlas .footer-links>span{margin-top:8px}
 .atlas-film-intro{gap:24px;padding-top:90px}
 .atlas-film-copy h1{font-size:clamp(30px,7.6vw,46px)}
 .atlas-film-enter{width:64px;height:64px;font-size:9px;justify-self:start}
 .atlas-film-rails strong{font-size:11px}
 .atlas-project-notes,.atlas-project-frames{padding-block:48px}
 .atlas-project-notes .atlas-detail-heading h2{font-size:28px}
 .contact-invitation .contact-email{font-size:clamp(24px,7.6vw,44px)}
}
@media(prefers-reduced-motion:reduce){.atlas .reel-watch{transform:translateX(-50%)}}
/* Align section anchors with the header and keep phone filtering to one row. */
html{scroll-padding-top:80px}
.direction-filter-select{display:none}
@media(max-width:850px){
 html{scroll-padding-top:72px}
 .atlas-hub-tools{flex-wrap:nowrap;align-items:center;gap:20px}
 .atlas-hub-filters{display:none}
 .direction-filter-select{display:block;flex:0 0 142px;border-bottom:1px solid #20201d40}
 .direction-filter-select select{width:100%;height:44px;border:0;border-radius:0;background:transparent;color:var(--atlas-ink);font:400 13px Arial,Helvetica,sans-serif}
 .direction-filter-select select:focus-visible{outline:2px solid currentColor;outline-offset:4px}
 .atlas-hub-search{flex:1;max-width:none;min-width:0}
}
/* Captions sit outside the frame, leaving films and embedded titles untouched. */
.atlas-film-hub .atlas-project-grid{row-gap:12px}
.atlas-film-hub .atlas-project-card{background:var(--atlas-paper)}
.atlas-film-hub .atlas-project-caption{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;margin:0;padding:15px var(--pad) 22px;background:none;color:var(--atlas-ink);text-shadow:none;align-items:baseline}
.atlas-film-hub .atlas-project-caption h3{font-size:clamp(14px,1.15vw,18px);font-weight:400;line-height:1.3;letter-spacing:-.02em;max-width:none}
.atlas-film-hub .atlas-project-caption span{grid-column:2;grid-row:1;font-size:9px;letter-spacing:.04em;color:#686861;white-space:nowrap;opacity:1}
@media(max-width:600px){
 .atlas-film-hub .atlas-project-caption{padding:13px 20px 20px;gap:12px}
 .atlas-film-hub .atlas-project-caption h3{font-size:14px}
 .atlas-film-hub .atlas-project-caption span{font-size:8px}
}
/* Quiet hierarchy still needs comfortable reading and hit areas. */
.atlas .masthead .identity{display:inline-flex;align-items:center;min-height:44px}
.atlas .masthead .top-nav{font-size:11px}
.atlas-hub-filters button{font-size:12px}
.atlas-hub-filters span{font-size:10px}
.atlas-hub-search input{font-size:14px}
.atlas-film-hub .atlas-project-caption span{font-size:10px}
.contact-invitation .contact-email{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:850px){.atlas-hub-search input{font-size:16px}}
@media(max-height:500px) and (min-width:501px){
 .atlas-film-intro{grid-template-columns:minmax(0,1fr) 64px;align-items:center;align-content:center;gap:24px;padding:80px 20px 72px}
 .atlas-film-copy>span{display:none}
 .atlas-film-copy h1{font-size:26px;line-height:1.06;max-width:28ch}
 .atlas-film-copy>a{margin-top:8px}
 .atlas-film-enter{width:64px;height:64px;justify-self:end}
}
/* Stills use a uniform crop in the grid; the viewer retains the source ratio. */
.atlas .stills-section .photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;columns:auto}
.atlas .stills-section .photo-grid figure{margin:0;min-width:0}
.atlas .stills-section .photo-grid a{display:block;aspect-ratio:3/2;overflow:hidden}
.atlas .stills-section .photo-grid img{width:100%;height:100%;object-fit:cover}
@media(max-width:850px){.atlas .stills-section .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.atlas .stills-section .photo-grid{grid-template-columns:1fr}}
/* Manrope type trial: display hierarchy and wordmark; body copy stays neutral. */
@font-face{font-family:Manrope;src:url('/fonts/manrope/Manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
body.atlas{--font-display:Manrope,Arial,Helvetica,sans-serif}
body.atlas h1,body.atlas h2,body.atlas h3,body.atlas h4,body.atlas h5,body.atlas h6,
body.atlas .atlas-project-caption h3,body.atlas .atlas-project-notes .atlas-detail-heading h2,
body.atlas .masthead .identity,body.atlas .atlas-kicker,body.atlas .atlas-stills-label,
body.atlas .atlas-menu-card strong,body.atlas .atlas-film-rails strong,body.atlas .atlas-chapter-card strong,
body.atlas .contact-email,body.atlas .footer-links>a:first-child,body.atlas .about-section p:first-child{font-family:var(--font-display)}
/* Project frames align in rows instead of leaving an empty masonry column. */
.atlas .atlas-project-frames .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;columns:auto;padding:0}
.atlas .atlas-project-frames .photo-grid figure{min-width:0;margin:0}
.atlas .atlas-project-frames .photo-grid a{display:block;aspect-ratio:16/9;overflow:hidden}
.atlas .atlas-project-frames .photo-grid img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.atlas .atlas-project-frames .photo-grid{grid-template-columns:1fr;gap:12px}}
/* Dedicated Stills page starts just below the fixed navigation. */
.atlas.light-page .interior-page{padding-top:104px}
.atlas.light-page .interior-page>.stills-section{padding-top:20px}
@media(max-width:850px){.atlas.light-page .interior-page{padding-top:88px}}
/* Footer contact stays compact and consistent with the other links. */
.atlas .footer-links>a:first-child{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
/* Contact uses a small, centered typographic layer above the animated field. */
.contact-stage{isolation:isolate}
.contact-stage canvas{z-index:0}
.contact-ui{z-index:1;align-items:center;text-align:center;text-transform:uppercase}
.contact-top{justify-content:center;font-size:10px;letter-spacing:.1em}
.contact-invitation{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;background:#050505;max-width:100%}
.contact-invitation h1{margin:0;font-size:10px;line-height:1.5;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.contact-invitation .contact-email{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;min-height:44px}
.contact-invitation .contact-email:hover{text-underline-offset:5px}
.contact-bottom{justify-content:center;gap:40px;font-size:10px;letter-spacing:.08em}
.contact-bottom a,.contact-bottom button{font-size:10px;letter-spacing:.08em}
.contact-toast{z-index:2;text-align:center;max-width:calc(100% - 40px)}
@media(max-width:600px){.contact-invitation{padding:16px 12px}.contact-bottom{gap:32px}}

/* A quiet location marker, with no shift in the navigation layout. */
.atlas .masthead .top-nav a[aria-current],.atlas .atlas-menu-links a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* One palette and one control across all routes. Media keeps its original colors. */
html[data-theme]{--page-bg:#f3f1ec;--page-ink:#20201d;--page-muted:#62625c;--page-line:#20201d30;--contact-bg:#f3f1ec;--contact-ink:#20201d;--contact-muted:#62625c;color-scheme:light}
html[data-theme="dark"]{--page-bg:#050505;--page-ink:#eeeee9;--page-muted:#aaa9a2;--page-line:#eeeee930;--contact-bg:#050505;--contact-ink:#eeeee9;--contact-muted:#b8b8b0;color-scheme:dark}
html[data-theme] .atlas{--atlas-paper:var(--page-bg);--atlas-ink:var(--page-ink);--muted:var(--page-muted);--line:var(--page-line);background:var(--page-bg);color:var(--page-ink)}
html[data-theme] .atlas .stills-section,
html[data-theme] .atlas .contact-section,
html[data-theme] .atlas .atlas-project-notes{background:var(--page-bg);color:var(--page-ink);border-color:var(--page-line)}
html[data-theme] .atlas .about-section{border-color:var(--page-line)}
html[data-theme] .atlas .about-section p,
html[data-theme] .atlas .studio-overview-heading p,
html[data-theme] .atlas .atlas-project-caption span,
html[data-theme] .atlas .footer-links>span,
html[data-theme] .atlas .atlas-menu-card small,
html[data-theme] .atlas .atlas-project-copy .project-copy,
html[data-theme] .atlas .atlas-no-results{color:var(--page-muted)}
html[data-theme] .atlas .about-section .text-link,
html[data-theme] .atlas .atlas-detail-heading,
html[data-theme] .atlas .atlas-hub-search{border-color:var(--page-line)}
html[data-theme] .atlas .atlas-hub-filters button{color:var(--page-muted)}
html[data-theme] .atlas .atlas-hub-filters button[aria-pressed=true],
html[data-theme] .atlas .atlas-hub-filters button:hover{color:var(--page-ink);border-color:currentColor}
html[data-theme] .atlas .atlas-hub-search input::placeholder{color:var(--page-muted);opacity:1}
html[data-theme] .contact-stage,
html[data-theme] .contact-invitation,
html[data-theme] .contact-exp{background:var(--contact-bg);color:var(--contact-ink)}
html[data-theme] .contact-ui{color:var(--contact-ink)}
html[data-theme] .contact-invitation h1{color:var(--contact-muted)}
html[data-theme] .atlas.contact-exp .masthead{background:var(--contact-bg);color:var(--contact-ink);text-shadow:none}
html[data-theme] .contact-toast{background:var(--contact-bg);color:var(--contact-ink)}
.atlas .masthead .site-theme-toggle{position:absolute;left:calc(var(--pad) + 44px);top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;padding:0;color:inherit}
.site-theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.site-theme-toggle .theme-moon{display:block}
.site-theme-toggle .theme-sun{display:none}
[data-theme="dark"] .site-theme-toggle .theme-moon{display:none}
[data-theme="dark"] .site-theme-toggle .theme-sun{display:block}
html[data-theme] .contact-bottom button:focus-visible,
html[data-theme] .contact-bottom a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
@media(max-width:850px){.atlas .masthead .site-theme-toggle{left:auto;right:68px}}