* { box-sizing: border-box; }
:root { color-scheme: light; background: #edece8; color: #20211e; font-family: system-ui, sans-serif; }
body { margin: 0; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
main { max-width: 720px; margin-inline: auto; background: #f9f8f5; border: 1px solid #d8d6cf; box-shadow: 0 24px 72px #20211e12; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: #181917; color: #fff; padding: clamp(24px, 5vw, 44px); min-height: clamp(250px, 49vw, 365px); display: flex; flex-direction: column; justify-content: space-between; gap: 52px; }
.drawing { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .23; mask-image: linear-gradient(110deg, transparent 20%, #000 80%); }
.drawing svg { display: block; width: 100%; height: 100%; stroke: #d7c8ad; }
.eyebrow { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.hero-label { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: #ded8cd; border-bottom: 1px solid #ffffff30; padding-bottom: 14px; }
.identity { animation: reveal .55s ease-out both; }
h1 { margin: 0; }
/* Adjust the image frame here. The image keeps its original proportions. */
.hero-image-frame {
  --frame-width: clamp(240px, 60vw, 440px);
  --frame-ratio: 3 / 1;
  width: min(100%, var(--frame-width));
  aspect-ratio: var(--frame-ratio);
  border: 1px solid #ffffff30;
}
.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tagline { margin: 1.45rem 0 0; color: #e0dad1; font: italic clamp(1.05rem, 3vw, 1.35rem) Georgia, serif; }
nav { padding: clamp(22px, 5vw, 44px); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-heading .eyebrow { color: #5f5b50; text-align: right; }
h2 { margin: 0; font: normal clamp(1.3rem, 4vw, 1.8rem) Georgia, serif; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 69px; padding: 10px 14px; border: 1px solid #d9d6ce; text-decoration: none; color: inherit; background: #fff; transition: background .18s, border-color .18s; }
.card.featured { background: #efebe2; border-color: #c8beaa; }
.card strong, .card small { display: block; }
.card strong { font-size: .94rem; }
.card small { color: #5b584f; font-size: .76rem; margin-top: 2px; }
.icon { width: 22px; height: 22px; justify-self: center; }
.arrow { font-size: 1.12rem; transition: transform .18s; }
.card:focus-visible { outline: 2px solid #38382e; outline-offset: 3px; }
@media (hover: hover) {
  .card:hover { background: #eae4d8; border-color: #9e917a; }
  .card:hover .arrow { transform: translate(2px, -2px); }
}
.card:active { background: #ded6c7; }
footer { padding: 16px clamp(22px, 5vw, 44px); border-top: 1px solid #d9d6ce; color: #56534a; font-size: .75rem; }
footer small { font-size: inherit; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }