/* ============================================================
 ARCADIAN SKY PRESS
 ============================================================ */

/* ---------- 1. Tokens & resets ---------- */
:root {
 --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
 --font-body: "ABeeZee", system-ui, sans-serif;
 --cream: #ece5d5;
 --paper: #f6efe0;
 --paper-back: #d3b89c;
 --explore: #ebe4d5;
 --espresso: #46372a;
 --espresso-deep: #2c2016;
 --brown-warm: #6f4a29;
 --brown-body: #6a4c30;
 --ink: #241a10;
 --olive: #5d5227;
 --card-copy: #ece3d3;
 --maxw: 1440px;
 --pad: clamp(24px, 4.4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
 margin: 0;
 font-family: var(--font-body);
 color: var(--ink);
 overflow-x: hidden;
 line-height: 1.5;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- 2. Typography helpers ---------- */
.display {
 font-family: var(--font-display);
 font-weight: 500;
 line-height: 0.98;
 letter-spacing: 0.01em;
}

/* ---------- 3. Navigation & wordmark ---------- */
.wordmark {
 font-family: var(--font-display);
 font-weight: 500;
 letter-spacing: 0.04em;
 line-height: 1.02;
 text-transform: uppercase;
}
.wordmark--hero {
 color: #fbf6ec;
 font-size: clamp(26px, 2.6vw, 40px);
 text-align: right;
 text-shadow: 0 2px 22px rgba(20, 12, 4, 0.35);
}
.nav {
 position: absolute;
 top: 0; left: 0; right: 0;
 z-index: 5;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 padding: clamp(28px, 3.6vw, 52px) var(--pad) 0;
}
.nav__menu {
 display: flex;
 flex-direction: column;
 gap: 7px;
 width: 44px; height: 44px;
 padding: 8px 6px;
 background: none; border: 0; cursor: pointer;
}
.nav__menu span {
 display: block;
 height: 2px;
 width: 34px;
 background: #fbf6ec;
 border-radius: 2px;
 box-shadow: 0 1px 8px rgba(20, 12, 4, 0.3);
 transition: transform 0.4s ease;
}

/* ---------- 4. Hero ---------- */
.hero {
 position: relative;
 min-height: 100vh;
 overflow: hidden;
 display: flex;
 align-items: flex-end;
}
.hero__bg {
 position: absolute;
 inset: -8% 0 -8% 0;
 z-index: 0;
 will-change: transform;
}
.hero__bg img {
 width: 100%; height: 100%;
 object-fit: cover;
 transform: scale(1.06);
}
.hero__scrim {
 position: absolute; inset: 0; z-index: 1;
 background:
 linear-gradient(to bottom, rgba(20,14,6,0.28) 0%, rgba(20,14,6,0) 26%),
 linear-gradient(to top, rgba(24,16,8,0.55) 0%, rgba(24,16,8,0) 46%);
}
.hero__content {
 position: relative;
 z-index: 3;
 width: 100%;
 max-width: var(--maxw);
 margin: 0 auto;
 padding: 0 var(--pad) clamp(40px, 5vw, 74px);
}
.hero__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: #fbf6ec;
 font-size: clamp(48px, 6.9vw, 100px);
 line-height: 0.96;
 margin: 0 0 clamp(20px, 2vw, 30px);
 text-shadow: 0 3px 30px rgba(18, 10, 4, 0.4);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line__inner { display: block; }
.hero__lede {
 color: rgba(251, 246, 236, 0.94);
 font-size: clamp(16px, 1.28vw, 21px);
 line-height: 1.6;
 max-width: 56ch;
 margin: 0;
 text-shadow: 0 1px 14px rgba(18, 10, 4, 0.35);
}
.btn-call {
 position: absolute;
 right: var(--pad);
 bottom: clamp(40px, 5vw, 74px);
 display: inline-flex;
 align-items: center;
 gap: 26px;
 padding: 14px 14px 14px 34px;
 border: 1px solid rgba(251, 246, 236, 0.6);
 border-radius: 999px;
 background: rgba(48, 34, 20, 0.42);
 backdrop-filter: blur(3px);
 color: #fbf6ec;
 font-size: clamp(16px, 1.3vw, 21px);
 transition: background 0.5s ease, transform 0.5s ease;
}
.btn-call:hover { background: rgba(48, 34, 20, 0.66); }
.btn-call__icon {
 display: grid; place-items: center;
 width: 46px; height: 46px;
 border-radius: 50%;
 background: #fff;
 color: #fbf6ec;
 transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-call__icon svg { width: 20px; height: 20px; color: #2f2114; }
.btn-call:hover .btn-call__icon { transform: translateX(4px); }

/* ---------- 5. Banner ---------- */
.banner {
 background: var(--cream);
 padding: clamp(20px, 2vw, 30px) var(--pad);
 text-align: center;
}
.banner__text {
 font-family: var(--font-display);
 font-weight: 500;
 color: #3b2c1b;
 font-size: clamp(19px, 2.1vw, 31px);
 letter-spacing: 0.03em;
 margin: 0;
}

/* ---------- 6. Stories rooted ---------- */
.stories {
 position: relative;
 overflow: hidden;
 background: #cdd3cb;
}
.stories__bg {
 position: absolute; inset: -10% 0;
 z-index: 0;
 will-change: transform;
}
.stories__bg img { width: 100%; height: 100%; object-fit: cover; }
.stories__inner {
 position: relative; z-index: 2;
 max-width: 1080px;
 margin: 0 auto;
 padding: clamp(90px, 12vw, 190px) var(--pad) clamp(120px, 15vw, 220px);
 text-align: center;
}
.stories__heading {
 font-family: var(--font-display);
 font-weight: 600;
 color: #22180d;
 font-size: 60px;
 line-height: 1.16;
 letter-spacing: 0.01em;
 margin: 0;
 text-wrap: balance;
}

/* ---------- 7. Paige & Percival ---------- */
.feature {
 position: relative;
 overflow: hidden;
 min-height: clamp(620px, 62vw, 900px);
}
.feature__bg { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.feature__bg img { width: 100%; height: 100%; object-fit: cover; }
.feature--dark .feature__scrim {
 position: absolute; inset: 0; z-index: 1;
 background:
 linear-gradient(to bottom, rgba(18,12,6,0.34), rgba(18,12,6,0.5) 55%, rgba(16,10,5,0.86));
}
.polaroid {
 margin: 0;
 z-index: 3;
 will-change: transform;
 filter: drop-shadow(0 26px 46px rgba(15, 9, 4, 0.5));
}
.polaroid img { width: 100%; height: auto; transform: translate(0vh, 27vh); }
h3.feature__eyebrow.reveal.is-in {
 transform: translate(-311%, 0px) !important;
 text-align: left;
}
.polaroid--seeking {
 position: absolute;
 top: clamp(-90px, -7vw, -60px);
 right: clamp(24px, 9vw, 150px);
 width: clamp(280px, 34vw, 470px);
 transform: rotate(2.5deg);
}
.feature__eyebrow {
 position: absolute;
 z-index: 4;
 top: clamp(120px, 15vw, 210px);
 right: clamp(150px, 22vw, 340px);
 margin: 0;
 font-family: var(--font-display);
 font-weight: 500;
 color: #f4ead9;
 font-size: clamp(34px, 4.8vw, 70px);
 line-height: 0.98;
 text-align: right;
 text-shadow: 0 4px 30px rgba(10, 6, 2, 0.6);
}
.feature__body {
 position: absolute;
 z-index: 4;
 left: 0; bottom: clamp(48px, 6vw, 90px);
 width: 100%;
 max-width: var(--maxw);
 padding: 0 var(--pad);
 margin: 0 auto;
 left: 50%; transform: translateX(-50%);
}
.feature__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: #f2e6d4;
 font-size: clamp(34px, 4.8vw, 68px);
 line-height: 1.02;
 margin: 0 0 clamp(22px, 2.4vw, 34px);
 text-shadow: 0 3px 26px rgba(10, 6, 2, 0.6);
}
.feature__copy {
 color: rgba(244, 236, 224, 0.9);
 font-size: clamp(16px, 1.3vw, 21px);
 line-height: 1.65;
 max-width: 46ch;
 margin: 0;
}

/* ---------- 8. Torn paper ---------- */
.paper {
 background: var(--paper-back);
 padding: clamp(0px, 0vw, 0px);
}
.paper__sheet {
 position: relative;
 will-change: transform;
}
.paper__texture {
 width: 100%;
 height: auto;
 display: block;
 pointer-events: none;
 user-select: none;
}
.paper__content {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: clamp(40px, 5vw, 70px);
 padding: clamp(60px, 8vw, 120px) var(--pad);
 text-align: center;
}
.paper__block { max-width: 660px; margin: 0 auto; }
.paper__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: #37271a;
 font-size: clamp(32px, 4.4vw, 64px);
 line-height: 1;
 margin: 0 0 clamp(14px, 1.4vw, 22px);
}
.paper__copy {
 color: #4a3b2c;
 font-size: clamp(15px, 1.25vw, 20px);
 line-height: 1.6;
 margin: 0;
 text-wrap: balance;
}

/* ---------- 9. Vastness / Sonder / cards ---------- */
.vast {
 position: relative;
 overflow: hidden;
 background: #b9c3cb;
}
.vast__bg { position: absolute; inset: -6% 0; z-index: 0; will-change: transform; }
.vast__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vast__scrim {
 position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(to bottom, rgba(20,14,6,0) 60%, rgba(30,22,12,0.5) 78%, rgba(30,22,12,0.94));
}
.vast__intro,
.vast__sonder,
.cards {
 position: relative; z-index: 3;
 max-width: var(--maxw);
 margin: 0 auto;
 padding-left: var(--pad);
 padding-right: var(--pad);
}
.vast__intro {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 40px;
 padding-top: clamp(80px, 10vw, 150px);
}
.vast__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: var(--olive);
 font-size: clamp(44px, 6.4vw, 92px);
 line-height: 0.98;
 margin: 0;
}
.polaroid--vast {
 width: 40%;
 transform: rotate(-3deg);
 margin-top: clamp(-10px, 1vw, 20px);
}
h2.vast__title.reveal.is-in {
 transform: translate(0px, 85px) !important;
}
.vast__sonder {
 padding-top: 10px;
 max-width: 1415px;
}
.vast__intro .polaroid img {
 transform: translate(0vh, -10vh);
}
.vast__sonder-title {
 font-family: var(--font-display);
 font-weight: 500;
 color: #5d5227;
 font-size: clamp(34px, 4.4vw, 62px);
 line-height: 1;
 margin: 0 0 clamp(16px, 1.6vw, 26px);
}
.vast__sonder-copy {
 color: #5d5227;
 font-size: clamp(16px, 1.3vw, 21px);
 line-height: 1.6;
 margin: 0;
 max-width: 52ch;
}
.cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(28px, 3.4vw, 56px);
 padding-top: clamp(70px, 8vw, 130px);
 padding-bottom: clamp(70px, 8vw, 120px);
}
.card {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.card__media {
 margin: 0 0 clamp(28px, 3vw, 48px);
 width: 100%;
 overflow: hidden;
 will-change: transform;
 filter: drop-shadow(0 22px 40px rgba(12, 7, 3, 0.42));
}
.card__media img {
 width: 100%;
 height: auto;
 transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__media img { transform: translateY(-10px) scale(1.03); }
.card__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: #efe6d5;
 font-size: clamp(24px, 2.4vw, 35px);
 line-height: 1.02;
 margin: 0 0 clamp(14px, 1.4vw, 22px);
 text-shadow: 0 2px 18px rgba(10, 6, 2, 0.5);
}
.card__copy {
 color: var(--card-copy);
 font-size: clamp(14px, 1.05vw, 17px);
 line-height: 1.55;
 margin: 0;
 max-width: 34ch;
}

/* ---------- 10. Contact ---------- */
.contact {
 position: relative;
 overflow: hidden;
}
.contact__bg { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; }
.contact__scrim {
 position: absolute; inset: 0; z-index: 1;
 background: linear-gradient(to right, rgba(226,220,208,0.55), rgba(226,220,208,0.05) 55%);
}
.contact__inner {
 position: relative; z-index: 3;
 max-width: var(--maxw);
 margin: 0 auto;
 padding: clamp(80px, 10vw, 150px) var(--pad) clamp(90px, 11vw, 160px);
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(40px, 6vw, 100px);
 align-items: start;
}
.contact__title {
 font-family: var(--font-display);
 font-weight: 500;
 color: var(--brown-warm);
 font-size: clamp(36px, 5vw, 70px);
 line-height: 1.02;
 margin: 0 0 clamp(24px, 2.6vw, 40px);
}
.contact__copy {
 color: var(--brown-body);
 font-size: clamp(16px, 1.4vw, 23px);
 line-height: 1.55;
 margin: 0;
 max-width: 40ch;
}
.form { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 26px); }
.form__field { display: flex; flex-direction: column; gap: 10px; }
.form__label {
 font-size: clamp(12px, 0.95vw, 14px);
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: #efe9dd;
 text-shadow: 0 1px 10px rgba(10, 6, 2, 0.4);
}
.form__field input,
.form__field textarea {
 font-family: var(--font-body);
 font-size: 17px;
 color: #f6f1e7;
 background: rgba(58, 50, 40, 0.32);
 border: 1px solid rgba(240, 235, 225, 0.55);
 border-radius: 2px;
 padding: 16px 18px;
 backdrop-filter: blur(4px);
 transition: border-color 0.4s ease, background 0.4s ease;
 resize: none;
}
.form__field input:focus,
.form__field textarea:focus {
 outline: none;
 border-color: #f6f1e7;
 background: rgba(58, 50, 40, 0.46);
}
.form__submit {
 margin-top: 6px;
 font-family: var(--font-body);
 font-size: clamp(14px, 1.05vw, 16px);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: #3a2c1c;
 background: var(--paper);
 border: 0;
 padding: 20px;
 cursor: pointer;
 border-radius: 2px;
 transition: background 0.4s ease, transform 0.4s ease;
}
.form__submit:hover { background: #fffaf0; transform: translateY(-2px); }

/* ---------- 11. Footer ---------- */
.footer {
 background: var(--espresso);
 color: #efe6d3;
 padding: clamp(60px, 7vw, 96px) var(--pad) clamp(24px, 3vw, 40px);
}
.footer__grid {
 max-width: var(--maxw);
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1.2fr 1fr 1fr;
 gap: 40px;
 padding-bottom: clamp(40px, 5vw, 70px);
}
.wordmark--footer {
 color: #f0e7d4;
 font-size: clamp(30px, 3.2vw, 46px);
 display: inline-block;
 margin-bottom: clamp(24px, 2.6vw, 40px);
}
.footer__nav { display: flex; gap: clamp(22px, 2.4vw, 40px); }
.footer__nav a {
 font-size: clamp(15px, 1.1vw, 18px);
 color: #eadfca;
 transition: opacity 0.3s ease;
}
.footer__nav a:hover { opacity: 0.65; }
.footer__col { display: flex; flex-direction: column; }
.footer__address {
 font-style: normal;
 font-size: clamp(16px, 1.3vw, 21px);
 line-height: 1.55;
 color: #eaddc6;
 margin-bottom: clamp(18px, 1.8vw, 26px);
}
.footer__copy { font-size: clamp(15px, 1.2vw, 20px); color: #e7dbc4; margin: 0; }
.footer__col--right { align-items: flex-start; }
.footer__email { font-size: clamp(16px, 1.4vw, 22px); color: #efe6d3; }
.footer__bottom {
 max-width: var(--maxw);
 margin: 0 auto;
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 gap: clamp(20px, 3vw, 44px);
}
.to-top {
 display: grid; place-items: center;
 width: 52px; height: 52px;
 border: 1px solid rgba(240, 231, 212, 0.5);
 border-radius: 50%;
 background: none;
 color: #efe6d3;
 cursor: pointer;
 transition: background 0.4s ease, transform 0.4s ease;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: rgba(240, 231, 212, 0.12); transform: translateY(-3px); }
.explore {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 background: var(--explore);
 color: #34261a;
 border-radius: 12px;
 padding: clamp(30px, 3.4vw, 46px) clamp(30px, 3.4vw, 50px);
 transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}
.explore:hover { transform: translateY(-4px); background: #f2ecdf; }
.explore__text {
 font-size: clamp(18px, 1.7vw, 26px);
 line-height: 1.15;
}
.explore__icon svg { width: 26px; height: 26px; }

/* ---------- 12. Reveal states ---------- */
.reveal, .reveal-child {
 opacity: 0;
 transform: translateY(38px);
 transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}
.reveal.is-in, .reveal-child.is-in {
 opacity: 1; transform: none; filter: none;
}
.no-js .reveal, .no-js .reveal-child,
.no-js .hero__title .line__inner { opacity: 1; transform: none; filter: none; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1540px) {
 h3.feature__eyebrow.reveal.is-in {
 transform: translate(-249%, 0px) !important;
 }
}
@media (max-width: 1024px) {
 .feature__body { position: relative; transform: none; left: auto; margin-top: 40px; padding-top: clamp(220px, 40vw, 340px); }
 .feature { min-height: 0; padding-bottom: clamp(48px, 6vw, 90px); }
 .polaroid--seeking { top: clamp(-60px, -6vw, -40px); }
}
@media (max-width: 860px) {
 .vast__intro { flex-direction: column; align-items: flex-start; gap: 30px; }
 .polaroid--vast { align-self: flex-end; margin-top: -20px; }
 .cards { grid-template-columns: 1fr; gap: 56px; max-width: 440px; }
 .contact__inner { grid-template-columns: 1fr; }
 .contact__scrim { background: linear-gradient(to bottom, rgba(226,220,208,0.6), rgba(226,220,208,0.2)); }
 .footer__grid { grid-template-columns: 1fr; gap: 30px; }
 .footer__col--right { align-items: flex-start; }
}
@media (max-width: 640px) {
 .nav { padding-top: 22px; }
 .btn-call { position: relative; right: auto; bottom: auto; margin-top: 26px; }
 .feature__eyebrow { right: var(--pad); top: clamp(90px, 22vw, 150px); }
 .polaroid--seeking { width: 62vw; right: 12px; }
 .footer__bottom { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 .reveal, .reveal-child { opacity: 1 !important; transform: none !important; filter: none !important; }
 * { scroll-behavior: auto !important; }
}