:root {
	--ink: #171717;
	--paper: #f4efe7;
	--acid: #d8ff39;
	--coral: #f2644e;
	--line: rgba(23, 23, 23, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
a { color: inherit; }
.site-header { height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3.2vw; position: fixed; inset: 0 0 auto; z-index: 10; color: var(--paper); background: rgba(23, 23, 23, .9); border-bottom: 1px solid rgba(244, 239, 231, .25); backdrop-filter: blur(10px); }
.brand, .menu-toggle, .flag-link { font: 500 11px 'DM Mono', monospace; letter-spacing: .09em; text-decoration: none; }
.brand { justify-self: center; }
.flag-link { justify-self: start; }
.pride-flag { display: flex; width: 40px; height: 25px; transform: skew(-12deg); }
.pride-flag i { flex: 1; display: block; }
.pride-flag i:nth-child(1) { background: #E40303; }.pride-flag i:nth-child(2) { background: #FF8C00; }.pride-flag i:nth-child(3) { background: #FFED00; }.pride-flag i:nth-child(4) { background: #008026; }.pride-flag i:nth-child(5) { background: #004CFF; }.pride-flag i:nth-child(6) { background: #732982; }
.menu-toggle { justify-self: end; display: flex; gap: 12px; align-items: center; border: 0; padding: 8px 0; background: none; color: inherit; cursor: pointer; }
.menu-toggle b { display: grid; gap: 4px; width: 24px; }.menu-toggle i { display: block; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
.menu-open .menu-toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-open .menu-toggle i:nth-child(2) { opacity: 0; }.menu-open .menu-toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hero { height: 100svh; min-height: 650px; position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #bf8172; }
.hero > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 65%); }
.hero-copy { position: relative; z-index: 1; padding: 0 6vw 10vh; color: white; }.hero h1 { max-width: 850px; margin: 0; font-size: clamp(42px, 6.7vw, 105px); line-height: .93; letter-spacing: -.06em; font-weight: 500; }.hero-note { margin: 27px 0 0; font-size: 15px; line-height: 1.35; }
.hero-book { position: absolute; z-index: 2; right: 6vw; bottom: 10vh; display: flex; align-items: center; justify-content: space-between; width: 330px; padding: 25px 24px; background: var(--acid); color: var(--ink); font: 500 18px 'DM Mono', monospace; text-decoration: none; }.hero-book span, .button span { font-size: 25px; }
.section-pad { padding: 125px 6vw; }.section-heading { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end; border-top: 1px solid var(--line); padding-top: 18px; }.section-heading h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .86; letter-spacing: -.07em; font-weight: 500; }.section-count { position: absolute; right: 0; top: 18px; font: 11px 'DM Mono', monospace; }
.carousel { position: relative; display: block; margin-top: 70px; padding: 0 0 15px; }.carousel-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; }.carousel-viewport::-webkit-scrollbar { display: none; }.carousel-track { display: flex; align-items: center; width: max-content; }.carousel img { flex: 0 0 min(70vw, 620px); width: min(70vw, 620px); aspect-ratio: 4 / 5; object-fit: cover; background: var(--coral); }.carousel img:nth-child(2n) { background: var(--acid); }.missing-image { opacity: .2; }.carousel-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--acid); color: var(--ink); font: 28px/1 'Space Grotesk', sans-serif; cursor: pointer; transform: translateY(-50%); }.carousel-previous { left: 20px; }.carousel-next { right: 20px; }.description { background: var(--coral); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }.description .section-heading { border-color: rgba(23,23,23,.4); display: block; }.copy-column { max-width: 500px; padding-top: 65px; }.copy-column p { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; letter-spacing: -.02em; }.copy-column p + p { margin-top: 28px; }
.carousel img { cursor: zoom-in; }
.image-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 5vh 5vw; background: rgba(23, 23, 23, .92); opacity: 0; pointer-events: none; transition: opacity .25s ease; }.image-modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }.image-modal img { display: block; width: auto; height: auto; max-width: 90vw; max-height: 90vh; object-fit: contain; }.image-modal-close { position: absolute; top: 24px; right: 30px; border: 0; background: transparent; color: var(--paper); font: 400 42px/1 'Space Grotesk', sans-serif; cursor: pointer; }.modal-open { overflow: hidden; }
.reviews { background: var(--ink); color: var(--paper); }.reviews .section-heading { border-color: rgba(244,239,231,.3); }.review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 70px; }.review-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; background: #365b57; }.review-card:nth-child(2) img { background: var(--coral); }.review-card blockquote { max-width: 500px; margin: 25px 0 13px; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -.04em; }.review-card cite { font: 11px 'DM Mono', monospace; text-transform: uppercase; }
.final-cta { background: var(--acid); min-height: 650px; position: relative; }.final-cta h2 { margin: 80px 0; font-size: clamp(68px, 13vw, 190px); line-height: .8; letter-spacing: -.08em; font-weight: 500; }.button { display: flex; justify-content: space-between; align-items: center; width: min(500px, 100%); padding: 30px 24px; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 18px 'DM Mono', monospace; }.recommendation { position: absolute; right: 6vw; bottom: 130px; max-width: 390px; font-size: 27px; line-height: 1.05; }.recommendation a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu-panel { position: fixed; z-index: 20; top: 0; right: 0; width: 25vw; min-width: 340px; height: 100vh; padding: 105px 3vw 35px; background: var(--acid); transform: translateX(100%); transition: transform .45s cubic-bezier(.77,0,.18,1); }.menu-open .menu-panel { transform: translateX(0); }.menu-scrim { position: fixed; z-index: 15; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .35s; }.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }.menu-topline { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--ink); font: 11px 'DM Mono', monospace; }.menu-close { border: 0; padding: 0; background: transparent; color: var(--ink); font: 400 34px/20px 'Space Grotesk', sans-serif; cursor: pointer; }.menu-panel nav { display: grid; }.menu-panel nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 17px 0; border-bottom: 1px solid rgba(23,23,23,.25); font-size: 20px; text-decoration: none; }.menu-panel nav a span { font: 11px 'DM Mono', monospace; }.menu-panel .menu-book { font-size: 28px; padding: 28px 0; }.menu-footer { position: absolute; bottom: 35px; margin: 0; font: 11px/1.5 'DM Mono', monospace; text-transform: uppercase; }
.text-page { background: var(--coral); min-height: 100vh; }.simple-page { display: grid; grid-template-columns: 3fr 2fr; column-gap: 8vw; padding-top: 180px; }.simple-page h1 { grid-column: 1; grid-row: 1; margin: 55px 0 65px; font-size: clamp(58px, 10vw, 160px); line-height: .82; letter-spacing: -.08em; font-weight: 500; }.guide-image { grid-column: 1; grid-row: 2; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }.simple-page .copy-column { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-self: start; }.simple-page .copy-column p:first-child { font-weight: 700; }
.recommendations-page { display: block; max-width: 760px; margin: 0 auto; padding-top: 180px; }.recommendations-page section + section { margin-top: 95px; }.recommendations-page h1 { margin: 0 0 42px; font-size: clamp(42px, 6vw, 82px); line-height: .9; letter-spacing: -.06em; font-weight: 500; }.recommendations-page article + article { margin-top: 34px; }.recommendations-page h2 { margin: 0 0 7px; font-size: clamp(21px, 2vw, 28px); line-height: 1.05; font-weight: 600; }.recommendations-page h2 a { text-decoration-thickness: 2px; text-underline-offset: 4px; }.recommendations-page p { max-width: 620px; margin: 0; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; letter-spacing: -.02em; }
@media (max-width: 700px) { .site-header { height: 62px; padding: 0 20px; }.brand { display: none; }.pride-flag { width: 34px; height: 21px; }.menu-toggle span { display: none; }.hero { min-height: 620px; }.hero > img { width: calc(100% + 400px); max-width: none; object-position: top left; transform: translateX(-400px); }.hero-copy { width: 100%; padding: 0 20px 135px; text-align: center; }.hero h1 { font-size: clamp(38px, 11vw, 65px); }.hero-note { display: none; }.hero-book { bottom: 25px; left: 20px; right: 20px; width: auto; font-size: 17px; padding: 23px 20px; }.section-pad { padding: 80px 20px; }.section-heading { display: block; }.section-heading h2 { margin-top: 0; font-size: clamp(52px, 16vw, 90px); }.section-count { top: 0; }.carousel { margin-top: 45px; }.carousel img { flex-basis: 84vw; width: 84vw; }.carousel-arrow { width: 44px; height: 44px; font-size: 24px; }.carousel-previous { left: 10px; }.carousel-next { right: 10px; }.description { display: block; }.copy-column { padding-top: 50px; }.copy-column p { font-size: 18px; }.review-row { display: block; margin-top: 45px; }.review-card + .review-card { margin-top: 60px; }.final-cta { min-height: 680px; }.final-cta h2 { margin: 70px 0; font-size: 21vw; }.button { font-size: 17px; padding: 25px 20px; }.recommendation { position: static; margin-top: 90px; font-size: 25px; }.menu-panel { width: 100%; min-width: 0; padding: 90px 20px 30px; }.menu-panel nav a { font-size: 22px; padding: 20px 0; }.menu-panel .menu-book { font-size: 31px; } }
@media (max-width: 700px) { .simple-page { display: grid; grid-template-columns: 1fr; row-gap: 0; padding-top: 130px; }.simple-page h1 { grid-column: 1; grid-row: 1; margin: 45px 0 55px; font-size: 17vw; }.simple-page .copy-column { grid-column: 1; grid-row: auto; display: contents; }.simple-page .copy-column p { grid-column: 1; }.simple-page .copy-column p:first-child { grid-row: 2; margin-top: 0; }.guide-image { grid-column: 1; grid-row: 3; width: 100%; margin: 50px 0; }.simple-page .copy-column p:nth-child(2) { grid-row: 4; }.simple-page .copy-column p:nth-child(3) { grid-row: 5; }.simple-page .copy-column p:nth-child(4) { grid-row: 6; } }
@media (max-width: 700px) { .recommendations-page { padding-top: 130px; }.recommendations-page section + section { margin-top: 70px; }.recommendations-page h1 { margin-bottom: 32px; font-size: 14vw; }.recommendations-page article + article { margin-top: 30px; }.recommendations-page h2 { font-size: 23px; }.recommendations-page p { font-size: 18px; } }