@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
    color-scheme: light;
    --ink: #172a27;
    --muted: #687773;
    --paper: #f4f3ee;
    --accent: #d4a675;
    --line: #deded5;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.hero {
    position: relative;
    display: flex;
    min-height: min(690px, 86vh);
    align-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 82% 38%, rgba(95, 130, 112, .23), transparent 35%),
        linear-gradient(118deg, #142622 0%, #203a34 62%, #29433b 100%);
    color: #fff;
}
.hero::before,
.hero::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
.hero::before {
    top: -220px;
    right: -130px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(233, 194, 142, .15);
    border-radius: 50%;
    box-shadow: 0 0 0 52px rgba(233, 194, 142, .025), 0 0 0 104px rgba(233, 194, 142, .02);
}
.hero::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 130px;
    background: linear-gradient(transparent, rgba(6, 18, 16, .16));
}
.hero__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1120px);
    margin: 0 auto;
    padding: 72px 0 96px;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.eyebrow__line { width: 30px; height: 1px; background: currentColor; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(3.7rem, 9vw, 7.8rem);
    letter-spacing: -.055em;
    line-height: .98;
}
h1 em { color: #e9c28e; font-weight: 500; }
.hero__intro {
    max-width: 455px;
    margin: 28px 0 30px;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.8;
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.text-link span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}
.text-link:hover span, .text-link:focus-visible span { background: #fff; color: var(--ink); }
.hero__ornament {
    position: absolute;
    right: max(24px, calc((100vw - 1120px) / 2));
    bottom: 37px;
    z-index: 1;
    display: flex;
    gap: 21px;
    color: rgba(255, 255, 255, .58);
    font-size: .62rem;
    letter-spacing: .16em;
}
.hero__ornament span + span::before { padding-right: 21px; color: var(--accent); content: '·'; }
.hero__index {
    position: absolute;
    top: 50%;
    right: max(24px, calc((100vw - 1120px) / 2));
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    letter-spacing: .12em;
    writing-mode: vertical-rl;
}
.hero__index span { padding: 8px 0; color: var(--accent); }
.interests {
    width: min(100% - 48px, 1120px);
    margin: 0 auto;
    padding: 83px 0 94px;
}
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.eyebrow--dark { margin-bottom: 12px; color: #96704e; }
h2 { margin: 0; font-size: clamp(2.35rem, 5vw, 3.65rem); letter-spacing: -.045em; }
.section-heading__note {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.7;
    text-align: right;
}
.interest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}
.interest-card {
    position: relative;
    display: grid;
    min-height: 190px;
    grid-template-columns: 38px 54px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 16px;
    padding: 28px 20px 28px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: background .2s ease, padding .2s ease;
}
.interest-card:nth-child(odd) { margin-right: 18px; }
.interest-card:nth-child(even) { margin-left: 18px; padding-left: 20px; border-left: 1px solid var(--line); }
.interest-card:hover, .interest-card:focus-visible { padding-right: 14px; background: rgba(255, 255, 255, .5); }
.interest-card__number { align-self: start; padding-top: 8px; color: #9a9d91; font-size: .68rem; letter-spacing: .1em; }
.interest-card__symbol {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid #d8d7ce;
    border-radius: 50%;
    color: #96704e;
    font-family: var(--serif);
    font-size: 1.55rem;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.interest-card__logo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.interest-card:hover .interest-card__symbol, .interest-card:focus-visible .interest-card__symbol { border-color: var(--ink); background: var(--ink); color: #e9c28e; }
.interest-card__body { display: grid; gap: 7px; }
.interest-card__title { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -.02em; }
.interest-card__description { color: var(--muted); font-size: .77rem; line-height: 1.6; }
.interest-card__status { align-self: end; padding-bottom: 2px; color: #927b61; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.interest-card--featured .interest-card__status { color: #38705d; }
.interest-card__arrow { align-self: start; color: #8b938a; font-size: 1rem; transition: transform .2s ease, color .2s ease; }
.interest-card:hover .interest-card__arrow, .interest-card:focus-visible .interest-card__arrow { transform: translate(2px, -2px); color: var(--ink); }
.footer {
    display: flex;
    width: min(100% - 48px, 1120px);
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding: 22px 0 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .04em;
}
.footer__dot { padding-left: 5px; color: #b89066; font-size: .55rem; }
.coming-soon {
    display: grid;
    min-height: 100svh;
    grid-template-rows: auto 1fr auto;
    background: radial-gradient(ellipse at 80% 28%, rgba(95, 130, 112, .22), transparent 34%), linear-gradient(125deg, #142622, #29433b);
    color: #fff;
}
.coming-soon__top, .coming-soon__bottom {
    display: flex;
    width: min(100% - 48px, 1120px);
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
}
.coming-soon__top { padding: 28px 0; }
.brand { color: rgba(255, 255, 255, .84); font-family: var(--serif); font-size: 1rem; text-decoration: none; }
.home-link { color: rgba(255, 255, 255, .74); font-size: .76rem; text-decoration: none; }
.home-link:hover, .home-link:focus-visible { color: #fff; }
.coming-soon__content {
    width: min(100% - 48px, 1120px);
    align-self: center;
    margin: 0 auto;
    padding: 90px 0;
}
.coming-soon__content h1 { max-width: 820px; font-size: clamp(3.6rem, 8vw, 7rem); }
.coming-soon__content h1 em { color: #e9c28e; }
.coming-soon__intro { max-width: 500px; margin: 27px 0 38px; color: rgba(255, 255, 255, .75); font-size: 1rem; line-height: 1.8; }
.photo-project {
    position: relative;
    display: grid;
    max-width: 620px;
    gap: 8px;
    padding: 23px 56px 24px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .045);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.photo-project:hover, .photo-project:focus-visible { border-color: rgba(233, 194, 142, .7); background: rgba(255, 255, 255, .09); }
.photo-project__eyebrow { color: #e9c28e; font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.photo-project__title { font-family: var(--serif); font-size: 1.55rem; }
.photo-project__description { color: rgba(255, 255, 255, .68); font-size: .78rem; line-height: 1.6; }
.photo-project__arrow { position: absolute; top: 22px; right: 23px; color: #e9c28e; font-size: 1.2rem; transition: transform .2s ease; }
.photo-project:hover .photo-project__arrow, .photo-project:focus-visible .photo-project__arrow { transform: translate(2px, -2px); }
.coming-soon__bottom { padding: 21px 0 26px; border-top: 1px solid rgba(255, 255, 255, .17); color: rgba(255, 255, 255, .58); font-size: .68rem; letter-spacing: .05em; }

@media (max-width: 900px) {
    .interest-grid { grid-template-columns: 1fr; }
    .interest-card:nth-child(odd), .interest-card:nth-child(even) { margin: 0; padding-left: 4px; border-left: 0; }
    .interest-card__title { font-size: 1.45rem; }
}
@media (max-width: 600px) {
    .hero { min-height: 670px; min-height: min(700px, 88svh); }
    .hero__inner, .interests, .footer, .coming-soon__top, .coming-soon__bottom, .coming-soon__content { width: min(100% - 36px, 1120px); }
    .hero__inner { padding: 64px 0 90px; }
    .hero__index { display: none; }
    .hero__ornament { right: 18px; bottom: 24px; gap: 11px; font-size: .53rem; }
    .hero__ornament span + span::before { padding-right: 11px; }
    .interests { padding: 62px 0 70px; }
    .section-heading { display: block; }
    .section-heading__note { margin-top: 12px; text-align: left; }
    .interest-card { min-height: 168px; grid-template-columns: 26px 42px minmax(0, 1fr) 16px; gap: 12px; padding: 24px 2px; }
    .interest-card:nth-child(odd), .interest-card:nth-child(even) { padding-left: 2px; }
    .interest-card__symbol { width: 40px; height: 40px; font-size: 1.3rem; }
    .interest-card__body { gap: 5px; }
    .interest-card__title { font-size: 1.2rem; }
    .interest-card__description { max-width: 240px; font-size: .72rem; }
    .interest-card__status { grid-column: 3; grid-row: 2; justify-self: start; font-size: .57rem; }
    .interest-card__arrow { grid-column: 4; grid-row: 1; }
    .footer { font-size: .64rem; }
    .coming-soon__top, .coming-soon__bottom { width: min(100% - 36px, 1120px); }
    .coming-soon__content { width: min(100% - 36px, 1120px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}