/*
 * UI added after the port (project navigation, photo viewer, counts, contact and map links,
 * captions), drawn in the site's own vocabulary: Basier Square / Spoqa Han Sans Neo, black and grey, thin rules.
 */

/* Latin text in Basier Square everywhere, including text that had no font of its own (Bootstrap's default);
   Hangul falls through to Spoqa Han Sans Neo. */

body {
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
}

/* The menu: the Korean words at 15px (14px on phones). The 7seasonsgarden wordmark keeps the old 17px
   (15px) it was sized against, since its height is set in em. */

#navBar a {
    font-size: 15px;
}

#navBar a:has(.navWordmark) {
    font-size: 17px;
}

@media only screen and (max-width: 768px) {
    #navBar a {
        font-size: 14px;
    }

    #navBar a:has(.navWordmark) {
        font-size: 15px;
    }
}

/* Menu items without the old box's padding and border, so the text lines up with the logo; the gaps
   between items are margins. */

#navBar a {
    padding: 5px 0;
    border: 0;
    margin: 0 0 0 20px;
}

#navBar a:first-child {
    margin-left: 0;
}

@media (max-width: 991px) {
    #navBar a {
        margin: 0 28px 0 0;
    }
}

/* The current page's menu item: no box, just light grey text. */

#navBar .active,
#navBar .active:hover {
    background-color: transparent;
    /* No border at all: the old box's 2px made the current item 4px wider and nudged its neighbours. */
    border: 0;
    color: #b3b3b3;
}

/* No box on click or tap: no focus ring for mouse and touch, no grey tap highlight on phones.
   Keyboard focus still shows, as an underline. */
#navBar a,
.navToggle,
#postList a,
.seasonstitle a {
    -webkit-tap-highlight-color: transparent;
}

#navBar a:focus,
#postList a:focus,
.seasonstitle a:focus {
    outline: none;
}

#navBar a:focus-visible,
#postList a:focus-visible,
.seasonstitle a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Type, a step smaller across the site (originally 18–20px headings and body, 16px tables). */

.title,
.seasonstitle {
    font-size: 16px;
}

#postDetailTitle {
    font-size: 17px;
}

.subtitle,
.text,
.accordion,
.panel,
#postList a {
    font-size: 15px;
}

#postTitle a,
.tableBold,
.tableLight,
#detailText,
.postNav {
    font-size: 14px;
}

.mapLinks {
    font-size: 13px;
}

@media only screen and (max-width: 768px) {
    .title,
    .seasonstitle,
    .text,
    .accordion,
    .panel,
    #postList a {
        font-size: 14px;
    }

    #postDetailTitle {
        font-size: 16px;
    }

    #postTitle a,
    #detailText {
        font-size: 13px;
    }

    .tableBold,
    .tableLight {
        font-size: 12px;
    }
}

/* Keep the scrollbar's space on every page so short pages (no scrollbar) don't shift the centred
   layout sideways compared with long ones. */

html {
    scrollbar-gutter: stable;
}

/* Project page: category row links back to its list */

.postCategory,
.postCategory:hover {
    color: inherit;
    text-decoration: none;
}

.postCategory {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    transition: border-color 0.25s ease;
}

.postCategory:hover {
    border-bottom-color: black;
}

/* Project page: ← previous · list · next → */

.postNav {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-top: 40px;
    padding: 24px 0 60px;
    border-top: 2px solid black;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-weight: 500;
}

.postNavPrev,
.postNavNext {
    flex: 1 1 0;
    min-width: 0;
}

.postNavNext {
    text-align: right;
}

.postNav a,
.postNav a:hover {
    color: black;
    text-decoration: none;
}

.postNav a {
    display: inline-flex;
    gap: 10px;
    max-width: 100%;
    transition: opacity 0.25s ease;
}

.postNav a:hover {
    opacity: 0.55;
}

.postNavTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media only screen and (max-width: 768px) {
    .postNavTitle {
        display: none;
    }

    .postNav {
        padding-bottom: 40px;
    }
}

/* Project page: photo viewer (components/Lightbox.tsx) */

img.zoomable {
    cursor: zoom-in;
}

html:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: rgba(240, 240, 240, 0.97);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: flosys-lightbox-in 0.2s ease-out;
}

.lightbox::backdrop {
    background: transparent;
}

.lightboxImg {
    max-width: 94vw;
    max-height: 86dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    animation: flosys-lightbox-in 0.25s ease-out;
}

.lightboxClose,
.lightboxPrev,
.lightboxNext {
    position: fixed;
    padding: 16px 20px;
    border: 0;
    background: none;
    color: black;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 28px;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.lightboxClose:hover,
.lightboxPrev:hover,
.lightboxNext:hover {
    opacity: 1;
}

.lightboxClose {
    top: 8px;
    right: 8px;
    font-size: 24px;
}

.lightboxPrev {
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

.lightboxNext {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.lightboxCount {
    position: fixed;
    right: 0;
    bottom: 16px;
    left: 0;
    margin: 0;
    color: grey;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 14px;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    .lightboxPrev,
    .lightboxNext {
        display: none;
    }
}

@keyframes flosys-lightbox-in {
    from {
        opacity: 0;
    }
}

/* Project list: how many projects each category holds */

.postListCount {
    margin-left: 3px;
    font-size: 0.65em;
    vertical-align: super;
    opacity: 0.7;
}

/* On phones the category bar is one line that scrolls sideways instead of wrapping. */
@media only screen and (max-width: 768px) {
    #postList {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, black 88%, transparent);
        mask-image: linear-gradient(to right, black 88%, transparent);
    }

    #postList::-webkit-scrollbar {
        display: none;
    }
}

/* About: phone and email are links; map links under the map */

.contactLink,
.contactLink:hover {
    color: inherit;
    text-decoration: none;
}

.contactLink {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    transition: border-color 0.25s ease;
}

.contactLink:hover {
    border-bottom-color: black;
}

.mapLinks {
    padding-top: 12px;
    color: grey;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    text-align: right;
}

.mapLinks a,
.mapLinks a:hover {
    text-decoration: none;
}

.mapLinks a {
    color: grey;
    transition: color 0.25s ease;
}

.mapLinks a:hover {
    color: black;
}

/* 7seasonsgarden archive: optional caption under a photo */

.archiveCaption {
    margin: 0;
    padding-top: 8px;
    color: grey;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 14px;
    /* #archiveImg sets line-height: 0 (quirks-compat.css) */
    line-height: 1.5;
}

/* Home: the garden scene (components/GardenScene.tsx) near the foot of the first screen. Wide screens get
   the whole bed across the page (1000 × 360); phones get one plant, large, reaching up to mid-screen.
   The plants are drawn in stroke by stroke from the ground, then sway gently. */

#garden,
#gardenSolo {
    position: relative;
    /* Nothing pokes out sideways into a horizontal scrollbar; tall plants may still sway above. */
    overflow-x: clip;
}

#garden {
    /* Push the scene down so its bottom sits near the bottom of the first screen. */
    margin-top: max(24px, calc(100svh - 172px - 32.4vw));
    aspect-ratio: 1000 / 360;
}

#gardenSolo {
    display: none;
}

@media only screen and (max-width: 768px) {
    #garden {
        display: none;
    }

    #gardenSolo {
        display: block;
        height: min(56svh, 135vw);
        margin-top: max(24px, calc(100svh - 143px - min(56svh, 135vw)));
    }
}

.gardenPlant.centered {
    left: 50%;
    max-width: 100%;
    translate: -50% 0;
}

.gardenPlant {
    position: absolute;
    bottom: 0;
    width: auto;
    overflow: visible;
    transform-origin: 50% 100%;
    animation: ssg-sway var(--sway) ease-in-out var(--sway-delay) infinite;
}

/* Mask strokes: each one runs along a brush stroke's outline from its foot, both ways at once, until
   the two ends meet at the tip (pathLength 2: dash t, gap 2-2t, dash t). */
.gardenTrace {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-dasharray: 0 2 0;
    animation: ssg-trace var(--trace) cubic-bezier(0.45, 0.05, 0.4, 1) var(--delay) forwards;
}

@keyframes ssg-trace {
    to {
        stroke-dasharray: 1 0 1;
    }
}

/* Uses `rotate`, so a plant can sway without touching any transform. */
@keyframes ssg-sway {
    0%,
    100% {
        rotate: 0deg;
    }
    30% {
        rotate: -1.2deg;
    }
    70% {
        rotate: 1deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gardenPlant {
        animation: none;
    }

    .gardenTrace {
        animation: none;
        stroke-dasharray: 1 0 1;
    }
}

/* About: Kakao map (components/KakaoMap.tsx) fills the bordered #map box; its address card under the
   map is dropped, since the address is already in the footer and the links sit below. */

#map {
    border: 0;
    /* Kakao's controls carry high z-indexes; keep them below the sticky header. */
    isolation: isolate;
    /* In the site's black and grey, like the FAQ diagram. */
    filter: grayscale(1);
}

/* Kakao's own frame around the map. */
#map .map_border {
    display: none;
}

#map .root_daum_roughmap {
    width: 100%;
}

#map .root_daum_roughmap .cont {
    display: none;
}

/* Footer (components/Footer.tsx), centred like the header: the logo, the three
   Instagram accounts side by side with what each is for, then contact details on one line and the
   copyright. Phones stack the accounts and break the contact line. */

.siteFooter {
    position: relative;
    margin-top: 96px;
    padding: 44px 0 36px;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: black;
    text-align: center;
}


.siteFooterLogo {
    display: block;
    width: auto;
    height: 40px;
    margin: 0 auto;
}

.siteFooterSns {
    display: flex;
    justify-content: center;
    gap: 56px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.siteFooterSns a {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.siteFooterHandle {
    font-size: 13px;
}

.siteFooterWhat {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.siteFooterContact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    margin: 28px 0 0;
}

.siteFooter a,
.siteFooter a:hover {
    color: inherit;
    text-decoration: none;
}

.siteFooter a {
    transition: opacity 0.25s ease;
}

.siteFooter a:hover {
    opacity: 0.55;
}

.siteFooterCredit {
    margin: 22px 0 0;
    font-size: 11px;
    letter-spacing: 0.04em;
}

@media only screen and (max-width: 768px) {
    .siteFooter {
        margin-top: 72px;
        padding: 36px 0 28px;
    }


    .siteFooterLogo {
        height: 36px;
    }

    .siteFooterSns {
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
    }

    .siteFooterContact {
        flex-direction: column;
        gap: 2px;
        margin-top: 24px;
    }

    .siteFooterContact span[aria-hidden] {
        display: none;
    }
}

/* FAQ: the questions right under the process steps (no heading in between). */


.faqList #accordion-wrapper {
    padding-top: 36px;
}

.faqList > div:first-child #accordion-wrapper {
    padding-top: 8px;
}

@media only screen and (max-width: 768px) {
    .faqList #accordion-wrapper {
        padding-top: 20px;
    }

    .faqList > div:first-child #accordion-wrapper {
        padding-top: 24px;
    }
}

/* Project list: the invisible marker that loads the next batch of thumbnails as it scrolls into view. */

.loadMoreSentinel {
    height: 1px;
}

/* FAQ answers: no box. Question on a 1px rule with a +/− at the right; the answer sits flush under it,
   aligned to the question's left edge. */

.faqList .accordion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid black;
    transition: opacity 0.2s ease;
}

.faqList .accordion::after {
    content: '+';
    flex: none;
    font-weight: 400;
}

.faqList .accordion.active::after {
    content: '−';
}

.faqList .accordion:hover {
    border-bottom: 1px solid black;
    opacity: 0.6;
}

.faqList .panel {
    margin: 0;
    padding: 16px 0 4px;
    border: 0;
    background-color: transparent;
    /* Bootstrap's own .panel adds a faint shadow. */
    box-shadow: none;
    line-height: 1.8;
}

.faqList .panel p {
    max-width: 40em;
    margin: 0;
}

/* Phones: logo and a burger button on one row; the menu opens as a full-screen sheet (SiteBody.tsx). */

.navToggle {
    display: none;
}

@media only screen and (max-width: 768px) {
    .page-header {
        top: -24px;
    }

    #logo {
        position: relative;
        z-index: 2;
        padding-bottom: 20px;
    }

    .navToggle {
        position: absolute;
        /* Centred on the 20px logo, which starts 40px down. */
        top: 28px;
        right: max(0px, calc(5vw - 10px));
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        border: 0;
        background: none;
        cursor: pointer;
    }

    /* Some mobile browsers ring the button after a tap; the icon itself shows the state. */
    .navToggle:focus {
        outline: none;
    }

    .navToggle span {
        display: block;
        height: 1px;
        background: black;
        transition: transform 0.25s ease;
    }

    .navToggle[aria-expanded='true'] span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .navToggle[aria-expanded='true'] span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    #navBar {
        display: none;
    }

    /* The header clips its children to its own band; let the open sheet cover the screen. */
    .page-header:has(#navBar.open) {
        clip-path: none;
    }

    html:has(#navBar.open) {
        overflow: hidden;
    }

    #navBar.open {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 140px 5vw 40px;
        background-color: #f0f0f0;
        animation: flosys-lightbox-in 0.2s ease-out;
    }

    #navBar.open a[href] {
        margin: 0;
        padding: 6px 0;
        border: 0;
        font-size: 18px;
        line-height: 1.3;
    }

    #navBar.open a:has(.navWordmark) {
        font-size: 20px;
    }

    /* The "|" between the main pages and 7seasonsgarden becomes a gap. */
    #navBar.open a:not([href]) {
        display: block;
        height: 16px;
        padding: 0;
        border: 0;
        font-size: 0;
    }
}

/* One content column on every page: pages (contact, inquiry, 7seasonsgarden) now match project pages at 60vw
   (90vw, the full column, on phones). */

.pageWrapper {
    width: 60vw;
}

@media only screen and (max-width: 768px) {
    .pageWrapper {
        width: 90vw;
    }
}

/* Contact: no page heading (the menu already says it); the text starts where page titles used to. */

.pageWrapper > .text:first-child {
    padding-top: 56px;
}

@media only screen and (max-width: 768px) {
    .pageWrapper > .text:first-child {
        padding-top: 24px;
    }
}

/* 7seasonsgarden: the garden film (was a GIF) */

.gardenVideo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 337;
    background-color: #e4e4e4;
}

/* Project page: title and facts on the left, the description on the right; stacked on phones. */

.postInfo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    padding: 28px 0 56px;
}

.postInfo #postDetailTitle {
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    font-size: 20px;
    line-height: 1.4;
}

.postInfo .tableLight {
    width: auto;
}

.postInfo .tableBold {
    width: 88px;
}

.postInfo #detailText {
    width: auto;
    margin: 0;
    padding: 0;
    line-height: 1.8;
}

@media only screen and (max-width: 768px) {
    .postInfo {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 16px 0 32px;
    }

    .postInfo #postDetailTitle {
        font-size: 17px;
    }
}

/* An old footer rule (td a { font-size: medium }) otherwise enlarges the category link in the table. */
.postInfo td a {
    font-size: inherit;
}

/* Header with the centred "seven seasons / Garden" lockup: logo in the middle, the menu centred under it
   (tablet and desktop). Phones keep the burger, with the logo centred on its row. */

@media (min-width: 769px) {
    .page-header .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .page-header #logo,
    .page-header #navBar {
        float: none;
        flex: none;
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .page-header #logo {
        padding-bottom: 14px;
    }

    .page-header #logo img {
        width: auto;
        height: 60px;
    }

    #navBar {
        text-align: center;
    }

    #navBar a,
    #navBar a:first-child {
        margin: 0 11px;
    }

    /* Scrolling, the logo goes away and the menu row stays, 10px from the top. */
    .page-header {
        top: -104px;
    }
}

@media only screen and (max-width: 768px) {
    .page-header #logo {
        text-align: center;
    }

    .page-header #logo img {
        width: auto;
        max-width: 64vw;
        height: 50px;
    }

    /* Lined up with the big "seven seasons" line (the top ~40% of the 50px logo, 40px down), not the
       middle of the whole logo, which would sit it visually low. */
    .navToggle {
        top: 28px;
    }
}

/* The 7seasonsgarden menu item is the seven seasons wordmark, sized to sit with the menu text: its
   letters are all lowercase, so its height is matched to the text's x-height plus a little. */

#navBar .navWordmark {
    display: inline-block;
    width: auto;
    height: 0.62em;
    vertical-align: baseline;
    transition: opacity 0.25s ease;
}

#navBar .active .navWordmark {
    opacity: 0.3;
}

/* In the phone menu the wordmark reads larger than the 20px words around it; bring it down to their size. */
@media only screen and (max-width: 768px) {
    #navBar.open .navWordmark {
        height: 0.6em;
    }
}

/* Project list: the category bar centred under the centred header (phones keep their sideways scroll). */
@media (min-width: 769px) {
    #postList {
        text-align: center;
    }
}

/* FAQ: how a project starts, as five steps (icon, title, text). In a row with dashed links between them
   on wide screens; two, two and one on phones. */

.faqSteps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 24px 0 40px;
    padding: 0;
    list-style: none;
    text-align: center;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
}

.faqSteps li {
    position: relative;
    padding: 0 6px;
    /* Korean wraps between words, never mid-word ("현장답 / 사"). */
    word-break: keep-all;
}

/* The dashed link to the next step, level with the middle of the icons. */
.faqSteps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 47px;
    right: -10%;
    width: 20%;
    border-top: 1px dashed black;
}

.faqSteps img {
    display: block;
    width: auto;
    height: 94px;
    margin: 0 auto;
    filter: grayscale(1);
}

.faqSteps h3 {
    margin: 18px 0 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.faqSteps p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.faqSteps p span {
    display: block;
}

@media only screen and (max-width: 768px) {
    .faqSteps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
        margin: 28px 0 32px;
    }

    .faqSteps li:last-child {
        grid-column: 1 / -1;
    }

    .faqSteps li::after {
        display: none;
    }

    .faqSteps img {
        height: 84px;
    }
}

/* Page changes: the header swaps instantly instead of crossfading its old and new snapshots. On phones
   the old one still held the open menu sheet, so the logo appeared to blink and jump as the sheet
   shrank back into the header. Page content keeps its fade (motion.css). */
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
}

::view-transition-old(site-header) {
    display: none;
}

/* Contact page: phone, email and address in three columns with small labels; the map; then "About" as
   a label beside the introduction and the team (role and name in two columns). One column on phones. */

.contactPage {
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
}

.contactInfo {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.6fr;
    gap: 24px;
    margin: 0;
    padding: 56px 0 28px;
}

.contactInfo dt,
.contactAbout h2 {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contactInfo dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.contactAbout {
    max-width: 620px;
}

.contactAbout p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.contactTeam {
    margin: 28px 0 0;
}

.contactTeam div {
    display: grid;
    grid-template-columns: 150px auto;
    padding: 3px 0;
    font-size: 15px;
    line-height: 1.6;
}

.contactTeam dt {
    font-weight: 400;
}

.contactTeam dd {
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .contactInfo {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 0 24px;
    }

    .contactInfo dd,
    .contactAbout p,
    .contactTeam div {
        font-size: 14px;
    }



    .contactTeam div {
        grid-template-columns: 130px auto;
    }
}

/* Photo grid (components/PhotoGrid.tsx: project pages, 7seasonsgarden work in progress): two columns. Landscape photos
   span both columns; portrait and square ones pair up at one 3:4 crop so each row lines up. Gaps fill
   in where a portrait would otherwise sit alone. */

.photoGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 14px;
    margin-top: 8px;
}

.photoItem {
    margin: 0;
    line-height: 0;
}

.photoItem.wide,
.photoItem.solo {
    grid-column: 1 / -1;
}

.photoItem img {
    display: block;
    width: 100%;
    height: auto;
}

.photoItem:not(.wide) img {
    /* SanityImg sets the photo's own ratio inline. */
    aspect-ratio: 3 / 4 !important;
    object-fit: cover;
}

.photoItem.solo img,
.photoItem.half img {
    aspect-ratio: 3 / 2 !important;
}

@media only screen and (max-width: 768px) {
    .photoGrid {
        gap: 8px;
    }
}

/* FAQ list as a narrow centred column of rows: question, then its answer, then a 1px rule closing the
   row. Questions and answers share the left edge and the width. */

.faqList {
    max-width: 680px;
    margin: 0 auto;
}

.faqList #accordion-wrapper,
.faqList > div:first-child #accordion-wrapper {
    padding: 0;
    border-bottom: 1px solid black;
}

.faqList .accordion,
.faqList .accordion:hover {
    padding: 20px 0;
    border-bottom: 0;
}

.faqList .panel {
    padding: 0 0 24px;
}

.faqList .panel p {
    max-width: none;
}

@media only screen and (max-width: 768px) {
    .faqList #accordion-wrapper,
    .faqList > div:first-child #accordion-wrapper {
        padding: 0;
    }

    .faqList .accordion,
    .faqList .accordion:hover {
        padding: 16px 0;
    }

    .faqList .panel {
        padding-bottom: 20px;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Studio pass: one set of rules for things that play the same part on different pages.
   - Grid: content edges are the header's (5vw); text pages use the centred 60vw column.
   - Labels: small regular type, as in the footer and contact page; values one step larger.
   - Tabs: the category bar's look (grey, the current one black) wherever a page has sub-sections.
   - Reading measure: running text stops at about 40em.
   --------------------------------------------------------------------------------------------------- */

/* Project list: a fluid grid edge to edge with the header, captions as "title — category". */
.projectGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 20px;
    padding-top: 24px;
}

.projectCard,
.projectCard:hover {
    display: block;
    color: black;
    text-decoration: none;
}

.projectCard img {
    display: block;
    width: 100%;
    height: auto;
    /* One crop for every thumbnail (SanityImg sets each photo's own ratio inline). */
    aspect-ratio: 3 / 2 !important;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.projectCard:hover img {
    opacity: 0.85;
}

.projectCaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 12px;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    word-break: keep-all;
}

.projectTitle {
    font-size: 14px;
}

.projectCategory {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.04em;
}

@media (max-width: 991px) {
    .projectGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 768px) {
    .projectGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 16px;
    }

    .projectTitle {
        font-size: 13px;
    }
}

/* Project page: a bigger title; the facts as label + value like the contact page, not heavy bold. */
.postInfo #postDetailTitle {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 500;
}

.postInfo .tableBold,
.postInfo .tableBold p {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.postInfo .tableLight,
.postInfo .tableLight p {
    font-size: 14px;
    font-weight: 400;
}

.postInfo td p {
    margin: 0;
    padding: 4px 0;
}

.postInfo #detailText {
    max-width: 40em;
}

@media only screen and (max-width: 768px) {
    .postInfo #postDetailTitle {
        font-size: 19px;
    }
}

/* 7seasonsgarden tabs in the category bar's style: no divider, grey, the current one black. */
.seasonstitle {
    padding: 24px 0 28px;
    font-size: 15px;
    font-weight: 400;
}

.seasonstitle a {
    padding: 0;
    margin: 0 14px;
}

#seasonsBar {
    display: none;
}

#seasonsArchive {
    padding-right: 0;
}

.seasonstitle a.active {
    color: black;
}

@media only screen and (max-width: 768px) {
    .seasonstitle {
        padding: 8px 0 20px;
        font-size: 14px;
    }
}

/* Running text on the 7seasonsgarden page stops at a readable measure, from the image's left edge. */
.pageWrapper > .text p {
    max-width: 40em;
}


/* Inquiry page: three sections (Process, Contact, FAQ) on the one 60vw column, each opened by a small
   label on a hairline, the same label as the contact page and footer. Everything shares the left edge. */

.pageSection + .pageSection {
    margin-top: 72px;
}

.sectionLabel {
    margin: 0 0 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inquiryPage .faqSteps {
    margin: 0;
}

.inquiryPage .contactInfo {
    grid-template-columns: 1fr 1.2fr 1.6fr;
    padding: 0;
}

.inquiryPage .faqList {
    max-width: none;
}

/* The list's first question sits right under the section rule. */
.inquiryPage .faqList > div:first-child .accordion {
    padding-top: 0;
}

.inquiryPage .faqList .panel p {
    max-width: 40em;
}

.inquiryPage {
    padding-top: 40px;
}

@media only screen and (max-width: 768px) {
    .pageSection + .pageSection {
        margin-top: 52px;
    }

    .sectionLabel {
        margin-bottom: 22px;
    }

    .inquiryPage {
        padding-top: 20px;
    }

    .inquiryPage .contactInfo {
        grid-template-columns: 1fr;
    }
}

/* Contact page: the map opens the page; the labelled sections follow. */
.contactPage {
    padding-top: 40px;
}

.contactPage .mapLinks {
    margin-bottom: 0;
}

.contactPage .pageSection:first-of-type {
    margin-top: 56px;
}

.contactPage .contactInfo {
    padding: 0;
}

@media only screen and (max-width: 768px) {
    .contactPage {
        padding-top: 20px;
    }

    .contactPage .pageSection:first-of-type {
        margin-top: 40px;
    }
}

.contactPage #map {
    height: 360px;
}

/* 7seasonsgarden pages in the same scheme: tabs, the film or photos, then labelled sections. */
.sectionText {
    max-width: 620px;
}

.sectionText p {
    margin: 0;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.sectionText p + p {
    margin-top: 1em;
}

.seasonsPage .gardenVideo + .pageSection,
.seasonsPage > div:has(.gardenVideo) + .pageSection {
    margin-top: 56px;
}

/* On the work-in-progress page the label opens the content right under the tabs. */
.seasonsPage .seasonstitle + .pageSection {
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    .sectionText p {
        font-size: 14px;
    }

    .seasonsPage > div:has(.gardenVideo) + .pageSection {
        margin-top: 40px;
    }
}

/* 소식 (news): articles about the garden as cards (cover, source · date, title) in the page column,
   three across, two on tablets, one on phones. Each opens the original article. */

.newsPage {
    padding-top: 40px;
}

.newsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.newsCard,
.newsCard:hover {
    display: block;
    color: black;
    text-decoration: none;
}

.newsCard img,
.newsNoImage {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.newsNoImage {
    background-color: #e4e4e4;
}

.newsCard:hover img {
    opacity: 0.85;
}

.newsMeta {
    display: block;
    padding-top: 12px;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.newsTitle {
    display: block;
    padding-top: 6px;
    font-family: 'Basier Square', 'Spoqa Han Sans Neo', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
}

@media (max-width: 991px) {
    .newsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 768px) {
    .newsPage {
        padding-top: 20px;
    }

    .newsGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}