/* 首頁：橘瓦、圓窗、田野與相聚的場景編排。 */
.hero {
    position:relative;
    height:calc(100svh - 98px);
    min-height:660px;
    max-height:1000px;
    overflow:hidden;
    color:#fffaf0;
}

.hero-image {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.hero::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#18363f91,transparent 68%),linear-gradient(0deg,#19382d40,transparent 50%);
    pointer-events:none;
}

.hero-content {
    position:absolute;
    z-index:1;
    left:7%;
    bottom:17%;
}

.hero h1 {
    margin:18px 0 22px;
    font-size:clamp(48px,5.4vw,82px);
    line-height:1.3;
    text-shadow:0 3px 25px #19343a33;
}

.hero h1 span {
    color:#ffd695;
}

.hero-content > p:not(.eyebrow) {
    font-size:20px;
    letter-spacing:.1em;
}

.hero-link {
    display:inline-flex;
    gap:35px;
    align-items:center;
    padding:13px 22px;
    margin-top:10px;
    border:1px solid #f9f3eaa0;
    border-radius:40px;
    background:#263d3d33;
    font-size:16px;
}

.hero-link:hover {
    background:var(--rust);
}

.hero-stamp {
    position: absolute;
    z-index: 2;
    right: 6%;
    bottom: 11%;
    width: 180px;
    height: 180px;
    padding: 7px;
    border: 1px solid #ffe5b3;
    border-radius: 50%;
    background: #fff2d8;
    box-shadow: 0 8px 25px #17343633;
    transform: rotate(7deg);
}

.hero-stamp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    border-radius: 50%;
}

.hero-scroll {
    position:absolute;
    z-index:2;
    left:7%;
    bottom:32px;
    font-size:13px;
    letter-spacing:.14em;
}

.welcome-ribbon {
    position:relative;
    z-index:3;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:36px;
    padding:24px 5%;
    background:var(--rust);
    color:#fff4dc;
    font-size:16px;
    font-weight:600;
    letter-spacing:.07em;
}

.welcome-ribbon i {
    font-size:26px;
    color:#f2bd65;
    font-style:normal;
}

.story-scene {
    position:relative;
    padding:110px 0 75px;
    background:url('../images/fac/landscape.svg') center top / 100% 100% no-repeat,#fff9ed;
}

.story {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:10%;
    align-items:center;
}

.story-photos {
    position:relative;
    padding-bottom:40px;
}

.story-large {
    width:100%;
    height:495px;
    object-fit:cover;
    border:9px solid #fff7e8;
    outline:2px solid #b16b43;
    border-radius:47% 43% 39% 25% / 35% 45% 28% 31%;
    transform:rotate(-4deg);
}

.story-small {
    position:absolute;
    right:-20px;
    bottom:-10px;
    width:170px;
    height:170px;
    object-fit:cover;
    border:7px solid #fff9ed;
    border-radius:50%;
}

.photo-caption {
    position:absolute;
    left:0;
    bottom:-3px;
    font-size:15px;
    color:#915535;
    transform:rotate(-4deg);
}

.story-copy h2 {
    font-size:clamp(30px,2.9vw,45px);
    letter-spacing:.025em;
}

.story-copy h2 span {
    color:var(--rust);
    box-shadow:inset 0 -.22em #f0d0a1;
}

.story-copy .eyebrow {
    color:var(--rust);
}

.story-copy p:not(.eyebrow) {
    font-size:18px;
    line-height:2;
}

.story-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding-top:20px;
}

.story-foot p {
    padding-left:5%;
    font-size:18px;
    line-height:2;
    transform:rotate(-3deg);
}

.story-foot strong {
    color:var(--rust);
    font-weight:600;
}

.story-foot img {
    width: 46%;
    height: auto;
    aspect-ratio: 2 / 1;
    max-height: 290px;
    transform: translateY(23px);
}

.rooms-section {
    position:relative;
    padding:130px 0 110px;
    margin-top:-75px;
    background:url('../images/fac/roof-pattern.svg') repeat,#ae5536;
    color:#fff7e8;
    border-radius:48% 35% 0 0 / 65px 45px 0 0;
}

.section-title-row {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:45px;
}

.rooms-section h2 {
    margin-bottom:0;
    font-size:clamp(34px,3.4vw,50px);
}

.rooms-section .eyebrow {
    color:#ffdfad;
}

.rooms-section .text-link {
    color:#fff7e8;
    border-color:#f2ceaf;
}

.room-showcase {
    display:grid;
    grid-template-columns:270px 1fr;
    gap:60px;
    align-items:center;
}

.room-picker {
    display:grid;
    gap:5px;
}

.room-picker button {
    display:grid;
    grid-template-columns:25px 1fr auto 20px;
    gap:12px;
    align-items:center;
    padding:21px 12px;
    border:0;
    border-bottom:1px solid #f2ceaf70;
    background:transparent;
    color:#fff6e8;
    text-align:left;
    cursor:pointer;
    border-radius:0;
}

.room-picker button > span,.room-picker small {
    font-size:13px;
}

.room-picker strong {
    font-size:24px;
    font-family:var(--serif);
}

.room-picker button[aria-pressed='true'] {
    background:#fff1d8;
    color:#854328;
    border-radius:40px 10px 35px 10px;
    border-color:transparent;
    padding-inline:16px;
}

.featured-room {
    min-width:0;
}

.featured-room-photo {
    display:block;
    position:relative;
    padding:9px;
    border:1px solid #f7c9a5;
    border-radius:45% 12% 9% 8% / 35% 17% 10% 13%;
}

.featured-room-photo img {
    width:100%;
    height:440px;
    object-fit:cover;
    border-radius:45% 12% 9% 8% / 35% 17% 10% 13%;
}

.featured-room-badge {
    position:absolute;
    top:25px;
    right:25px;
    background:#ffe0a1;
    color:#754225;
    border-radius:35px;
    padding:8px 20px;
    font-size:15px;
    font-weight:700;
}

.featured-room-caption {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
    margin:24px 8px 0;
}

.featured-room-caption h3 {
    margin:0 0 10px;
    font-size:30px;
}

.featured-room-caption .eyebrow {
    margin-bottom:4px;
}

.featured-room-description {
    margin:0;
    font-size:16px;
}

.room-visit {
    flex-shrink:0;
    width:100px;
    height:100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#fff1d8;
    color:#854328;
    border-radius:50%;
    font-size:15px;
}

.room-visit span {
    font-size:26px;
    line-height:1.2;
}

.room-note {
    margin:40px 0 0;
    font-size:15px;
    text-align:center;
    color:#fff1d8;
}

.spaces-scene {
    position:relative;
    background:url('../images/fac/landscape.svg') center / 100% 100% no-repeat,#fff9ed;
    padding:100px 0 70px;
    border-radius:48% 45% 0 0 / 50px 40px 0 0;
    margin-top:-40px;
}

.spaces-heading {
    position:relative;
    text-align:center;
    padding-bottom:35px;
}

.spaces-heading::after {
    content:'';
    position:absolute;
    right:1%;
    top:-12px;
    width:100px;
    height:145px;
    background:url('../images/fac/flower.svg') center / contain no-repeat;
    transform:rotate(17deg);
}

.spaces-heading .eyebrow {
    color:var(--rust);
}

.spaces-heading h2 span {
    color:var(--rust);
}

.space-collage {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:5%;
    align-items:start;
}

.space-collage a {
    display:block;
    min-width:0;
}

.space-collage img {
    width:100%;
    height:360px;
    object-fit:cover;
    border:7px solid #fffdf7;
    box-shadow:0 0 0 1px #b9875c;
}

.space-main img {
    border-radius:35px 150px 35px 35px;
    transform:rotate(-3deg);
}

.space-side {
    margin-top:95px;
}

.space-side img {
    border-radius:150px 35px 35px 35px;
    transform:rotate(3deg);
}

.space-collage a > span {
    display:block;
    margin-top:25px;
    font-size:16px;
}

.space-collage b {
    display:block;
    color:var(--rust);
    font-size:21px;
    margin-bottom:5px;
}

.gather-note {
    display:flex;
    align-items:center;
    gap:32px;
    padding:50px 0 0;
}

.gather-number {
    font-size:105px;
    line-height:1;
    font-weight:800;
    color:var(--rust);
    font-family:Georgia,serif;
}

.gather-note h3 {
    margin:0 0 8px;
}

.gather-note p {
    margin-bottom:0;
    font-size:16px;
}

.gather-note .button {
    margin-left:auto;
    flex-shrink:0;
}

.together {
    min-height:520px;
    display:flex;
    align-items:center;
    background:linear-gradient(90deg,#182e36c7,#182e3640),url('../images/fac/14.jpg') center / cover fixed;
    color:#fff9ed;
}

.together-content {
    padding-block:80px;
}

.together h2 {
    font-size:clamp(38px,4vw,62px);
}

.together .button {
    background:#f6d89a;
    color:#513522;
}

.home-news {
    position:relative;
    background:#263f42;
    color:#fff9ed;
    padding-block:100px;
    border-radius:45% 0 0 0 / 45px 0 0 0;
    margin-top:-40px;
}

.home-news::after {
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:270px;
    height:230px;
    opacity:.15;
    background:url('../images/fac/roof-pattern.svg');
    border-radius:0 80% 0 0;
    pointer-events:none;
}

.news-scene {
    display:grid;
    grid-template-columns:.8fr 1.35fr;
    gap:8%;
}

.home-news .eyebrow {
    color:#f1bf7c;
}

.news-intro h2 {
    font-size:clamp(38px,4vw,58px);
}

.news-intro .text-link {
    color:#fff9ed;
    border-color:#a8bbb0;
}

.news-intro > img {
    width:75%;
    height:180px;
    object-fit:cover;
    border-radius:50% 50% 15px 15px;
    margin:35px 0 0 20px;
    transform:rotate(-6deg);
    border:5px solid #f1d4a7;
}

.news-journal article {
    border-top:1px solid #97aaa080;
}

.news-journal article:last-child {
    border-bottom:1px solid #97aaa080;
}

.news-journal a {
    display:grid;
    grid-template-columns:130px 1fr 25px;
    gap:24px;
    align-items:center;
    padding-block:30px;
}

.news-journal img {
    width:130px;
    height:155px;
    border-radius:60px 60px 12px 12px;
    object-fit:cover;
}

.news-journal h3 {
    font-size:23px;
    line-height:1.6;
    margin:5px 0 10px;
}

.news-journal p {
    font-size:16px;
    color:#e0e7db;
    margin-bottom:0;
}

.journal-arrow {
    font-size:25px;
    color:#f1bf7c;
}

@media (max-width:1000px) {
    .room-showcase {
        grid-template-columns:235px 1fr;
        gap:30px;
    }
    .room-picker button {
        gap:7px;
    }
    .story {
        gap:6%;
    }
    .story-copy p:not(.eyebrow) {
        font-size:17px;
    }
    .spaces-heading::after {
        width:65px;
        right:-3%;
    }
    .gather-note {
        flex-wrap:wrap;
    }
    .gather-note .button {
        margin-left:130px;
    }
    .news-scene {
        gap:5%;
        grid-template-columns:.7fr 1.2fr;
    }
    .news-journal a {
        grid-template-columns:95px 1fr 20px;
        gap:16px;
    }
    .news-journal img {
        width:95px;
        height:130px;
    }
}

@media (max-width:760px) {
    .hero {
        height:calc(92svh - 80px);
        min-height:660px;
    }
    .hero-image {
        object-position:57% center;
    }
    .hero-content {
        bottom:24%;
    }
    .hero h1 {
        font-size:clamp(42px,8.7vw,60px);
    }
    .hero-content > p:not(.eyebrow) {
        font-size:17px;
        letter-spacing:.02em;
    }
    .hero-content .eyebrow {
        font-size:13px;
        letter-spacing:.08em;
    }
    .hero-stamp {
        width:115px;
        height:115px;
        right:8%;
        bottom:6%;
        padding:6px;
    }
.hero-scroll {
        bottom:28px;
        max-width:180px;
        letter-spacing:0;
    }
    .welcome-ribbon {
        gap:12px;
        flex-wrap:wrap;
        padding:20px 6%;
        font-size:14px;
    }
    .welcome-ribbon span:last-child,.welcome-ribbon i:last-of-type {
        display:none;
    }
    .welcome-ribbon i {
        font-size:20px;
    }
    .story-scene {
        padding-top:65px;
        background-size:auto 100%;
    }
    .story {
        grid-template-columns:1fr;
        gap:70px;
    }
    .story-photos {
        margin-right:5%;
    }
    .story-large {
        height:370px;
    }
    .story-small {
        width:130px;
        height:130px;
        right:-25px;
        bottom:-18px;
    }
    .photo-caption {
        font-size:13px;
        width:185px;
    }
    .story-copy h2 {
        font-size:32px;
    }
    .story-copy p:not(.eyebrow) {
        font-size:17px;
    }
    .story-copy br {
        display:none;
    }
    .story-copy h2 br {
        display:initial;
    }
    .story-foot {
        flex-direction:column;
        gap:0;
        padding-top:40px;
    }
    .story-foot p {
        font-size:16px;
        padding:0;
    }
    .story-foot img {
        width:100%;
    }
    .rooms-section {
        padding:90px 0 95px;
    }
    .section-title-row {
        flex-direction:column;
        align-items:start;
        gap:20px;
        margin-bottom:28px;
    }
    .rooms-section h2 {
        font-size:33px;
    }
    .room-showcase {
        grid-template-columns:1fr;
        gap:25px;
    }
    .room-picker {
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }
    .room-picker button {
        grid-template-columns:1fr;
        text-align:center;
        gap:0;
        border:1px solid #f2ceaf70;
        border-radius:20px;
        padding:12px 4px;
    }
    .room-picker button[aria-pressed='true'] {
        border-radius:20px;
        padding:12px 4px;
    }
    .room-picker button > span {
        display:none;
    }
    .room-picker strong {
        font-size:22px;
    }
    .featured-room-photo img {
        height:300px;
    }
    .featured-room-badge {
        font-size:13px;
        padding:6px 13px;
        top:20px;
        right:20px;
    }
    .featured-room-caption {
        gap:10px;
        margin-inline:0;
    }
    .featured-room-caption h3 {
        font-size:25px;
    }
    .featured-room-description {
        font-size:16px;
    }
    .room-visit {
        width:75px;
        height:75px;
        font-size:13px;
    }
    .room-note {
        text-align:left;
    }
    .spaces-scene {
        padding-top:70px;
    }
    .spaces-heading {
        text-align:left;
    }
    .spaces-heading h2 {
        max-width:85%;
        font-size:33px;
    }
    .spaces-heading h2 span {
        display:block;
    }
    .spaces-heading::after {
        top:5px;
        right:-4%;
        width:55px;
        height:90px;
    }
    .space-collage {
        grid-template-columns:1fr;
        gap:30px;
    }
    .space-side {
        margin-top:0;
        margin-left:8%;
    }
    .space-main {
        margin-right:5%;
    }
    .space-collage img {
        height:270px;
    }
    .gather-note {
        gap:20px;
    }
    .gather-number {
        font-size:82px;
    }
    .gather-note > div {
        flex:1;
        min-width:180px;
    }
    .gather-note h3 {
        font-size:23px;
    }
    .gather-note .button {
        margin-left:0;
    }
    .together {
        min-height:460px;
        background-attachment:scroll;
    }
    .together h2 {
        font-size:38px;
    }
    .home-news {
        padding-block:70px;
    }
    .news-scene {
        grid-template-columns:1fr;
        gap:40px;
    }
    .news-intro {
        position:relative;
    }
    .news-intro h2 {
        font-size:38px;
    }
    .news-intro > img {
        display:none;
    }
    .news-journal a {
        grid-template-columns:80px 1fr 18px;
        gap:15px;
        padding-block:25px;
    }
    .news-journal img {
        width:80px;
        height:130px;
    }
    .news-journal h3 {
        font-size:21px;
    }
    .news-journal p:not(.eyebrow) {
        font-size:16px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .together {
        background-attachment:scroll;
    }
}

/* 橫向手機同樣使用獨立裝飾，保留既有雙欄內容。 */
@media (min-width: 761px) and (max-width: 900px) {
    .story-scene,
    .spaces-scene {
        background:
            url('../images/fac/mobile-contour.svg') left 50px / 180px auto no-repeat,
            url('../images/fac/mobile-leaves.svg') right 65px / 70px auto no-repeat,
            url('../images/fac/mobile-hills.svg') center bottom / 100% auto no-repeat,
            #fff9ed;
    }
}

/* 手機裝飾分層定位：每張 SVG 等比例縮放，不隨長頁面高度拉伸。 */
@media (max-width: 760px) {
    .story-scene {
        background:
            url('../images/fac/mobile-contour.svg') left 45px / 145px auto no-repeat,
            url('../images/fac/mobile-leaves.svg') right 525px / 58px auto no-repeat,
            url('../images/fac/mobile-hills.svg') center bottom / 100% auto no-repeat,
            #fff9ed;
        padding-top: 55px;
        padding-bottom: 75px;
    }

    .story {
        gap: 65px;
    }

    .story-large {
        height: auto;
        aspect-ratio: 1 / 1.12;
    }

    .story-copy .eyebrow,
    .rooms-section .eyebrow {
        letter-spacing: .07em;
        overflow-wrap: anywhere;
    }

    .story-foot {
        padding-top: 35px;
    }

    .story-foot img {
        width: 100%;
        max-width: 430px;
        height: auto;
        max-height: none;
        aspect-ratio: 2 / 1;
        transform: translateY(19px);
    }

    .story-foot p {
        width: 100%;
        transform: none;
    }

    .spaces-scene {
        background:
            url('../images/fac/mobile-contour.svg') left 310px / 110px auto no-repeat,
            url('../images/fac/mobile-leaves.svg') right 790px / 55px auto no-repeat,
            url('../images/fac/mobile-hills.svg') center bottom / 100% auto no-repeat,
            #fff9ed;
    }

    .spaces-heading::after {
        width: 48px;
        height: 64px;
        right: 0;
        top: 7px;
    }

    .spaces-heading h2 {
        max-width: 100%;
        padding-right: 32px;
    }

    .space-collage img {
        height: auto;
        aspect-ratio: 1.12 / 1;
    }

    .hero-stamp {
        padding: 5px;
        width: 112px;
        height: 112px;
    }

    .hero-content {
        right: 7%;
    }

    .hero h1 {
        font-size: clamp(36px, 9.4vw, 52px);
    }

    .hero-content .eyebrow {
        letter-spacing: .03em;
    }

    .news-journal a {
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 20px 12px;
        align-items: start;
    }

    .news-journal img {
        grid-column: 1 / -1;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 42px 14px 14px 14px;
    }

    .news-journal a > div {
        grid-column: 1;
        min-width: 0;
    }

    .news-journal .journal-arrow {
        grid-column: 2;
        align-self: center;
    }

    .gather-note > div {
        min-width: 150px;
    }
}

/* 繪製版 Banner：手機分開安排場景與文案，避免直幅裁切放大房屋。 */
@media (max-width: 760px) {
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
        background: #fff9ed;
        color: var(--ink);
    }

    .hero-image {
        top: 0;
        height: clamp(300px, 90vw, 420px);
        object-fit: cover;
        object-position: 90% center;
    }

    .hero::after {
        inset: 0 0 auto;
        height: clamp(300px, 90vw, 420px);
        background: linear-gradient(0deg, #fff9ed, transparent 24%);
    }

    .hero-content {
        position: relative;
        inset: auto;
        padding: calc(clamp(300px, 90vw, 420px) + 20px) 7% 75px;
    }

    .hero-content .eyebrow {
        color: var(--rust);
    }

    .hero h1 {
        text-shadow: none;
        margin: 16px 0 20px;
    }

    .hero h1 span {
        color: var(--rust);
    }

    .hero-link {
        color: #fff9ed;
        background: var(--rust);
        border-color: var(--rust);
    }

    .hero-stamp {
        top: calc(clamp(300px, 90vw, 420px) - 86px);
        bottom: auto;
        width: 95px;
        height: 95px;
    }

    .hero-scroll {
        color: var(--sage);
        bottom: 22px;
        max-width: none;
    }
}