/* G04 · Graduation Photo Editorial: fonts (SIL Open Font License 1.1, self-hosted) */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* G04 · Graduation Photo Editorial: off-white and black, a large portrait, a magazine serif title, thin rules,
   a frosted countdown card and plain rows; nothing decorative but the photographs. */
:root {
  --bg: #f4f3ef; --bg2: #e9e7e1; --ink: #1c1c1a; --muted: #5f5e58; --accent: #1c1c1a; --accent2: #c9a96a;
  --line: rgb(28 28 26 / .14);
  --card: #ffffff; --card-line: #e6e4de; --card-shadow: 0 8px 22px rgb(0 0 0 / .05); --radius: 14px;
  --btn-bg: #1f1f1f; --btn-ink: #fafaf7; --btn-line: transparent; --btn-shadow: 0 8px 18px rgb(0 0 0 / .18);
  --f-display: "DM Serif Display", Georgia, serif; --f-body: "Jost", system-ui, sans-serif; --f-head: "DM Serif Display", Georgia, serif; --f-num: "DM Serif Display", Georgia, serif;
  --name-font: "DM Serif Display", Georgia, serif; --name-size: 1.65rem; --name-weight: 400; --name-color: #1c1c1a;
  --head-size: 2.2rem; --head-weight: 400; --head-color: #1c1c1a; --head-ink: #1c1c1a;
  --photo-radius: 0; --photo-border: 0; --photo-shadow: none;
  --gate-bg: #f4f3ef; --guest-bg: #fff; --guest-line: #e6e4de;
  --cd-title: #1c1c1a; --cd-num: #1c1c1a; --cd-label: #7a7972; --cd-tile: transparent; --cd-tile-border: 0; --cd-tile-shadow: none;
  --dt-ic: #1c1c1a; --dt-ic-bg: transparent; --dt-label: #1c1c1a; --av-bg: #ecebe6; --av-ink: #5f5e58;
  --map-ink: #1c1c1a; --map-line: #d6d4cc;
  --gal-radius: 4px; --gal-shadow: none; --gal-ar: 3 / 4;
}
body { background: #ecebe6; }
.inv { background: #f4f3ef; }
.sec { text-align: left; }
.sec__in { max-width: 460px; }

/* The portrait, full width */
.phw--cover, .phw--hero { --pw: auto; width: auto; margin: -28px -22px 22px; }
.phw--hero { margin-top: -34px; }
.phw .photo img { object-position: 50% 20%; }
.phw .photo { -webkit-mask: linear-gradient(180deg, #000 86%, transparent); mask: linear-gradient(180deg, #000 86%, transparent); }
.ttl { justify-items: start; text-align: left; gap: 0; }
#gate .gate__in, #side .side__in { text-align: left; }
.ttl__pre span { font: 500 .74rem/1.4 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: #3a3a36; }
.ttl__pre::after { content: ""; display: block; width: 36px; height: 1px; margin: 14px 0 10px; background: #1c1c1a; }
.ttl__kicker b { display: block; font: 400 3.1rem/.98 var(--f-display); color: #1c1c1a; letter-spacing: -.01em; }
.ttl__name { margin: 14px 0 0; }
.ttl__facts { justify-items: start; font: 500 .72rem/1.5 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: #5f5e58; margin-top: 8px; }
.ttl .lead { margin: 14px 0 0; text-align: left; color: #3a3a36; font-size: .95rem; }
.gate__date, .side__date { margin-top: 16px; font-weight: 500; color: #1c1c1a; }
.guest { margin-left: 0; text-align: left; }
.btn--open { margin-top: 18px; }

/* Countdown: a frosted card with rules between the numbers */
.sec--countdown { padding-top: 6px; }
.cd-box { background: rgb(255 255 255 / .75); border: 1px solid #e6e4de; border-radius: 16px; padding: 14px 10px 16px; box-shadow: 0 10px 26px rgb(0 0 0 / .06); }
.cd__t { justify-content: flex-start; padding-left: 8px; font: 600 .7rem/1.3 var(--f-body); letter-spacing: .3em; text-transform: uppercase; }
.cd { gap: 0; }
.cd__c { padding: 0; text-align: center; }
.cd__c + .cd__c { border-left: 1px solid #d6d4cc; }
.cd__n { font-size: 2rem; font-weight: 400; }
.cd__l { font-weight: 400; }
.link--cal { margin-left: 4px; }

/* Headings: a large serif, left */
.h-sec { justify-items: start; text-align: left; }
.h-sec__sub { color: #5f5e58; margin-top: 6px; }

/* Details: plain rows with thin line icons */
.dts { gap: 0; }
.dt { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 14px 0; align-items: flex-start; }
.dt + .dt { border-top: 1px solid #e3e1da; }
.dt__ic { width: 30px; height: 30px; }
.dt__ic .ic { width: 26px; height: 26px; stroke-width: 1.3; }
.dt__l { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #7a7972; font-weight: 500; }
.dt__v strong { font-weight: 500; }
.dts__act { justify-items: start; }
.btn--cta { margin-top: 20px; }
.link, .link--map, .link--cal { color: #1c1c1a; }
.lead--rsvp { margin-left: 0; }
.sec--rsvp .h-sec__sub { margin-left: 0; }

/* Gallery: tall photographs, no heading */
.sec--gallery .h-sec { display: none; }
.gallery { gap: 8px; }
.gallery--5 .gallery__item:first-child { aspect-ratio: 4 / 5; }
.hint { color: #7a7972; }

/* Wishes */
.sec--wishes .h-sec__sub::after { content: ""; }
.wcomp { border-radius: 14px; }
.wish { border-color: #ebe9e3; }
.btn--send { border-radius: 10px; }

/* Closing */
.sec--closing { text-align: left; border-top: 1px solid #e3e1da; }
.closing__t span { font-size: 2.4rem; }
.made { text-align: left; }

html:lang(en) .ttl__kicker b { font-size: 2.6rem; }

@media (min-width: 1024px) { .phw--side { --pw: auto; width: auto; margin: -36px -32px 20px; } #side .ttl { max-width: 420px; } }