/* ============================================================ Sculpt-exact layout, JIT brand tokens. Swap the tokens below when the rebranding deck values arrive. ============================================================ */ :root{ /* ============================================================ GUIDELINE PALETTE — re-brand-mini-guideline.pdf p7. Every value below is the exact hex from the deck. Nothing is lightened, warmed, or "adjusted to fit". If a color is not on this list it does not belong on the page. ============================================================ */ --espresso:#341517; --royal:#285697; --olive-mustard:#886014; --olive-green:#7F7324; --red-orange:#F03617; --greige:#CFCABF; --butter:#FFDD87; --sky:#B1E0FF; --dusty-pink:#E0ACC0; --lavender:#AA91E3; --periwinkle:#C2D4FF; --magenta:#FD7BE2; --logo-black:#181818; --logo-white:#FDFCF8; /* ---- FIELD colors: may fill an entire section --------------- These carry weight. Sections are grounded on these only. ---- */ --field-paper:var(--logo-white); --field-neutral:var(--greige); --field-dark:var(--espresso); --field-royal:var(--royal); --field-mustard:var(--olive-mustard); --field-olive:var(--olive-green); --field-spark:var(--red-orange); /* used exactly once, at the close */ /* ---- ACCENT colors ------------------------------------------ On the LP these stay small: a badge, a card, a rule, a link. On any OTHER page, one or two of them may be promoted to a full section ground via --signature (see the table below), so each page gets its own identity while the FIELD spine — paper, greige, espresso, royal, mustard, olive — stays shared. This is the d design travel model: one typographic system, a different cover color for every issue. ------------------- */ --accent-butter:var(--butter); --accent-sky:var(--sky); --accent-pink:var(--dusty-pink); --accent-lavender:var(--lavender); --accent-peri:var(--periwinkle); --accent-magenta:var(--magenta); /* ---- SIGNATURE: the page's own color, allowed at full size --- Set once per page on . Use ONE. Two only when they are far apart in value (e.g. sky + espresso). Never two pastels. The LP deliberately has none: it is the neutral anchor every other page is read against. Home / LP ........ (none — FIELD spine only) Pricing .......... sky #B1E0FF Travel Bible ..... butter #FFDD87 Press & Media .... periwinkle #C2D4FF Example trips .... dusty-pink #E0ACC0 Journal .......... lavender #AA91E3 Campaign / gift .. magenta #FD7BE2 (short-lived only) ------------------------------------------------------------- */ --signature:var(--field-neutral); /* LP default = no signature */ --signature-ink:var(--espresso); /* text that sits on it */ /* ---- text tones: espresso at opacity, never a new hue ------- */ --ink-soft:rgba(52,21,23,.66); --ink-hair:rgba(52,21,23,.20); --paper-soft:rgba(253,252,248,.72); --paper-hair:rgba(253,252,248,.26); /* ---- legacy aliases, repointed at guideline values ---------- */ --white-100:var(--field-paper); --white-200:var(--field-neutral); --gray-300:var(--greige); --gray-400:var(--ink-soft); --ink:var(--espresso); --yellow-200:var(--butter); --lime-200:var(--butter); --yellow-300:var(--butter); --yellow-deep:var(--olive-mustard); --lav-200:var(--periwinkle); --lav-300:var(--lavender); --violet-400:var(--lavender); --violet-500:var(--espresso); --pink-200:var(--dusty-pink); --pink-300:var(--magenta); --pink-900:var(--espresso); --blue-200:var(--sky); --blue-400:var(--royal); --blue-950:var(--royal); --orange-200:var(--dusty-pink); --orange-300:var(--red-orange); --purple:var(--olive-green); /* type — guideline p7 font suite, unchanged families */ --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif; --font-display:'Oswald','Arial Narrow',Arial,sans-serif; --font-body:'General Sans','Helvetica Neue',Arial,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; --font-primary:var(--font-body); --font-semimono:var(--font-mono); --font-logo:var(--font-serif); /* geometry — the deck has no rounded corners anywhere */ --radius-lg:0rem; --pad-global:4rem; --pad-large:4rem; --h1:5.75rem; --h2:4rem; --h3:2.25rem; } @media (max-width:991px){ :root{ --radius-lg:0rem; --pad-global:2.25rem; --pad-large:3.5rem; --h1:4.25rem; --h2:3rem; --h3:2rem; } } @media (max-width:767px){ :root{ --pad-global:2rem; --pad-large:2.75rem; --h1:3rem; --h2:2.875rem; } } @media (max-width:479px){ :root{ --pad-global:1.25rem; } } /* One line per page is all it takes to re-skin a section. */ [data-signature="sky"] {--signature:var(--sky); --signature-ink:var(--espresso)} [data-signature="butter"] {--signature:var(--butter); --signature-ink:var(--espresso)} [data-signature="periwinkle"] {--signature:var(--periwinkle); --signature-ink:var(--espresso)} [data-signature="dusty-pink"] {--signature:var(--dusty-pink); --signature-ink:var(--espresso)} [data-signature="lavender"] {--signature:var(--lavender); --signature-ink:var(--espresso)} [data-signature="magenta"] {--signature:var(--magenta); --signature-ink:var(--espresso)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--white-100); color:var(--ink); font-family:var(--font-primary); font-size:1.25rem; line-height:1.25; font-weight:400; letter-spacing:-.01em; overflow-x:clip; } /* ── Top bar (decision 1B, 2026-09-02) ───────────────────────────── The wordmark lives where people look for it. The J itself is not here: it arrives inside the photograph as the picture expands. */ /* the booking window sits above the header, the way it does on every other page */ /* the booking window sits between Three shapes and the questions, where it answers "can I still go?" right after the prices */ .announce{background:var(--accent-butter);color:var(--espresso); border-top:1px solid var(--ink-hair);border-bottom:1px solid var(--ink-hair); font-family:var(--font-mono);position:relative;z-index:10} .announce_in{display:flex;align-items:center;justify-content:space-between;gap:2rem; width:min(calc(100% - 3.2rem),82.5rem);margin:0 auto;min-height:2.65rem; font-size:.68rem;letter-spacing:.035em;line-height:1.35;text-transform:uppercase} .announce_in p{margin:0} .announce_in strong{display:inline-block;margin-right:.75rem;font-weight:700} /* the date is the one thing to catch. The mark's own red measures 3.0:1 on butter, which this 11px type cannot carry, so it takes the deepest shade of it that clears 4.5 (5.0:1). */ .announce_when{font-style:normal;color:#B4220D} .announce_in a{flex:0 0 auto;border-bottom:1px solid currentColor;color:inherit;font-weight:600} @media (max-width:767px){ .announce_in{width:calc(100% - 2.2rem);min-height:3.35rem;gap:.75rem;font-size:.55rem} .announce_in p{max-width:23ch} .announce_in strong{display:block;margin:0} .announce_in a{max-width:16ch;text-align:right} } .topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center; padding:.85rem 1.6rem;background:var(--field-paper);border-bottom:1px solid var(--ink-hair)} .topbar .wordmark{font:600 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--espresso)} .topbar .topbar_cta{font:600 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--field-paper);background:var(--espresso);padding:.6rem .85rem} .topbar .topbar_cta:hover{background:var(--accent-butter);color:var(--espresso)} .topbar_nav{display:flex;gap:clamp(1rem,2.2vw,1.9rem);align-items:center} .topbar_nav a{font:600 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--espresso); padding-bottom:.2rem;border-bottom:1px solid transparent} .topbar_nav a:hover{border-bottom-color:var(--espresso)} .topbar_right{display:flex;align-items:center;gap:.8rem} /* the menu folds into a toggle once the five links stop fitting */ .topbar_burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:2.1rem;height:2.1rem; background:none;border:1px solid var(--ink-hair);cursor:pointer;padding:0 .45rem} .topbar_burger span{display:block;height:1.5px;background:var(--espresso)} .topbar_panel{position:absolute;left:0;right:0;top:100%;background:var(--field-paper); border-bottom:1px solid var(--ink-hair);display:flex;flex-direction:column} .topbar_panel a{font:600 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--espresso); padding:1rem 1.6rem;border-top:1px solid var(--ink-hair)} .topbar_panel[hidden]{display:none} @media (max-width:1023px){.topbar_nav{display:none}.topbar_burger{display:flex}} @media (max-width:520px){.topbar .topbar_cta{display:none}} @media (max-width:767px){.topbar{padding:.7rem 1.1rem}.topbar_panel a{padding:1rem 1.1rem}} /* the stamp that appears inside the expanded photo */ .weare_stamp{position:absolute;left:1.4rem;bottom:1.3rem;z-index:3;display:flex;align-items:flex-end;gap:.7rem;color:var(--logo-white);opacity:0;pointer-events:none} .weare_stamp svg{width:22px;height:auto;display:block;transform:rotate(-8deg);transform-origin:bottom left} .weare_stamp span{font:600 .58rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;padding-bottom:.15rem} @media (max-width:767px){.weare_stamp{left:.9rem;bottom:.8rem}.weare_stamp svg{width:16px}} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--blue-400);outline-offset:2px} img,svg,video{display:block;max-width:100%} .container{max-width:82.5rem;margin:0 auto;padding-left:var(--pad-global);padding-right:var(--pad-global)} h1,.h1{font-family:var(--font-serif);font-size:var(--h1);line-height:1.02;font-weight:400;letter-spacing:0} h2,.h2{font-family:var(--font-display);font-size:var(--h2);line-height:.98;font-weight:600;letter-spacing:0;text-transform:uppercase} h3,.h3{font-family:var(--font-display);font-size:var(--h3);line-height:1.08;font-weight:600;letter-spacing:.005em} .text-small{font-size:1rem;line-height:1.5;letter-spacing:0} .eyebrow{ font-family:var(--font-semimono); font-weight:600;letter-spacing:.16em;text-transform:uppercase; font-size:.7rem;line-height:1.2; color:var(--olive-green); } .btn{ display:inline-flex;justify-content:center;align-items:center;gap:.3rem; font-family:var(--font-semimono);font-weight:600;letter-spacing:.12em; text-transform:uppercase;font-size:.72rem;line-height:1.2; cursor:pointer;border:none;background:none;color:inherit; transition:transform .2s ease, background-color .2s ease, color .2s ease; } .btn:hover{transform:translateY(-1px)} .btn.solid-yellow{ background:var(--accent-butter);color:var(--espresso); border-radius:0;min-width:11.1rem; padding:.75rem .8rem .75rem 1rem; } .btn.solid-yellow:hover{background:var(--field-dark);color:var(--field-paper)} .link-arrow{ font-family:var(--font-semimono);font-weight:600;letter-spacing:.12em; text-transform:uppercase;font-size:.72rem;line-height:1.2; } .link-arrow:hover{font-weight:700} .stack{ position:relative; border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg); margin-bottom:calc(-1 * var(--radius-lg)); padding-bottom:var(--radius-lg); } .section-pad{padding-top:8rem;padding-bottom:8rem} @media (max-width:991px){.section-pad{padding-top:6rem;padding-bottom:6rem}} @media (max-width:767px){.section-pad{padding-top:4rem;padding-bottom:4rem}} .section-blob{width:5rem;height:auto} @media (max-width:991px){.section-blob{width:4rem}} @media (max-width:767px){.photo-sequence{grid-template-columns:repeat(8,6rem);grid-template-rows:repeat(3,6rem)}.photo-frame{border-radius:.9rem}} /* scroll-reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)} .reveal.in{opacity:1;transform:none} /* ================= HERO (photo, dark — Sculpt) ================= */ .section_hero{ z-index:10;position:relative;overflow:hidden; color:var(--field-paper);background:var(--field-dark); display:flex;flex-direction:column;justify-content:center; } .hero-bg{position:absolute;inset:0;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%} .hero_shade{position:absolute;inset:0;background:#00000059;background-image:linear-gradient(#00000038,#0003 55%,#000000a6)} .hero_content{ position:relative;z-index:10; display:grid;grid-template-columns:1fr 2fr auto;grid-template-rows:auto 1fr auto; gap:1.5rem;height:60vw;max-height:90vh; padding-top:2.5rem;padding-bottom:4rem; } .hero_brand{font-family:var(--font-logo);font-weight:600;font-size:1.6rem;line-height:1.2;align-self:start} .hero_tag{max-width:22rem;font-size:1.25rem;justify-self:start} .hero_info{display:flex;flex-direction:column;align-items:flex-end;gap:2.5rem;grid-column:3} .hero_date{font-size:var(--h3);font-weight:500;letter-spacing:-.02em} .hero_location{ font-family:var(--font-semimono);font-weight:600;letter-spacing:.08em;text-transform:uppercase; font-size:.95rem;text-align:right;max-width:17rem;line-height:1.7;color:var(--paper-soft); } .hero_logo-wrap{grid-column:1/-1;grid-row:3;align-self:end;position:relative} .hero_logotype{ font-family:var(--font-logo);font-weight:600; font-size:clamp(4.5rem,18vw,16.5rem); line-height:.9;text-align:center;color:var(--white-100); letter-spacing:-.02em;user-select:none; } .hero_waves{position:absolute;right:0;bottom:-2px;width:44%;height:auto;pointer-events:none;z-index:5} .hero_waves svg{width:100%;height:auto;display:block} @media (max-width:991px){ .hero_content{grid-template-columns:1fr;height:85vw;padding-bottom:2rem} .hero_info{grid-column:1;align-items:flex-start;gap:.25rem} .hero_location{text-align:left;max-width:25rem} .hero_date{font-family:var(--font-semimono);font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase} } @media (max-width:767px){ .hero_content{height:auto;max-height:none} .hero_waves{display:none} } /* ================= "WE ARE" (white — Noura rectangle expansion, integrated) ================= Tall scroll runway with a pinned heading; JS grows the inline pill into the full photo so the words get pushed to the edges (Noura home-header + home-about_sticky pattern, easing cubic-bezier(.215,.61,.355,1), border-radius .6s). */ .section_weare{position:relative;background:var(--white-100);height:300vh} .weare_sticky{ position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;justify-content:center;align-items:center; } .weare_heading{ display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap; width:100%;padding:0 1.5rem;gap:.35em; font-family:var(--font-display);text-transform:uppercase; font-size:clamp(2.2rem,6.5vw,5.5rem);font-weight:600;color:var(--ink); line-height:1;letter-spacing:0; } /* "WE ARE JAPAN" on top, pill in the middle, "IKIGAI TRIP" on the bottom */ .weare_word{flex:none;text-align:center} .weare_pillwrap{ flex:none;position:relative;overflow:clip;border-radius:0;margin:0 .18em; width:2.2em;height:1.08em; will-change:width,height,border-radius; transition:border-radius .9s cubic-bezier(.215,.61,.355,1); } .weare_pillwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.6s ease} .weare_pillwrap img.is-on{opacity:1} @media (prefers-reduced-motion:reduce){.weare_pillwrap img{transition:none}} .weare_pillshade{position:absolute;inset:0;background:linear-gradient(#0000 45%,#00000066);opacity:0} .weare_tagline{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2; color:var(--logo-white);font-family:var(--font-serif);text-transform:none;font-size:clamp(1.9rem,3.8vw,3.4rem);font-weight:400;text-align:center; opacity:0;text-shadow:0 2px 18px rgba(0,0,0,.5);padding:0 1.5rem;pointer-events:none; } /* final-state fallback when JS is unavailable or motion is reduced */ .weare_static .weare_word{display:none} .weare_static .weare_pillwrap{width:min(80vw,57.5rem);height:60vh;border-radius:0} .weare_static .weare_pillshade,.weare_static .weare_tagline,.weare_static .weare_stamp{opacity:1} .weare_static.section_weare{height:auto} .weare_static .weare_sticky{position:relative;height:100vh} /* ================= INTRO (white — Sculpt) ================= */ .section_intro{background:var(--white-100);position:relative} .intro_content{display:flex;flex-direction:column;gap:2.5rem;max-width:56rem;align-items:flex-start} .intro_mark{ display:block;width:4rem;height:auto;color:var(--ink);user-select:none; } @media (max-width:767px){.intro_mark{width:3.5rem}} .intro_content h1{max-width:52rem;font-weight:450} .intro_description{font-size:1.25rem;line-height:1.45;max-width:44rem;color:var(--ink-soft)} .intro_cta{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start} /* Two lanes, same rank (decision CTA, 2026-09-02): the questionnaire stays primary because the proposal is built from it; WhatsApp/email is the equal second lane for people who want to ask a person first. */ .cta_lanes{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .btn.outline-ink{border:1px solid var(--espresso);color:var(--espresso);background:transparent;border-radius:0;min-width:11.1rem;padding:.75rem 1rem} .btn.outline-ink:hover{background:var(--espresso);color:var(--field-paper)} .cta_lanes .or{font:500 .8rem/1 var(--font-body);letter-spacing:0;color:var(--ink-soft)} .intro_micro{font-size:.95rem;color:var(--gray-400);letter-spacing:0} .intro_trust{ font-family:var(--font-semimono);font-weight:500;letter-spacing:.06em;text-transform:uppercase; font-size:.8rem;color:var(--gray-400); } /* ================= MISSION (white — Haptic) ================= */ .section_mission{background:var(--white-100)} .mission_grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center} @media (max-width:991px){.mission_grid{grid-template-columns:1fr;gap:2.5rem}} .mission_text{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem} .mission_text p{font-size:1.4rem;line-height:1.4;color:var(--ink);font-weight:450} .mission_text p em{font-style:normal;color:var(--gray-400)} .mission_video{position:relative;border-radius:0;overflow:hidden;background:var(--ink);aspect-ratio:4/5;max-height:33rem} .mission_video video{width:100%;height:100%;object-fit:cover} .mission_caption{font-size:.95rem;line-height:1.5;color:var(--gray-400);margin-top:1rem;max-width:28rem;letter-spacing:0} /* video sound + replay controls */ .video_btn{ position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:.4rem; border:none;cursor:pointer;color:#fff;background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border-radius:0;transition:background-color .2s ease,transform .2s ease; } .video_btn:hover{background:rgba(0,0,0,.78)} .video_btn:focus-visible{outline:2px solid #fff;outline-offset:2px} .video_btn svg{width:1.2rem;height:1.2rem;display:block} .video_sound{right:.85rem;bottom:.85rem;width:2.6rem;height:2.6rem;padding:0} .video_sound .icon-on{display:none} .video_sound:not(.is-muted) .icon-off{display:none} .video_sound:not(.is-muted) .icon-on{display:block} .video_replay{ left:50%;top:50%;transform:translate(-50%,-50%); padding:.7rem 1.15rem;font-family:var(--font-semimono);font-weight:600; letter-spacing:.04em;text-transform:uppercase;font-size:.8rem; } .video_replay:hover{transform:translate(-50%,-50%) scale(1.04)} .video_replay[hidden]{display:none} /* ================= PULL QUOTE + MOODS COLOR (dark magenta — Sculpt "Last year") ================= */ .section_quote{z-index:1;background:var(--pink-900);color:var(--white-100)} .quote_blob{margin-bottom:2.5rem} .quote_text{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.12;font-weight:450;max-width:60rem;letter-spacing:-.01em} .quote_text strong{color:var(--accent-sky);font-weight:500} .quote_by{margin-top:2.5rem;font-family:var(--font-semimono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:var(--accent-pink)} /* ================= HOW IT WORKS (deep purple — Sculpt blocks) ================= */ .section_for{z-index:2;background:var(--yellow-deep)} .for_title{color:var(--white-100);max-width:46rem;margin-bottom:3.5rem} .for_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.9rem;padding:3rem 2.2rem} @media (max-width:1200px){.for_grid{grid-template-columns:1fr 1fr;gap:1.15rem}} @media (max-width:767px){.for_grid{grid-template-columns:1fr;gap:1.5rem;padding:.75rem}} .for_card-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;overflow:visible} /* ── Layered fields behind the cards ───────────────────────────── Same construction as the price wave lower down the page: three concentric layers, each about nine percent apart, so every color shows as its own band around the card. Colors come from the saturated end of the palette — espresso, royal, red-orange, lavender — not from the pastels, which disappear against the mustard field and read as soft rather than sharp. Each layer drifts on its own clock so the bands never sit parallel. */ .for_blob{ position:absolute;top:50%;left:50%;pointer-events:none; transform-origin:center;will-change:transform; animation:for-wave 21s ease-in-out infinite alternate; } .for_blob svg{width:100%;height:100%;overflow:visible;display:block} .for_blob.l1{width:131%;height:123%;z-index:1} .for_blob.l2{width:121%;height:115%;z-index:2;animation-duration:25s;animation-delay:-9s;animation-direction:alternate-reverse} .for_blob.l3{width:112%;height:108%;z-index:3;animation-duration:18s;animation-delay:-14s} .for_card-wrap:nth-child(2) .for_blob{animation-delay:-5s} .for_card-wrap:nth-child(3) .for_blob{animation-delay:-11s} .for_card-wrap:nth-child(4) .for_blob{animation-delay:-17s} @keyframes for-wave{ 0% {transform:translate3d(-51%,-49.5%,0) rotate(-.9deg) scale(.986,1.014)} 50% {transform:translate3d(-49.2%,-51%,0) rotate(.6deg) scale(1.014,.99)} 100%{transform:translate3d(-48.9%,-49.3%,0) rotate(-.3deg) scale(.99,1.018)} } @media (max-width:1200px){ .for_blob.l1{width:122%;height:116%} .for_blob.l2{width:115%;height:110%} .for_blob.l3{width:108%;height:105%} } .for_card{background:var(--field-paper);color:var(--espresso)} .for_card .for_step{ display:inline-block;padding:.4rem .7rem; font-family:var(--font-mono);font-weight:600;font-size:.68rem; letter-spacing:.14em;text-transform:uppercase;color:var(--espresso); } .for_card[data-accent="pink"] .for_step{background:var(--accent-pink)} .for_card[data-accent="sky"] .for_step{background:var(--accent-sky)} .for_card[data-accent="peri"] .for_step{background:var(--accent-peri)} .for_card[data-accent="butter"] .for_step{background:var(--accent-butter)} .for_card-wrap:nth-child(odd){z-index:1} .for_card-wrap:nth-child(even){z-index:2} .for_card-wrap:hover{z-index:10} .for_blob{position:absolute;top:50%;left:50%;pointer-events:none;transform-origin:center;animation:for-wave 12s ease-in-out infinite alternate;will-change:transform} .for_blob:nth-child(2){animation-duration:15s;animation-delay:-7s;animation-direction:alternate-reverse} .for_blob svg{width:100%;height:100%;overflow:visible} @keyframes for-wave{ 0%{transform:translate3d(-51.5%,-49%,0) rotate(-1deg) scale(.985,1.015)} 50%{transform:translate3d(-49%,-51.2%,0) rotate(.7deg) scale(1.015,.99)} 100%{transform:translate3d(-48.5%,-49%,0) rotate(-.4deg) scale(.99,1.02)} } .for_card{ position:relative;z-index:5; border-radius:2.25rem; display:flex;flex-direction:column;align-items:center;gap:1.25rem; text-align:center;min-width:100%;min-height:100%;padding:2rem 1.75rem;cursor:default; transition:transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, filter .35s ease; } .for_card:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 18px 40px rgba(0,0,0,.3);filter:saturate(1.1)} /* .6 left the label at 3.9:1 once the card turned periwinkle; .75 clears 4.5 */ .for_step{font-family:var(--font-semimono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;opacity:.75} .for_card h3{max-width:25rem;font-size:1.4rem} .for_card p{font-size:.9rem;line-height:1.55;letter-spacing:0;text-align:left} .for_card-link{align-self:flex-start;color:inherit;font-family:var(--font-semimono);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.25em} .for_note{ margin-top:3.5rem;text-align:center;font-size:.95rem;line-height:1.7;color:var(--lav-200); font-family:var(--font-semimono); } /* ================= KNOW vs SURPRISE (white-200) ================= */ .section_know{z-index:4;background:var(--field-neutral)} .know_grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem} @media (max-width:767px){.know_grid{grid-template-columns:1fr}} .know_col{position:relative;isolation:isolate;overflow:hidden;border-radius:0;padding:2.5rem;display:flex;flex-direction:column;gap:1rem} .know_col::after{display:none} .know_col.known::after{right:-5rem;bottom:-6rem;background:var(--violet-500)} .know_col.secret::after{left:-5rem;top:-6rem;background:var(--yellow-200);animation-delay:-5s;animation-direction:alternate-reverse} @keyframes concept-drift{from{transform:translate3d(-.4rem,.2rem,0) rotate(-7deg) scale(.96)}to{transform:translate3d(.7rem,-.6rem,0) rotate(8deg) scale(1.08)}} .know_col.known{background:var(--field-paper);border:1px solid var(--ink-hair)} .know_col.secret{background:var(--field-dark);color:var(--field-paper)} .know_col h3{font-size:1.4rem} .know_col p{font-size:1.02rem;line-height:1.6;letter-spacing:0} .know_close{margin-top:2.5rem;max-width:46rem;color:var(--ink); font-family:var(--font-semimono);font-size:.95rem;line-height:1.7;font-weight:400} /* ================= WHAT'S INCLUDED (deep blue — Sculpt photos section) ================= */ .section_features{z-index:5;background:var(--blue-950);color:var(--white-100)} .features_title{max-width:45rem;margin-bottom:3.5rem} .features_grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem; padding-bottom:var(--pad-large); } @media (max-width:991px){.features_grid{grid-template-columns:1fr 1fr}} @media (max-width:600px){.features_grid{grid-template-columns:1fr}} .features_item{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;max-width:26rem} .features_item h3{font-size:1.3rem} .features_item p{font-size:.95rem;line-height:1.55;letter-spacing:0;color:var(--paper-soft)} .features_item-link{color:var(--yellow-200);font-family:var(--font-semimono);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.25em} /* Illustrations retired (2026-09-02). The number is the device: it is how the deck and every other page count things. */ .for_icon{width:6.75rem;height:6.75rem;object-fit:contain;transition:transform .5s cubic-bezier(.19,1,.22,1)} .for_card-wrap:hover .for_icon{transform:rotate(-12deg) scale(1.15)} .features_item .stamp{width:6.25rem;height:6.25rem;object-fit:contain;transition:transform .4s cubic-bezier(.19,1,.22,1)} .features_item:hover .stamp{transform:rotate(-8deg) scale(1.12)} .feat_num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--field-paper);color:var(--field-paper);font:600 .7rem/1 var(--font-mono);letter-spacing:.08em} .features_not{font-size:.95rem;color:var(--blue-200);font-family:var(--font-body);letter-spacing:0;padding-bottom:var(--pad-large)} .draggable-marquee{ width:100%;overflow:hidden;display:flex;align-items:center; padding-bottom:var(--pad-large);cursor:grab; } .draggable-marquee:active{cursor:grabbing} /* ── Interlocking photo wall ───────────────────────────────────── Tiles of three different footprints packed onto a 3-row grid with `dense` flow, so they lock into each other with no gaps — built, not scattered. It is the argument the section is making: every piece of the trip was cut to fit the ones beside it. Straight edges, one gutter width, no rotation, no overlap. */ .h-track{display:flex;align-items:stretch;gap:.55rem;flex:none;width:max-content;padding:2.5rem 0;animation:hscroll 78s linear infinite;will-change:transform} .photo-sequence{ display:grid;flex:none; grid-template-columns:repeat(8,8.75rem); grid-template-rows:repeat(3,8.75rem); gap:.55rem; } .photo-frame{position:relative;overflow:hidden;border-radius:1.35rem;background:var(--field-dark);border:0;transform:none;margin:0} /* Explicit placement: 10 tiles tile a 3x8 field exactly, no leftover cells. Three footprints only (2x2, 1x3, 2x1 and their rotations), so the wall reads as built rather than randomly scattered. */ .photo-frame:nth-child(1){grid-area:1/1/span 2/span 2} .photo-frame:nth-child(2){grid-area:3/1/span 1/span 2} .photo-frame:nth-child(3){grid-area:1/3/span 3/span 1} .photo-frame:nth-child(4){grid-area:1/4/span 1/span 2} .photo-frame:nth-child(5){grid-area:2/4/span 2/span 2} .photo-frame:nth-child(6){grid-area:1/6/span 3/span 1} .photo-frame:nth-child(7){grid-area:1/7/span 1/span 1} .photo-frame:nth-child(8){grid-area:1/8/span 1/span 1} .photo-frame:nth-child(9){grid-area:2/7/span 2/span 1} .photo-frame:nth-child(10){grid-area:2/8/span 2/span 1} .photo-frame img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none} /* ================= SAFETY (lavender) ================= */ /* ================= WHO CHOOSES WHERE YOU EAT (paper) — 2026-09-02 ================= */ .section_eat{z-index:6;background:var(--field-paper);color:var(--espresso)} .eat_grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start} @media (max-width:991px){.eat_grid{grid-template-columns:1fr;gap:2rem}} .eat_lede{font-family:var(--font-serif);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.01em;max-width:22ch;margin-top:1.25rem} .eat_body{display:flex;flex-direction:column;gap:1.25rem;max-width:36rem} /* the lede keeps its display size now that it leads the body column */ .eat_body .eat_lede{margin-top:0;max-width:none;font-family:var(--font-serif); font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:.4rem} .eat_body p{font-size:1.1rem;line-height:1.55;letter-spacing:0;color:var(--espresso)} .eat_body strong{font-weight:600} .eat_link{margin-top:.5rem} .section_safe{z-index:7;background:var(--field-olive);color:var(--field-paper)} .safe_text{font-size:1.35rem;line-height:1.45;max-width:52rem;color:var(--field-paper);margin-top:1.5rem} .safe_link{ display:inline-flex;align-items:center;gap:.8rem;margin-top:1.75rem;padding:.85rem 1.1rem; border:1px solid var(--accent-butter);border-radius:0;background:var(--accent-butter);color:var(--espresso); font-family:var(--font-semimono);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase; transition:transform .2s ease,background-color .2s ease; } .safe_link:hover{transform:none;background:var(--field-paper);border-color:var(--field-paper)} /* ================= REVIEWS (white — Noura zoom) ================= */ .section_reviews{z-index:3;background:var(--white-100)} .reviews_grid{display:grid;grid-template-columns:repeat(3,minmax(0,20rem));justify-content:space-between;gap:2rem;margin-top:3.5rem} @media (max-width:991px){.reviews_grid{grid-template-columns:1fr;max-width:34rem}} .review_card{display:flex;flex-direction:column;gap:1.25rem} .review_photo{border-radius:0;overflow:hidden;aspect-ratio:4/3;background:var(--white-200)} .review_photo img{ width:100%;height:100%;object-fit:cover; transform:scale(1.06);transition:transform 1.4s cubic-bezier(.19,1,.22,1); } .review_card.in .review_photo img{transform:scale(1)} .review_quote{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;line-height:1.6;letter-spacing:0;color:var(--ink-soft)} /* a card can carry two remarks; they came from two different moments, so they stay separately quoted rather than being run together */ .review_quote + .review_quote{margin-top:-.4rem} .review_by{font-family:var(--font-semimono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--purple)} /* ================= SEE A REAL TRIP (periwinkle) ================= */ .section_real{z-index:8;background:var(--periwinkle);color:var(--espresso)} .real_lede{margin:1.25rem auto 0;max-width:46rem;text-align:center;font-size:1.1rem;line-height:1.55;letter-spacing:0} .real_grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:5rem} @media (max-width:860px){.real_grid{grid-template-columns:1fr;gap:5rem}} .real_card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem; background:var(--field-paper);color:var(--espresso);padding:4.75rem 2rem 2.25rem; transition:transform .25s ease} .real_card:hover{transform:translateY(-6px)} .real_avatar{position:absolute;top:-3.75rem;left:50%;transform:translateX(-50%); width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover;border:4px solid var(--field-paper)} .real_card h3{font-size:1.5rem;font-weight:600;letter-spacing:-.01em} .real_card p{font-size:.98rem;line-height:1.55;letter-spacing:0;color:var(--ink-soft)} .real_arrow{margin-top:auto;padding-top:.35rem;font-family:var(--font-semimono);font-size:.78rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:#D42B10;text-decoration:underline;text-underline-offset:.3em} .real_card:hover .real_arrow{color:var(--red-orange)} /* ================= PRICE (lime — Sculpt "Get tickets") ================= */ .section_ticket{z-index:9;background:var(--field-neutral)} /* Wide: the intro sits top-left, the card fills the right across both rows, and the two notes sit bottom-left so they finish level with the card. Narrow: one column, and the notes fall after the card where they belong. */ .ticket_content{display:grid;grid-template-columns:.78fr 1.22fr;grid-template-rows:1fr auto;gap:2rem} .ticket_intro{grid-column:1;grid-row:1} .ticket_wrapper{grid-column:2;grid-row:1 / span 2} .ticket_notes{grid-column:1;grid-row:2;align-self:end} @media (max-width:991px){ .ticket_content{grid-template-columns:1fr;grid-template-rows:none;gap:2.5rem} .ticket_intro,.ticket_wrapper,.ticket_notes{grid-column:1;grid-row:auto} } .ticket_lead{margin-top:2.5rem;font-size:1.2rem;line-height:1.5;max-width:26rem} .ticket_wrapper{padding-left:0;display:flex;flex-direction:column;justify-content:center} @media (max-width:991px){.ticket_wrapper{padding-left:0}} .ticket_card{position:relative;width:100%} .ticket_blob-wrap{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none} /* Four layers, the original drift, recolored. Espresso sits deepest as depth; royal, lavender and red-orange fan out from under the card edges. The card itself goes back to paper so the color comes from the motion behind it, not from the panel. */ .ticket_blob{position:absolute;color:var(--espresso);width:118%;height:118%;transform-origin:center;animation:ticket-wave 13s ease-in-out infinite alternate;will-change:transform} .ticket_blob.cc-pink{color:var(--lavender);width:116%;height:116%;animation-duration:16s;animation-delay:-5s;animation-direction:alternate-reverse} .ticket_blob.cc-tangerine{color:var(--red-orange);width:110%;height:110%;animation-duration:14s;animation-delay:-9s} .ticket_blob.cc-blue{color:var(--royal);width:106%;height:106%;animation-duration:18s;animation-delay:-3s;animation-direction:alternate-reverse} @keyframes ticket-wave{ 0%{transform:translate3d(-1.1%,.7%,0) rotate(-.45deg) scale(.995,1.015)} 50%{transform:translate3d(.8%,-.9%,0) rotate(.55deg) scale(1.012,.99)} 100%{transform:translate3d(1.15%,.5%,0) rotate(-.2deg) scale(.99,1.018)} } @media (max-width:991px){ .ticket_blob{width:110%}.ticket_blob.cc-pink{width:108%} .ticket_blob.cc-tangerine{width:106%}.ticket_blob.cc-blue{width:103%} } .ticket_blob{position:absolute;color:var(--espresso);width:118%;height:118%;transform-origin:center;animation:ticket-wave 13s ease-in-out infinite alternate;will-change:transform} .ticket_blob.cc-pink{color:var(--lavender);width:116%;height:116%;animation-duration:16s;animation-delay:-5s;animation-direction:alternate-reverse} .ticket_blob.cc-tangerine{color:var(--red-orange);width:110%;height:110%;animation-duration:14s;animation-delay:-9s} .ticket_blob.cc-blue{color:var(--royal);width:106%;height:106%;animation-duration:18s;animation-delay:-3s;animation-direction:alternate-reverse} @keyframes ticket-wave{ 0%{transform:translate3d(-1.1%,.7%,0) rotate(-.45deg) scale(.995,1.015)} 50%{transform:translate3d(.8%,-.9%,0) rotate(.55deg) scale(1.012,.99)} 100%{transform:translate3d(1.15%,.5%,0) rotate(-.2deg) scale(.99,1.018)} } @media (max-width:991px){ .ticket_blob{width:110%} .ticket_blob.cc-pink{width:108%} .ticket_blob.cc-tangerine{width:106%} .ticket_blob.cc-blue{width:103%} } .ticket_block{ position:relative;z-index:10; background:var(--field-paper);border-radius:2.25rem; display:flex;flex-direction:column;gap:1.5rem;padding:2rem; } .shape_list{display:flex;flex-direction:column;gap:1rem} .shape_tier{display:grid;grid-template-columns:minmax(7rem,.7fr) 1.3fr;gap:.45rem 1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--ink-hair)} .shape_tier:last-child{border-bottom:0;padding-bottom:0} .shape_name{font-size:1.25rem;font-weight:650;color:var(--royal)} .shape_copy{font-size:.92rem;line-height:1.45;letter-spacing:0} .shape_price{grid-column:2;font-family:var(--font-serif);font-style:italic;font-size:1rem;font-weight:600} /* this is a link into the pricing page, not the page's call to action, so it carries no card behind it */ .ticket_details{display:inline-flex;align-items:center;gap:.5rem;width:fit-content; font-family:var(--font-mono);font-size:1.05rem;font-weight:600;letter-spacing:-.01em; color:var(--royal);text-decoration:underline;text-underline-offset:.25em; transition:color .2s ease} .ticket_details:hover{color:var(--red-orange)} .ticket_details .arr{transition:transform .25s ease} .ticket_details:hover .arr{transform:translateX(5px)} @media (max-width:600px){.ticket_details{font-size:.95rem}} @media (max-width:600px){.shape_tier{grid-template-columns:1fr}.shape_price{grid-column:1}} .ticket_eyebrow{color:var(--ink);font-weight:700} .ticket_price{display:flex;align-items:center;gap:2rem} @media (max-width:767px){.ticket_price{flex-direction:column;align-items:flex-start;gap:.75rem}} .price_big{font-size:4rem;line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--royal);white-space:nowrap} @media (max-width:991px){.price_big{font-size:3.25rem}} .price_from{font-size:1.5rem;font-weight:500;margin-right:.35rem} .ticket_description{max-width:18rem;font-size:1rem;line-height:1.5;letter-spacing:0} .ticket_description a{text-decoration:underline;font-weight:600} .ticket_button{ background:var(--ink);color:var(--white-100); border-radius:0;padding:1.5rem 2.25rem; display:flex;justify-content:space-between;align-items:center;gap:1rem; transition:background-color .25s ease, color .25s ease; } .ticket_button:hover{background:var(--field-royal);color:var(--field-paper)} .ticket_button .btn{font-family:var(--font-mono);text-transform:none;letter-spacing:-.01em;font-size:1.25rem;font-weight:500} .ticket_button .arr{font-size:1.5rem;transition:transform .25s ease} .ticket_button:hover .arr{transform:translateX(6px)} /* the two notes below the lead line up with the foot of the price card on a wide screen, and follow the lead directly once the columns stack */ .ticket_smallprint{position:relative;z-index:11;margin:0;max-width:34rem;text-align:left;font-size:.85rem;line-height:1.55;letter-spacing:0;color:var(--ink);opacity:.75} .ticket_whatsapp{position:relative;z-index:11;margin-top:.9rem;text-align:left;max-width:34rem;font-size:.95rem;font-family:var(--font-body);letter-spacing:0} .ticket_whatsapp a{font-weight:700;text-decoration:underline} /* ================= FAQ (white-200) ================= */ .section_faq{z-index:10;background:var(--field-paper)} .faq_text{max-width:43rem;margin-bottom:1rem} .faq_item{border-bottom:1px solid var(--ink-hair)} .faq_top{ display:flex;justify-content:space-between;align-items:center;gap:1rem; cursor:pointer;list-style:none; padding-top:1.4rem;padding-bottom:1.4rem; transition:padding .8s cubic-bezier(.19,1,.22,1); font-size:1.25rem;font-weight:450; } .faq_top::-webkit-details-marker{display:none} .faq_top:hover{padding-left:.75rem;padding-right:.75rem} .faq_top .chev{flex:none;transition:transform .3s ease} details[open] .faq_top .chev{transform:rotate(180deg)} .faq_description{padding-bottom:2.25rem;font-size:1rem;line-height:1.55;letter-spacing:0;max-width:46rem;color:var(--ink-soft)} /* ================= CTA (lavender card — Sculpt) ================= */ .section_cta{position:relative;background:var(--field-paper);padding-bottom:clamp(3rem,6vw,5rem)} .cta_content{ position:relative;z-index:9; background:var(--field-royal);color:var(--field-paper); border-radius:var(--radius-lg); margin-bottom:calc(-1 * var(--radius-lg)); } .cta_content .btn.solid-yellow{background:var(--accent-butter);color:var(--espresso)} .cta_content .btn.outline-ink{border-color:var(--field-paper);color:var(--field-paper)} .cta_content .btn.outline-ink:hover{background:var(--field-paper);color:var(--espresso)} .cta_content .cta_lanes .or{color:var(--paper-soft)} .cta_content .btn.solid-yellow:hover{background:var(--field-paper);color:var(--espresso)} .cta_content .cta_ask a{color:var(--field-paper)} .cta_inner{padding:4rem var(--pad-global) 5rem;display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem} .cta_title{max-width:70rem} /* The mark replaces the J of "Japan" rather than sitting beside the words. It IS a J, so as a glyph it reads; dropped into a sentence on its own it just looks like a stray letter. Sized to Oswald's cap height and tucked in so the word still reads as one word. */ .j-word{white-space:nowrap} .j-glyph{ display:inline-block;height:.81em;width:auto; /* = Oswald's cap height, so the J tops and bottoms out with the letters beside it */ color:inherit; /* the J reads as part of the word, not as an accent (Yuriko 2026-09-08) */ vertical-align:baseline;position:relative;top:0; margin-right:.045em; } .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (max-width:991px){.cta_icon{width:3.2rem}} @media (max-width:767px){.cta_icon{width:2.2rem}} .cta_row{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap} .cta_ask{font-size:.95rem;font-family:var(--font-body);letter-spacing:0} .cta_ask a{font-weight:700;text-decoration:underline} /* ================= FOOTER (black — Sculpt) ================= */ .section_footer{background:var(--field-dark);color:var(--white-100);padding-top:var(--radius-lg);position:relative;overflow:hidden} .footer_content{display:flex;flex-direction:column;gap:9rem;padding-top:8rem;position:relative;z-index:2} @media (max-width:991px){.footer_content{gap:7rem;padding-top:7rem}} @media (max-width:767px){.footer_content{gap:5rem;padding-top:5rem}} .footer_logotype{ font-family:var(--font-logo);font-weight:600; font-size:clamp(2.8rem,10vw,9.75rem);line-height:.82;text-align:center; color:var(--white-100);user-select:none;letter-spacing:-.045em;white-space:nowrap; } .footer_text{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;color:var(--white-100); font-family:var(--font-semimono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;line-height:1.8} .footer_text-left{max-width:24rem;font-family:var(--font-serif);text-transform:none;letter-spacing:0;font-size:1.6rem;font-weight:400;line-height:1.15} .footer_text-right{max-width:26rem;text-align:right} .footer_credits{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-top:5rem;padding-bottom:1.5rem;flex-wrap:wrap} .footer_menu{display:flex;gap:2rem;align-items:center;flex-wrap:wrap} .footer_menu a{color:var(--gray-300);transition:color .2s linear;font-size:.9rem;letter-spacing:0} .footer_menu a:hover{color:var(--white-100)} .footer_note{font-family:var(--font-mono);font-size:.78rem;letter-spacing:0;line-height:1.5;color:var(--gray-400)} @media (max-width:991px){ .hero_content{grid-template-columns:1fr;height:85vw;padding-bottom:2rem} .hero_info{grid-column:1;align-items:flex-start;gap:.25rem} .hero_location{text-align:left;max-width:25rem} .hero_date{font-family:var(--font-semimono);font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase} } @media (max-width:767px){ .hero_content{height:auto;max-height:none} .hero_waves{display:none} .footer_text{flex-direction:column;align-items:flex-start} .footer_text-right{text-align:left} .footer_credits{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .h-track{animation:none} .reveal{opacity:1;transform:none;transition:none} .review_photo img{transform:none;transition:none} .for_blob,.ticket_blob,.know_col::after{animation:none} } .footer_note,.footer_note *{color:var(--paper-soft)!important} .eat_photo{margin:1.8rem 0 0;max-width:30rem} .eat_photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .eat_photo figcaption{margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--ink-hair, rgba(52,21,23,.2));font:500 .62rem/1.45 var(--font-mono, "IBM Plex Mono", monospace);letter-spacing:.1em;text-transform:uppercase;opacity:.75} /* steps: the original card shape, and the drifting waves removed (Yuriko 2026-09-03) */ .for_blob{display:none!important} .for_card{border-radius:2.5rem!important;padding:2rem 1.75rem!important;animation:none!important} .for_card-wrap{padding:.4rem} /* the top scroll animation reads better a size down (Yuriko 2026-09-03); everything else keeps its original scale */ .weare_heading{font-size:clamp(1.8rem,5vw,4.2rem)!important} .weare_tagline{font-size:clamp(1.5rem,2.9vw,2.5rem)!important} /* the card tilts on hover again (Yuriko 2026-09-03) */ .for_card{transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s ease,filter .35s ease!important} .for_card-wrap:hover{z-index:10} .for_card:hover,.for_card-wrap:hover .for_card{transform:translateY(-8px) rotate(-.5deg)!important;box-shadow:0 18px 40px rgba(0,0,0,.28)!important;filter:saturate(1.08)} .for_card-wrap:hover .for_icon{transform:rotate(-12deg) scale(1.15)} /* ── "What stays a surprise": the answer is veiled until you hover, tap or focus ── */ .know_col.secret{position:relative;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:13rem} .know_col.secret h3{margin:0;text-align:center;transition:transform .45s cubic-bezier(.19,1,.22,1)} .know_col.secret p{margin-top:1rem;text-align:center;opacity:0;transform:translateY(.6rem);transition:opacity .45s ease,transform .45s cubic-bezier(.19,1,.22,1);pointer-events:none} .know_hint{display:block;margin-top:.9rem;text-align:center;font:600 .6rem/1 var(--font-mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;opacity:.55;transition:opacity .3s ease} .know_col.secret:hover p,.know_col.secret:focus-visible p,.know_col.secret:focus p,.know_col.secret.is-open p{opacity:1;transform:none} .know_col.secret:hover .know_hint,.know_col.secret:focus .know_hint,.know_col.secret.is-open .know_hint{opacity:0} .know_col.secret:hover h3,.know_col.secret:focus h3,.know_col.secret.is-open h3{transform:translateY(-.35rem)} @media (hover:none){.know_hint::after{content:" (tap)"}} @media (prefers-reduced-motion:reduce){.know_col.secret p{transition:none}} /* ── footer link groups (link set per 01-sitewide) ── */ .footer_links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin:2.5rem 0 2rem} @media(max-width:760px){.footer_links{grid-template-columns:1fr;gap:1.6rem}} .footer_links > div{display:flex;flex-direction:column;gap:.5rem} .footer_links p{margin:0 0 .3rem;font:600 .62rem/1.4 var(--font-mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;opacity:.6} .footer_links a{color:inherit;text-decoration:none;font-size:.92rem;opacity:.9} .footer_links a:hover{text-decoration:underline;text-underline-offset:.2em} .footer_links{border-top:1px solid rgba(253,252,248,.22);padding-top:2.2rem;margin:0 0 1rem} .footer_links > div{gap:.55rem}