/* HERE Senbonkita — V3 GRID (everything below the cover) — uses the full width between the guides Guides Left = left edge of the logo; right = right edge of the Book button; --gut in from the browser edge. Columns 12 columns between the guides, gap --cg. Header Section header (OUR STORY, THE HOUSE …) sits on the left guide, on its own line or atop its text block. Split Wide photo, 16:9, 80% of a 7-column field held to the outer guide + text block, 4 columns, bottom-aligned. Sections alternate: text left / photo right, then photo left / text right. Trio Three equal columns of 4 (suites + gallery, contact, suite-page photos), portrait 4:5 photos. Text Never wider than 6 columns. Rows Within a section everything top-aligns on the first row; split rows bottom-align text to the photo. TYPE (five sizes, nothing else) 1 Display --t-h1 cover headline, suite-page titles 2 Title --t-h2 one per section 3 Heading --t-h3 section headers (uppercase, tracked) and item names (suites, products) 4 Body --t-body every paragraph; descriptions in grey, facts in ink 5 Small --t-small meta lines, field labels, links and buttons (uppercase, tracked) Menu links sit between Heading and Body. RHYTHM Sections --sec apart; title → text --s2; text → images/links --s3. */ @font-face{font-family:'Tenet';src:url('fonts/Tenet-Regular.woff2') format('woff2'),url('fonts/Tenet-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Tenet';src:url('fonts/Tenet-Medium.woff2') format('woff2'),url('fonts/Tenet-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'ABC Arizona Flare';src:url('fonts/ArizonaFlare-Regular.woff2') format('woff2'),url('fonts/ArizonaFlare-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;} :root{ --paper:#FAFAFA; --ink:#1A1A1A; --soft:#6B6B6B; --line:#E3E3E3; --tint:#EFEFEF; --blue:#004FFF; --wine:#3F202C; --f-mark:'ABC Arizona Flare', 'Times New Roman', serif; --f-text:'Tenet', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --f-jp:'Murecho', 'Hiragino Sans', 'Yu Gothic', sans-serif; /* guides + grid */ --gut:clamp(20px, 2.2vw, 48px); --cg:clamp(16px, 1.6vw, 32px); /* type scale */ --t-h1:clamp(1.25rem, 1rem + .5vw, 1.65rem); /* 1 Display */ --t-h2:clamp(1.12rem, .98rem + .35vw, 1.45rem); /* 2 Title */ --t-h3:clamp(.95rem, .88rem + .18vw, 1.08rem); /* 3 Heading */ --t-sec:clamp(1.05rem, .9rem + .4vw, 1.4rem); /* section header: OUR STORY, THE HOUSE … */ --t-body:clamp(.95rem, .9rem + .11vw, 1.05rem); /* 4 Body (+10%) */ --t-small:clamp(.72rem, .68rem + .08vw, .8rem); /* 5 Small */ --t-lead:var(--t-body); --t-label:var(--t-small); --t-sh:var(--t-h3); /* rhythm */ --sec:clamp(112px, 3.5rem + 8vw, 230px); --s1:clamp(10px, .8vw, 14px); --s2:clamp(18px, 1.6vw, 28px); --s3:clamp(32px, 3vw, 56px); color-scheme:light; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important;}} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-text); font-size:var(--t-body); line-height:1.6; -webkit-font-smoothing:antialiased;} img{max-width:100%; display:block;} a{color:inherit;} :focus-visible{outline:2px solid var(--blue); outline-offset:3px;} button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;} h1,h2,h3{font-weight:400; margin:0; line-height:1.1; text-wrap:balance;} p{margin:0;} figure{margin:0;} .jp{font-family:var(--f-jp);} .addr{user-select:all;} a.quiet{color:inherit; text-decoration:none;} a.quiet:hover{opacity:.6;} /* ---------- type roles ---------- */ .label{display:block; font-size:var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); line-height:1.4;} .label.c-lab, .label.sh{font-size:var(--t-sec); color:var(--ink); letter-spacing:.14em; line-height:1.2;} .h2{font-size:var(--t-h2); line-height:1.3; max-width:36ch;} .c-lab{line-height:1.3; padding-top:.18em;} .h3{font-size:var(--t-h3); line-height:1.3;} .lead{font-size:var(--t-body); line-height:1.65; color:var(--soft); max-width:52ch;} .small{font-size:var(--t-small); color:var(--soft);} .more{display:inline-block; font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px;} .more:hover{opacity:.6;} .btn{display:inline-block; padding:1.2em 2.6em; font-size:var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:1px solid currentColor; transition:background .2s ease, color .2s ease;} .btn-ink{background:var(--ink); color:#fff; border-color:var(--ink);} .btn-ink:hover{background:transparent; color:var(--ink);} /* ---------- grid ---------- */ .g{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--cg); padding-inline:var(--gut);} .sec{padding-top:var(--sec);} .c-lab{grid-column:1 / -1; margin-bottom:var(--s3);} /* section header: its own row, on the left guide */ .c-main{grid-column:1 / 7;} /* text: half width */ .c-wide{grid-column:1 / 13;} /* guide to guide */ .m-a{grid-column:1 / 5;} .m-b{grid-column:5 / 9;} .m-c{grid-column:9 / 13;} .m-ab{grid-column:1 / 9;} /* split rows: a wide photo (7 columns) against a text block (4 columns), one empty column between */ .sp-img-r{grid-column:6 / 13;} .sp-txt-l{grid-column:1 / 5;} .sp-img-l{grid-column:1 / 8;} .sp-txt-r{grid-column:9 / 13;} .wide-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;} .sp-txt-l, .sp-txt-r, .sp-img-l, .sp-img-r{align-self:end;} /* text and photo share one bottom line */ .trio{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--cg); row-gap:var(--s3);} /* inside c-wide: three modules exactly */ .c-text{grid-column:1 / 7;} .stack-v{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start;} @media (max-width:820px){ .trio{grid-template-columns:minmax(0,1fr);} .products.trio{grid-template-columns:repeat(2, minmax(0,1fr));} .specs > :first-child{grid-column:auto;} .g{grid-template-columns:minmax(0,1fr);} .g > *{grid-column:1 / -1 !important;} .c-lab{margin-bottom:var(--s2);} .sp-txt-l, .sp-txt-r{margin-top:var(--s3);} .sp-txt-l{order:2;} } /* ---------- header ---------- */ .top{position:sticky; top:0; z-index:30; color:var(--ink); background:rgba(250,250,250,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding-top:env(safe-area-inset-top,0px);} .top-in{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:clamp(16px, 1.2vw, 26px) var(--gut);} .logotype{font-family:var(--f-mark); font-size:clamp(1.3rem, .96rem + .51vw, 1.75rem); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;} .nav{display:flex; align-items:center; gap:clamp(26px, 1.2vw + 12px, 48px); list-style:none; margin:0; padding:0;} .nav a{font-size:clamp(.74rem, .6rem + .22vw, .92rem); letter-spacing:.12em; text-transform:uppercase; text-decoration:none;} .nav a:hover{opacity:.6;} .nav .btn{padding:.8em 1.6em;} @media (max-width:820px){.nav li:not(.keep){display:none;}} /* ---------- photo carousels: one photo at a time, click / tap for the next ---------- */ .stack{position:relative; width:100%; aspect-ratio:4/5; cursor:pointer; outline-offset:6px;} .print{position:absolute; inset:0; background:var(--tint); overflow:hidden;} .print img{width:100%; height:100%; object-fit:cover; display:block;} .print[aria-hidden="true"]{visibility:hidden;} .dots{display:flex; gap:2px; margin:6px 0 0 -8px;} .dot{width:22px; height:22px; padding:8px; border-radius:50%; background:var(--line); background-clip:content-box;} .dot[aria-current="true"]{background-color:var(--ink);} /* ---------- cover (option D) ---------- Fills the first screen. Photo centred, sized to screen height. Caption row runs guide to guide, mirroring the header row: headline on the left guide, tagline on the right guide. */ .hero{display:flex; flex-direction:column; gap:var(--s3); padding:clamp(48px, 7vh, 112px) var(--gut) 0;} .hero .stack{width:clamp(260px, 24vw, 440px); aspect-ratio:3/4; margin:0 auto;} .hero-cap{display:flex; justify-content:space-between; align-items:flex-end; gap:12px 48px;} .hero h1{font-size:var(--t-h1); line-height:1.15; letter-spacing:.02em; text-transform:uppercase;} .hero .tag{font-size:var(--t-lead); line-height:1.6; color:var(--soft); max-width:40ch; text-align:right; text-wrap:balance;} @media (max-width:820px){ .hero{padding-top:24px;} .hero .stack{width:100%;} .hero-cap{flex-direction:column; align-items:flex-start;} .hero .tag{text-align:left;} } /* cover option 2A: photo on the left guide, words on the right guide */ .hero.side-l{display:grid; grid-template-columns:auto minmax(0,1fr); gap:40px 72px; align-items:end; padding-top:clamp(48px, 6vh, 96px);} .hero.side-l .stack{width:clamp(260px, 22vw, 420px); aspect-ratio:3/4; height:auto; margin:0;} .hero.side-l .hero-cap{flex-direction:column; align-items:flex-end; text-align:right; margin:0; gap:var(--s2);} @media (max-width:820px){ .hero.side-l{grid-template-columns:1fr;} .hero.side-l .stack{width:100%;} .hero.side-l .hero-cap{align-items:flex-start; text-align:left;} } /* cover option "cinema": one large, darkened photograph between the guides, words overlaid bottom-left */ /* cinema cover: fills exactly the first screen below the menu, photo centred with equal air above and below */ .hero.cinema{--cv-pad:clamp(28px, 5.5vh, 80px); height:calc(100svh - var(--head-h, 72px)); min-height:480px; display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut); gap:0;} .cine-fade{position:absolute; inset:0; z-index:3; background:#000; opacity:var(--fade, 0); pointer-events:none;} /* deepens as the cover scrolls away */ .cine{position:relative; width:100%; height:calc(100% - var(--cv-pad) * 2); max-height:1000px; overflow:hidden; background:#151a22;} .cine img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:46% 55%;} .cine::after{content:''; position:absolute; inset:0; background:linear-gradient(20deg, rgba(8,10,16,.62) 0%, rgba(8,10,16,.25) 32%, rgba(8,10,16,0) 55%);} .cine-cap{position:absolute; z-index:2; left:clamp(20px, 3vw, 56px); bottom:clamp(20px, 3vw, 56px); right:clamp(20px, 3vw, 56px); color:#fff; display:flex; flex-direction:column; gap:var(--s2);} .cine-cap h1{font-size:clamp(1.4rem, 1rem + .9vw, 2.1rem); line-height:1.12; letter-spacing:.02em; text-transform:uppercase;} .cine-cap .tag{font-size:var(--t-lead); line-height:1.6; color:rgba(255,255,255,.82); max-width:40ch; text-align:left; text-wrap:balance;} @media (max-width:820px){ .hero.cinema{--cv-pad:20px;} .cine img{object-position:42% 55%;} } /* ---------- the house: label | photo (A) | text (B) ---------- */ .house .m-a img{width:100%; aspect-ratio:4/5; object-fit:cover;} /* ---------- accommodation (A+B) + gallery space (C) ---------- Row 1: labels and titles top-aligned. Row 2: three photos, one per module. Row 3: totals. */ .ag{align-items:start;} .ag .r2{margin-top:var(--s3); align-self:stretch; display:flex; flex-direction:column;} .ag .r2 > a, .ag .r2 > .card-txt{flex:1; display:flex; flex-direction:column; align-items:flex-start;} .ag .r2 .more{margin-top:auto !important;} /* links share one bottom line */ .card-txt{margin-top:var(--s2);} .card-txt .lead{margin-top:var(--s1);} .ag .r2 .lead{margin-bottom:var(--s2);} .dots{min-height:28px;} .stack.wide{aspect-ratio:16/9;} .statement .s-r2{margin-top:var(--s3);} .statement .h2{max-width:none;} .room > a{display:block; text-decoration:none; margin-top:var(--s2);} .room > a:hover .h3{opacity:.6;} .room .meta{display:block; margin-top:4px;} .room p{margin-top:var(--s1);} .room .more, .gal-photo .more{margin-top:var(--s2);} .gal-photo img{width:100%; aspect-ratio:4/5; object-fit:cover;} .total{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; margin-top:var(--s3); padding-top:var(--s1); border-top:1px solid var(--line);} @media (max-width:820px){ .ag .m-ab.r1{order:2;} .ag .room.m-a{order:3;} .ag .room.m-b{order:4; margin-top:var(--s3);} .ag .total{order:5;} .ag .m-c.r1{order:6; margin-top:var(--sec);} .ag .gal-photo{order:7;} } /* ---------- amenities ---------- */ .ode-row{display:flex; gap:var(--s3); align-items:flex-start;} .ode-row img{width:clamp(48px, 3.4vw, 64px); height:auto; flex:none;} /* ---------- shop ---------- */ .products{margin-top:var(--s3);} .product{text-decoration:none; display:block;} .product .ph, .product img{width:100%; aspect-ratio:4/5; object-fit:cover;} .product .h3{margin-top:var(--s1);} .product:hover .ph, .product:hover img{opacity:.85;} /* ---------- location ---------- */ .stations{list-style:none; margin:var(--s1) 0 0; padding:0; border-top:1px solid var(--line); width:100%;} .stations li{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:var(--s1) 0; border-bottom:1px solid var(--line);} .stations li b{font-weight:500;} .stations li span{font-size:var(--t-small); color:var(--soft);} /* ---------- booking band (background full bleed, content on the grid) ---------- */ .book{background:var(--tint); margin-top:var(--sec); padding-block:var(--sec);} .book .btn{margin-top:var(--s1);} /* ---------- contact ---------- */ .contact{margin:var(--s3) 0 0;} .book .stack-v .btn{margin-top:var(--s1);} .contact dt{margin-bottom:var(--s1);} .contact dd{margin:0; font-size:var(--t-body); line-height:1.6;} .contact a{text-underline-offset:3px;} /* ---------- placeholder tiles ---------- */ .ph{background:var(--tint); box-sizing:border-box; display:flex; align-items:flex-end; padding:12px; font-size:var(--t-small); color:var(--soft);} /* ---------- footer: on the guides ---------- */ .foot{margin-top:var(--sec); border-top:1px solid var(--line); padding:var(--s3) var(--gut); font-size:var(--t-small); color:var(--soft); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px 40px;} .foot .m{display:flex; gap:12px; align-items:center; color:var(--ink);} .foot .m img{width:34px;} .foot .m span{font-family:var(--f-mark); text-transform:uppercase; letter-spacing:.06em; font-size:var(--t-small);} .foot a{text-decoration:none;} .foot a:hover{color:var(--ink);} /* ---------- suite pages ---------- */ .s-top{padding-top:var(--s3);} .s-top h1{font-size:var(--t-h1); line-height:1.15;} .gal{margin-top:var(--s3);} .gal img, .gal .ph{width:100%; aspect-ratio:4/5; object-fit:cover;} .dl{display:grid; grid-template-columns:max-content 1fr; margin:0; border-top:1px solid var(--line);} .dl dt, .dl dd{padding:var(--s1) 0; border-bottom:1px solid var(--line); margin:0;} .dl dt{color:var(--soft); padding-right:32px;} .am{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);} .am li{padding:var(--s1) 0; border-bottom:1px solid var(--line);} .specs > :first-child{grid-column:span 2;} .specs .label{margin-bottom:var(--s1);} .plan{aspect-ratio:4/3; width:100%;} .pager{display:flex; justify-content:space-between; gap:16px; margin-top:var(--sec); padding-inline:var(--gut);} .pager > *{flex:1 1 0;} .pager > *:nth-child(2){text-align:center;} .pager > *:last-child{text-align:right;} .pager a{text-decoration:none; padding:10px 0;} .pager a:hover{opacity:.6;} .label.c-lab.quiet{color:var(--ink);} /* breathing room between photo and text in Our story and The House: text steps 15% of a module away from its photo */ @media (min-width:821px){ } /* split-row photos at 80% of their 7-column field, held to the outer guide (cover and accommodation trio unchanged) */ @media (min-width:821px){ .sp-img-l{width:80%; justify-self:start;} .sp-img-r{width:80%; justify-self:end;} .plan{width:80%;} } .wide-img.tall{aspect-ratio:4/3;} /* ---------- section rules ---------- Each section opens with a full-width hairline from guide to guide; the section header sits a step below it. Split rows: text bottom-aligns to the photo's bottom edge (carousel dots hang below). */ .sec.ruled > .g{position:relative; padding-top:var(--s3);} .sec.ruled > .g::before{content:''; position:absolute; top:0; left:var(--gut); right:var(--gut); border-top:1px solid var(--ink);} .sp-img-l.room, .sp-img-r.room{position:relative;} .sp-img-l.room .dots, .sp-img-r.room .dots{position:absolute; left:0; top:100%;} /* dots hang below, so text aligns to the photo edge */ /* ---------- section fade-in ---------- Each section below the cover fades up gently the first time it enters the screen. Only sections still below the fold at load are hidden (set by script), so nothing visible ever waits. */ .reveal{opacity:0; transform:translateY(18px);} .reveal.in{opacity:1; transform:none; transition:opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.1s cubic-bezier(.2,.6,.2,1);} .reveal.in .sp-img-l, .reveal.in .sp-img-r, .reveal.in .r2{transition:opacity 1.1s .18s ease;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;}} /* ---------- even breathing room ---------- Every ruled section sits centred between its own rule and the next one: rule → --band → content → --band → next rule. Same for Our story, The House, Accommodation, Amenities, Location, Contact. */ :root{--band:clamp(72px, 2rem + 6vw, 168px);} .sec.ruled{padding-top:0; padding-bottom:var(--band);} .sec.ruled > .g{padding-top:var(--band);} #story{margin-top:var(--sec);} .book{margin-top:0;} .book + .sec.ruled{margin-top:var(--band);} .foot{margin-top:0;}