/* Military field-album identity. Dials: variance 5 / motion 5 / density 4.
   Existing olive brand, authentic photographs and information architecture remain.
   21st.dev references: topographic contours + one-shot scroll reveal, independently implemented.
   Layers: decoration 0, section content 1; existing nav and controls remain above. */
:root{--display:"Times New Roman",Times,serif;--ornament:#b9c398}
/* One fixed terrain layer behind content; never intercepts input. */
body{position:relative;isolation:isolate}
#terrain-background{position:fixed;inset:0;width:100%;height:100dvh;z-index:-1;pointer-events:none;opacity:.45}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;background:repeating-radial-gradient(ellipse at 110% 35%,transparent 0 32px,var(--ornament) 33px 34px,transparent 35px 58px);mask-image:linear-gradient(90deg,transparent,#000)}
.terrain-ready body:before{display:none}
body:has(.page-content) #terrain-background{opacity:.12}
html.reading-active body:before{display:none}
@media(max-width:767px){#terrain-background{opacity:.35}}
.home-hero{position:relative;isolation:isolate;grid-template-columns:1fr 1.15fr;gap:48px;padding-block:54px 48px}
.hero-copy h1{font-family:var(--display);font-size:clamp(54px,5.9vw,87px);font-weight:400;line-height:1;letter-spacing:-.045em;margin-bottom:28px}
.hero-copy h1 em{font-style:italic;font-weight:400;display:inline-block;padding-bottom:.08em}
.hero-lead{font-size:14px;max-width:none;clear:both}
.hero-lead>span{display:block}
.hero-photo{position:relative;overflow:visible;transform:rotate(1.1deg);padding:10px;background:var(--surface);border:1px solid var(--line);box-shadow:12px 16px 0 -3px var(--paper),12px 16px 0 -2px var(--line);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hero-photo:hover{transform:rotate(0)}
.hero-photo img{height:450px;object-position:57% center}
.hero-photo:after{content:"";position:absolute;inset:21px;border:1px solid #f5f5eb50;pointer-events:none}
.hero-orbit{position:absolute;right:0;top:15px;width:440px;height:440px;border:1px solid var(--line);border-radius:50%;z-index:-1;opacity:.5;pointer-events:none}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;inset:-23px;border:1px dashed var(--ornament);border-radius:50%}.hero-orbit:after{inset:24px;border-style:solid}
.home-about h2,.parent-section h2,.home-life>h2,.official-intro h2,.booking-banner h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em;font-size:clamp(35px,4vw,54px);line-height:1.08}
.page-head h1{font-family:var(--display);font-size:clamp(36px,4vw,56px);font-weight:400;letter-spacing:-.025em}
.page-head{position:relative;isolation:isolate}
.page-head:after{content:"";position:absolute;right:10px;top:36px;width:170px;height:77px;opacity:.045;background:var(--ink);mask:url('/assets/logo.png') center/contain no-repeat;pointer-events:none;z-index:-1}
.home-about{position:relative;padding-top:110px}
.about-photo{padding:9px;background:var(--surface);border:1px solid var(--line);transform:rotate(-1deg);transition:transform .6s}.about-photo:hover{transform:rotate(0)}
.facts strong{font-family:var(--display);font-size:31px;font-weight:400}.facts{padding-top:30px}
.parent-section{position:relative;isolation:isolate;overflow:hidden;padding:60px 42px;margin-block:50px 70px;border:1px solid var(--line);background:var(--surface)}
.field-pattern{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/field-pattern.webp') center/cover no-repeat;opacity:.16;mix-blend-mode:multiply}
.parent-section>div:not(.field-pattern){position:relative;z-index:1}.parent-section .parent-links{background:var(--surface);padding-inline:22px}
.home-life{position:relative}.life-photos{gap:25px;align-items:center}.life-photos .photo-link{padding:8px;border:1px solid var(--line);background:var(--surface);transform:rotate(-1.2deg);transition:transform .5s}.life-photos .photo-link:nth-child(2){transform:translateY(18px) rotate(1.4deg)}.life-photos .photo-link:nth-child(3){transform:rotate(-.7deg)}.life-photos .photo-link:hover{transform:translateY(-4px) rotate(0)}
.official-section{border:1px solid var(--line);position:relative;isolation:isolate;overflow:hidden}
.official-section:before{content:"";position:absolute;right:-55px;bottom:-100px;width:380px;height:380px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 24px var(--surface),0 0 0 25px var(--line);z-index:-1}
.booking-banner{position:relative;isolation:isolate;min-height:210px;padding-right:32px}
.booking-banner h2{font-size:clamp(35px,3.8vw,52px)}
.military-mark{position:absolute;pointer-events:none;color:var(--ornament);opacity:.24;background:currentColor;mask:var(--motif) center/contain no-repeat}
.plane-mark{--motif:url('/assets/plane.svg');width:90px;height:90px;top:13px;right:30px;transform:rotate(-20deg)}
.tank-mark{--motif:url('/assets/tank.svg');width:100px;height:100px;bottom:10px;right:26px;transform:rotate(-7deg)}
.ship-mark{--motif:url('/assets/ship.svg');width:115px;height:115px;right:240px;bottom:-16px;opacity:.12}
.site-footer{position:relative;overflow:hidden}
.button{position:relative;overflow:hidden;transition:background .25s,transform .25s,box-shadow .25s}.button span{transition:transform .3s}.button:hover span{transform:translate(3px,-3px)}
.quiet-link span,.section-link span{transition:transform .3s}.quiet-link:hover span,.section-link:hover span{transform:translate(3px,-3px)}
@keyframes plane-drift{0%,100%{transform:translate(0,0) rotate(-20deg)}50%{transform:translate(14px,-8px) rotate(-15deg)}}
@keyframes ship-rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hero-arrive{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.hero-copy{animation:hero-arrive .7s cubic-bezier(.16,1,.3,1) both}.plane-mark.in-view{animation:plane-drift 9s ease-in-out infinite}.ship-mark.in-view{animation:ship-rock 8s ease-in-out infinite}}
.field-pattern{mix-blend-mode:screen;filter:invert(1);opacity:.075}
html.reading-active :is([data-decor],.field-pattern){display:none!important}
html.reading-active :is(.page-head,.official-section,.site-footer):after,html.reading-active .official-section:before{display:none}
html.reading-active :is(.hero-photo,.about-photo,.photo-link){transform:none!important;box-shadow:none}
html.reading-active :is(.home-hero h1,main h2,.page-head h1){font-family:Montserrat,Arial,sans-serif;line-height:1.2}
html.reading-active *,html.motion-paused *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero-photo,.about-photo,.life-photos .photo-link{transform:none}}
@media(max-width:1100px){.home-hero{gap:32px}.hero-copy h1{font-size:62px}.hero-photo img{height:420px}.hero-orbit{width:300px;height:300px}.parent-section{padding:35px;gap:35px}.ship-mark{right:190px}}
@media(max-width:767px){.home-hero{grid-template-columns:1fr;padding-block:32px 38px;gap:30px}.hero-copy h1{font-size:clamp(49px,12.5vw,70px)}.hero-photo{margin-inline:4px}.hero-photo img{height:280px}.hero-orbit{display:none}.hero-copy .eyebrow{max-width:195px;line-height:1.7;min-height:35px;margin-bottom:15px}.home-about{padding-top:66px}.home-about h2,.parent-section h2,.home-life>h2,.official-intro h2{font-size:37px}.facts strong{font-size:27px}.parent-section{padding:28px 23px;margin-block:30px 55px;gap:18px}.parent-section .parent-links{padding-inline:0;background:transparent}.plane-mark{width:66px;height:66px;top:-26px;right:0;opacity:.15}.tank-mark{width:72px;height:72px;bottom:-20px;right:8px}.ship-mark{right:4px;width:95px;bottom:20px}.booking-banner{padding-right:0}.booking-banner h2{max-width:290px}.life-photos{gap:16px}.life-photos .photo-link{padding:5px}.life-photos .photo-link:nth-child(2){transform:rotate(1.4deg)}.life-photos img{height:180px}.home-life{padding-top:10px}.page-head h1{font-size:36px}}
@media(max-width:767px){.hero-photo img{height:auto;aspect-ratio:1.496;object-fit:contain}.home-hero .hero-copy>.eyebrow{display:none}}
