:root {
  color-scheme: light;
  --ink: #261927;
  --muted: #645563;
  --plum: #281a2a;
  --wine: #713758;
  --gold: #f2cc96;
  --paper: #fcf7f1;
  --rule: #e6d5d1;
  font: 17px/1.67 system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: var(--wine); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #b57c37; outline-offset: 4px; border-radius: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, .brand { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
p { margin: .65rem 0 1rem; }
.wrap { width: min(100% - 3.5rem, 68rem); margin-inline: auto; }
.skip { position: fixed; top: .7rem; left: .7rem; z-index: 2; padding: .5rem 1rem; background: var(--paper); transform: translateY(-200%); }
.skip:focus { transform: none; }

.masthead {
  color: #fff6e9;
  background: radial-gradient(ellipse at 85% 66%, #61334b 0%, #352137 42%, #211522 80%);
  border-bottom: 1px solid #8e6471;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid #ffffff25; }
.brand { font-size: 1.15rem; color: var(--gold); text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 3vw, 1.7rem); }
.topbar nav a { color: #fff0df; font-size: .85rem; text-decoration: none; }
.topbar nav a:hover { text-decoration: underline; }

.hero { display: grid; grid-template-columns: 1.14fr 1fr; align-items: center; gap: clamp(1.5rem, 6vw, 5rem); padding-block: clamp(2.7rem, 7vw, 5.4rem); }
.hero-copy { max-width: 33rem; }
h1 { font-size: clamp(3.1rem, 7.4vw, 6.15rem); line-height: .98; letter-spacing: -.055em; margin: 0 0 1.15rem; }
.hero-copy > p { color: #ead8df; max-width: 33rem; }
.hero-copy .date { display: inline-block; margin: .55rem 0 0; padding-top: .55rem; color: var(--gold); font-size: .82rem; border-top: 1px solid #d3a77c74; }
.hero-art { position: relative; margin: 0; padding: .4rem; border: 1px solid #ebbf895f; border-radius: 1rem; box-shadow: 0 1.2rem 3rem #100c17a0; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1.48; object-fit: cover; object-position: center 10%; border-radius: .65rem; }

.layout { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(0, 2.3fr); gap: clamp(1.5rem, 6vw, 5.3rem); padding-block: clamp(2.3rem, 7vw, 5rem); }
.contents nav { position: sticky; top: 2rem; padding: .25rem 0 .25rem 1.15rem; border-left: 1px solid #c7a5ae; }
.contents nav p { margin: 0 0 .65rem; color: var(--ink); font-weight: 650; font-size: .78rem; }
.contents nav a { display: block; margin: .48rem 0; font-size: .84rem; line-height: 1.48; }
.policy { max-width: 48rem; }
.intro { margin: 0 0 2rem; padding: 0 0 1.55rem; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
section { scroll-margin-top: 1.3rem; padding-block: .2rem 1rem; }
section + section { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
h2 { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.14; letter-spacing: -.025em; }
.contact {
  color: #fff4e5; background: linear-gradient(125deg, var(--plum), #532a42); border: 1px solid #714256;
  padding: clamp(1.2rem, 4vw, 2rem); margin: 1rem 0 1.5rem; border-radius: .8rem;
}
.contact p { color: #f3e1e7; }
.contact a { color: var(--gold); }
.contact .contact-button { display: inline-block; padding: .45rem .95rem; color: #351d2c; background: var(--gold); border-radius: .3rem; font-size: .85rem; font-weight: 650; text-decoration: none; }
.contact .address { margin: .65rem 0 0; font-size: .83rem; overflow-wrap: anywhere; }
.footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem 2rem; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--muted); }

@media (max-width: 740px) {
  .wrap { width: min(100% - 2.25rem, 34rem); }
  .topbar { flex-wrap: wrap; }
  .hero, .layout { grid-template-columns: 1fr; }
  .hero { gap: 1.35rem; padding-block: 2.35rem; }
  .hero-art img { aspect-ratio: 2.05; object-position: center 11%; }
  .contents nav { position: static; display: flex; flex-wrap: wrap; column-gap: 1rem; }
  .contents nav p { width: 100%; margin-bottom: .15rem; }
  .contents nav a { margin-block: .22rem; }
}

@media print {
  .masthead, .contact { color: var(--ink); background: white; }
  .hero-copy > p, .hero-copy .date, .brand, .contact p, .contact a { color: var(--ink); }
  .hero-art, .topbar nav, .contents, .footer a { display: none; }
  .layout, .hero { display: block; }
}