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

/* Reference-inspired materials and typography; original page grids and spacing retained. */
:root {
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --ink: #030b09;
    --ink-2: #07120f;
    --ivory: #eee7da;
    --muted: #aebbb2;
    --copy-soft: #c7cfc7;
    --copper: #d88a56;
    --bronze: #a75e38;
    --line: rgba(177, 113, 72, .24);
    --metal: linear-gradient(125deg, #e0a174, #a75931 65%, #ca8050);
    --body-bg: #030b09;
    --nav-bg: rgba(3, 11, 9, .94);
    --card-bg: linear-gradient(145deg, #0b1913, #050e0b);
    --panel: rgba(8, 20, 15, .7);
    --panel-strong: #0a1711;
    --deep-surface: #050e0b;
    --ambient-one: radial-gradient(ellipse at 80% 12%, rgba(28, 55, 38, .13), transparent 45%);
    --ambient-two: none;
    --control-border-hover: #d88a56;
    --floating-bg: #07120f;
}
[data-theme="light"] {
    --ink: #f3efe5;
    --ink-2: #eae3d7;
    --ivory: #192823;
    --muted: #516058;
    --copy-soft: #36493f;
    --copper: #a4532d;
    --bronze: #96512f;
    --line: rgba(153, 88, 50, .25);
    --metal: linear-gradient(125deg, #dfa274, #ad6037 65%, #cd8656);
    --body-bg: #f3efe5;
    --nav-bg: rgba(243, 239, 229, .95);
    --card-bg: linear-gradient(145deg, #f6f2e9, #eae3d7);
    --panel: rgba(234, 227, 215, .7);
    --panel-strong: #eae3d7;
    --deep-surface: #eae3d7;
    --ambient-one: none;
    --ambient-two: none;
    --floating-bg: #f3efe5;
}
.hero h1 { font-weight: 500; font-size: clamp(3.5rem, 7vw, 6rem); }
.hero-line { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-content h2, .experience-heading h2, .judgement-title h2,
.technical-ground h2, .writing-heading h2, .article-page h1 { font-weight: 500; }
.hero-artwork { align-self: center; overflow: hidden; }
.hero-artwork img { display: block; width: 100%; height: auto; max-height: 650px; object-fit: contain; mask-image: radial-gradient(ellipse at 50% 50%, #000 38%, rgba(0,0,0,.92) 52%, rgba(0,0,0,.45) 66%, transparent 78%); }
.hero-artwork .artwork-light { display: none; }
[data-theme="light"] .hero-artwork .artwork-dark { display: none; }
[data-theme="light"] .hero-artwork .artwork-light { display: block; }
/* Low-contrast burnished copper, with a small inset arrow instead of a bright disc. */
.button-primary {
    border: 1px solid rgba(170, 112, 78, .45);
    background: linear-gradient(115deg, rgba(139, 87, 58, .16), rgba(88, 60, 44, .07));
    color: var(--ivory);
    box-shadow: inset 0 1px 0 rgba(216, 171, 132, .06);
    font-weight: 500;
}
.hero-actions .button-primary {
    gap: 12px;
    min-height: 48px;
    padding: 6px 21px 6px 7px;
    border-color: rgba(170, 112, 78, .45);
    overflow: hidden;
}
.button-disc {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(187, 132, 93, .3);
    background: linear-gradient(135deg, #80593f, #543c2e 65%, #694a35);
    color: #e3c5ab;
    font: 400 18px/1 var(--font-ui);
    box-shadow: inset 0 1px 0 rgba(243, 208, 170, .12);
}
.button-primary:hover { background: rgba(139, 87, 58, .2); border-color: rgba(187, 132, 93, .65); }
.hero-actions .button:hover { transform: none; }
.hero-actions .button-secondary {
    min-height: 44px;
    align-self: center;
    padding: 0 0 4px;
    margin-left: 10px;
    border: 0;
    border-bottom: 1px solid rgba(170, 112, 78, .35);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--copy-soft);
    font-weight: 400;
}
.hero-actions .button-secondary:hover { color: var(--ivory); border-color: var(--copper); }
[data-theme="light"] .button-disc {
    background: linear-gradient(135deg, #b28a6e, #8b654c);
    color: #fff4e7;
}
.pill-row span { border-color: var(--line); }
@media (max-width: 760px) {
    .hero-artwork img { max-height: 460px; }
}
/* Architectural imagery follows the existing four-card approach grid. */
.value-card { padding: 0 22px 26px; border-radius: 2px; }
.value-card-art { position: relative; margin: 0 -22px 24px; overflow: hidden; border-bottom: 1px solid var(--line); background: #030b09; }
.value-card-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .45s ease; }
.value-card-art .card-index { position: absolute; top: 13px; left: 14px; margin: 0; color: #fff0dc; padding: 5px 7px; background: rgba(3, 11, 9, .7); font-size: .7rem; }
.value-card:hover .value-card-art img { transform: scale(1.035); }
.value-card h3 { font-size: 1.55rem; line-height: 1.12; font-weight: 500; }
@media (max-width: 760px) { .value-card { padding: 0 22px 26px; } }
@media (prefers-reduced-motion: reduce) { .value-card-art img { transition: none; } .value-card:hover .value-card-art img { transform: none; } }


/* Quiet masthead, with navigation and utility controls clearly separated. */
.nav { gap: 36px; padding: 20px 0; align-items: center; }
.nav::before { bottom: 0; left: -24px; right: -24px; mask-image: none; -webkit-mask-image: none; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.brand { gap: 15px; }
.brand-monogram { font: 400 2.5rem/1 var(--font-display); letter-spacing: -.1em; color: var(--copper); }
.brand-name { font-size: 1.15rem; font-weight: 500; }
.nav-links { gap: 30px; font-family: var(--font-ui); font-size: .65rem; font-weight: 400; letter-spacing: .13em; }
.nav-links a { min-height: 44px; }
.nav-links a:not(:first-child):not(.nav-cta)::before { content: none; }
.nav-links a:hover { transform: none; }
.nav-links a.active::after { height: 1px; bottom: 6px; background: color-mix(in srgb, var(--copper) 65%, transparent); }
.nav-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-controls .nav-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 17px; margin: 0; border-radius: 24px; font: 400 .65rem/1 var(--font-ui); letter-spacing: .1em; }
.nav-cta span { color: var(--copper); font-size: 1rem; }
.nav-controls .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border-color: transparent; }
.nav-controls .theme-toggle:hover { border-color: var(--line); background: transparent; }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
@media(max-width:1000px) { .nav { gap: 22px; } .nav-links { gap: 18px; } .brand-name { display: none; } }
@media(max-width:740px) {
    .nav { display: grid; grid-template-columns: 1fr auto; width: calc(100% - 32px); padding: 14px 0 0; gap: 10px 16px; }
    .brand-name { display: inline; }
    .nav-controls { grid-column: 2; grid-row: 1; gap: 8px; }
    .nav-links { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; font-size: .6rem; padding-bottom: 4px; }
    .nav-controls .nav-cta { padding-inline: 12px; font-size: .6rem; }
}

/* Keep the back-to-top control legible against the light canvas. */
[data-theme="light"] {
    --floating-bg: #f3efe5;
    --floating-color: #784326;
    --floating-border: #a5795d;
    --floating-bg-hover: #784326;
    --floating-color-hover: #fff8ed;
}
[data-theme="light"] .floating-top:focus-visible {
    outline: 2px solid #784326;
    outline-offset: 4px;
}