@font-face {
  font-family: "Kim Jung Chul Gothic";
  src: url("/assets/fonts/KimjungchulGothic-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Kim Jung Chul Gothic";
  src: url("/assets/fonts/KimjungchulGothic-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kim Jung Chul Gothic";
  src: url("/assets/fonts/KimjungchulGothic-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f6f3ea;
  --ink: #282720;
  --accent: #b93826;
  --theme-fill: #f2b900;
  --muted: #6b675e;
  --line: #d8d2c5;
  --wash: #eee8dc;
  --control-border: #8c8374;
  --placeholder: #6b675e;
  --error: #a12d25;
  --selection: #eed5ca;
  --primary-hover: #403d34;
  --logo-light: block;
  --logo-dark: none;
  --loading-dough: #e2d0a5;
  --loading-crust: #a35527;
  --loading-steam: #8d7459;
  --display: var(--body);
  --body: "Kim Jung Chul Gothic", "Apple SD Gothic Neo", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #201f1c;
  --ink: #f4f0e5;
  --accent: #ff947e;
  --theme-fill: #f2cc68;
  --muted: #b5afa2;
  --line: #504c43;
  --wash: #2d2b26;
  --control-border: #8f8779;
  --placeholder: #b5afa2;
  --error: #ffb3a0;
  --selection: #574038;
  --primary-hover: #ddd6c7;
  --logo-light: none;
  --logo-dark: block;
  --loading-dough: #eee0be;
  --loading-crust: #cb8850;
  --loading-steam: #cab69b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #201f1c;
    --ink: #f4f0e5;
    --accent: #ff947e;
    --theme-fill: #f2cc68;
    --muted: #b5afa2;
    --line: #504c43;
    --wash: #2d2b26;
    --control-border: #8f8779;
    --placeholder: #b5afa2;
    --error: #ffb3a0;
    --selection: #574038;
    --primary-hover: #ddd6c7;
    --logo-light: none;
    --logo-dark: block;
    --loading-dough: #eee0be;
    --loading-crust: #cb8850;
    --loading-steam: #cab69b;
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: 24px; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px/1.85 var(--body);
  font-synthesis: none;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
button, input, textarea, select { font: inherit; color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { min-width: 44px; cursor: pointer; }
a { color: inherit; text-underline-offset: 6px; text-decoration-thickness: 1px; }
a:hover, .quiet-button:hover { color: var(--accent); }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
main:focus { outline: none; }
::selection { color: var(--ink); background: var(--selection); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.5; }
h1 { font-size: clamp(34px, 4.3vw, 60px); letter-spacing: -.05em; }
h2 { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -.035em; }
h3 { font-size: 23px; letter-spacing: -.025em; }
p + p { margin-top: 14px; }
.page-width { width: min(1120px, calc(100% - 112px)); margin-inline: auto; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; min-height: 104px; padding-block: 18px; }
.masthead-controls { display: flex; margin-inline-start: auto; }
.site-menu { position: relative; flex-shrink: 0; z-index: 3; }
.site-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; list-style: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.site-menu-toggle::-webkit-details-marker { display: none; }
.site-menu-toggle::marker { content: ''; }
.site-menu-toggle:focus-visible { outline-offset: 2px; }
.site-menu-toggle svg { fill: currentColor; stroke: none; }
.menu-utensil { transform-box: view-box; transform-origin: 18px 18px; transition: transform .24s cubic-bezier(.22, .68, 0, 1), opacity .14s ease; }
.menu-fork { transform: translateY(-10px) rotate(0deg); }
.menu-knife { transform: scaleX(1); }
.menu-spoon { transform: translateY(10px) rotate(0deg); }
.site-menu[open] .menu-fork { transform: translateY(0) rotate(45deg); }
.site-menu[open] .menu-knife { transform: scaleX(.7); opacity: 0; }
.site-menu[open] .menu-spoon { transform: translateY(0) rotate(-45deg); }
.site-menu-toggle:hover { background: transparent; }
.site-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 218px; max-width: calc(100vw - 40px); max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); background: var(--paper); }
.site-menu-panel .account-link { display: flex; min-width: 44px; min-height: 44px; padding: 8px 4px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; text-decoration: none; }
.site-menu-panel .account-link:hover { text-decoration: underline; }
.site-menu-panel .account-link.signed-in { flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; padding: 10px 6px 14px; }
.site-menu-panel .account-link.signed-in:hover { text-decoration: none; }
.account-greeting { color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-summary { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-display-name { min-width: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }
.account-link:hover .account-display-name { text-decoration: underline; text-underline-offset: 4px; }
.profile-bread { display: block; flex: 0 0 36px; width: 36px; height: 36px; color: var(--bread-ink-light); fill: currentColor; user-select: none; }
:root[data-theme="dark"] .profile-bread { color: var(--bread-ink-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .profile-bread { color: var(--bread-ink-dark); } }
@media (forced-colors: active) { .profile-bread, :root[data-theme="dark"] .profile-bread { color: CanvasText; } }
.site-menu-settings { display: flex; align-items: center; justify-content: center; gap: 16px; }
.site-menu-section { flex: 0 0 88px; min-width: 0; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-choice { position: relative; display: grid; place-items: center; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: var(--muted); text-align: center; }
.settings-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; transition: transform .18s ease; }
.theme-choice[aria-pressed="true"] { color: var(--ink); }
.theme-choice[aria-pressed="true"] .settings-icon { color: var(--theme-fill); fill: currentColor; stroke: currentColor; }
.theme-choice:hover { background: transparent; }
@media (hover: hover) { .theme-choice:hover .settings-icon { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .settings-icon { transition: none; } .theme-choice:hover .settings-icon { transform: none; } }
.site-menu-panel .locale-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-inline-start: 0; }
.site-menu-panel .locale-switcher button { display: grid; place-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); line-height: 1; }
.site-menu-panel .locale-switcher button:hover { background: transparent; color: var(--ink); }
.site-menu-panel .locale-label { display: grid; place-items: center; width: 20px; min-height: 24px; font-size: 15px; font-weight: 400; }
.site-menu-panel [data-locale="en"] .locale-label { font-size: 16px; }
.site-menu-panel [data-locale][aria-pressed="true"] .locale-label { color: var(--ink); font-weight: 700; }
/* Language glyphs retain their closer pairing; theme icons stay centered. */
.site-menu-settings button:first-child .locale-label { transform: translateX(6px); }
.site-menu-settings button:last-child .locale-label { transform: translateX(-6px); }
.site-menu-panel :is(a, button):focus-visible { outline-offset: -3px; }
.locale-switcher button[data-locale][aria-pressed="true"] { border-color: var(--control-border); }
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.brand-mark { width: 64px; height: auto; flex-shrink: 0; }
img, .wordmark { -webkit-user-drag: none; }
img { user-select: none; }
.brand-mark-light { display: var(--logo-light); }
.brand-mark-dark { display: var(--logo-dark); }
.eyebrow, .meta, .badge { font-size: 12px; line-height: 1.8; }
.eyebrow { color: var(--accent); letter-spacing: .12em; }
.meta, .hint { color: var(--muted); }
.hint { font-size: 13px; line-height: 1.8; }
.preserve-lines { white-space: pre-wrap; }
.home-intro { padding-top: 58px; padding-bottom: 18px; }
.home-intro h1 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.6; letter-spacing: -.04em; }
.home-intro .lede { max-width: 68ch; margin-top: 10px; color: var(--muted); font-size: 15px; }
.featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  gap: 48px;
  padding-block: 30px 60px;
}
.featured .stamp { width: 380px; justify-self: center; }
.featured-copy { padding-left: 0; }
.featured h2 { margin: 17px 0 15px; font-size: clamp(42px, 4vw, 56px); font-weight: 700; }
.featured-arrow { display: inline-block; margin-inline-start: .35em; font-size: .5em; vertical-align: middle; }
.featured .description { max-width: 27em; font-weight: 300; }
.table-card { text-decoration: none; }
.table-card:hover { color: var(--ink); }
.table-card:is(:hover, :focus-visible) :is(h2, h3) { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; gap: 12px; }
.year-group { padding-top: 30px; margin-bottom: 52px; }
.year-group > h2 { font-size: 18px; margin-bottom: 26px; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.archive-item { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 24px; align-items: center; padding-bottom: 26px; }
.archive-item h3 { margin: 8px 0; }
.archive-item .description { font-size: 14px; }
.archive-item .stamp { width: 122px; }
.back-link { margin-top: 23px; font-size: 13px; }
.record-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 410px); align-items: center; gap: 58px; padding-block: 45px 65px; }
.record-header h1 { margin-block: 15px 20px; font-weight: 700; }
.record-header .stamp { width: 400px; justify-self: center; }
.record-description { font-weight: 300; max-width: 36em; }
.record-menu { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; }
.record-menu-icon { width: 17px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#community-heading { scroll-margin-top: 64px; }
.host-note { max-width: 680px; padding: 0 0 55px; }
.community { margin-top: 47px; padding-bottom: 20px; }
.community:focus { outline: none; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.community-tools { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: 15px; }
.quiet-button { border: 0; background: transparent; min-height: 44px; padding: 8px 0; text-decoration: underline; text-underline-offset: 6px; font-size: 13px; }
.empty-state { padding: 36px 0 44px; max-width: 38em; color: var(--muted); }
.empty-state h2, .empty-state h3 { color: var(--ink); margin-bottom: 12px; }
.invitation, .login-section { max-width: 690px; margin-top: 32px; }
.invitation { margin-top: 20px; scroll-margin-top: 76px; }
.writer h3, .login-section h2 { margin-bottom: 12px; }
.private-access { margin-top: 20px; }
.invitation-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin-top: 14px; }
.invitation-form .field { flex: 1 1 240px; margin: 0; }
.invitation-form .status { flex-basis: 100%; margin: 0; }
.writer :is(input, textarea, .media-drop) { scroll-margin-top: 100px; }
.contribution-action { margin-inline-start: auto; scroll-margin-top: 76px; }
.compact-form { max-width: 390px; margin-top: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 23px; }
.field label { font-size: 14px; }
input:not([type="checkbox"]), textarea, select {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--paper);
  padding: 11px 13px;
  min-height: 48px;
}
input:not([type="checkbox"]):focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
textarea { resize: vertical; line-height: 1.8; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[readonly] { background: var(--wash); }
input[type="file"] { font-size: 14px; padding: 5px; }
input::file-selector-button { min-height: 44px; padding: 8px 12px; margin-right: 12px; font: inherit; color: var(--ink); background: var(--wash); border: 0; border-radius: 0; cursor: pointer; }
input[type="checkbox"] { width: 21px; height: 21px; flex-shrink: 0; accent-color: var(--ink); }
.checkbox-field { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 8px; cursor: pointer; }
.primary-button, .secondary-button { min-height: 48px; border: 1px solid var(--ink); border-radius: 0; padding: 10px 22px; }
.primary-button { background: var(--ink); color: var(--paper); }
.primary-button:hover:not(:disabled) { background: var(--primary-hover); }
.secondary-button { background: transparent; }
.secondary-button:hover { background: var(--wash); }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.status { min-height: 1.85em; margin-top: 14px; font-size: 14px; white-space: pre-wrap; }
.status[data-kind="error"] { color: var(--error); }
.status[data-kind="success"] { color: var(--ink); }
.status:empty { min-height: 0; margin: 0; }
.writer { width: 100%; min-width: 0; margin-block: 14px 28px; padding: 0; border: 0; scroll-margin-top: 100px; }
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.writer .composer-top h3 { margin: 0; font: 400 16px/1.8 var(--body); }
.composer-close { flex: 0 0 44px; min-width: 44px; min-height: 44px; font-size: 24px; text-decoration: none; }
.composer-intro { margin-top: 4px; }
.writer .media-drop { flex-direction: row; min-height: 64px; padding: 10px 12px; gap: 10px; }
.writer .media-choose-icon { font-size: 22px; }
.writer form { margin-top: 12px; }
.writer .composer-name-field { max-width: 390px; margin-bottom: 12px; }
.composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.composer-loading:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.composer-loading .loading-bread { flex: none; width: 44px; height: 44px; }
.composer-loading .status { margin: 0; }
.media-picker { position: relative; }
input.media-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.media-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 152px;
  padding: 20px 16px;
  border: 1px solid var(--control-border);
  text-align: center;
  cursor: pointer;
}
.media-picker:focus-within .media-drop { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.media-drop:hover, .media-picker.is-dragging .media-drop { background: var(--wash); border-color: var(--ink); }
.media-choose-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.media-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 24px; }
.media-queue:empty { margin: 0; }
.media-preview { min-width: 0; border: 1px solid var(--line); padding: 12px; }
.media-preview img, .media-video-preview { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--wash); }
.media-video-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }
.media-preview .field { margin-top: 10px; margin-bottom: 0; }
.media-preview .meta { margin-top: 8px; }
.media-preview .quiet-button { color: var(--accent); }
.media-preview[data-state="processing"] { border-style: dashed; }
.media-preview[data-state="error"] { border-width: 2px; }
.media-progress { width: 100%; height: 8px; accent-color: var(--ink); }
.media-item-status { font-size: 13px; }
.community-feed { margin-top: 0; }
.community-tools:not([hidden]), .community > .status:not(:empty), .community > div:has(> .invitation:not([hidden])) { margin-bottom: 24px; }
.community-feed .section-heading h2 { font-size: 21px; letter-spacing: -.025em; }
.review-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.community-gallery { margin-top: 44px; margin-bottom: 28px; }
.community-feed .empty-state { padding-block: 22px 16px; font-size: 14px; }
.entry { padding-block: 25px 27px; }
.entry-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 17px; }
.entry-header h3 { font: 400 16px/1.8 var(--body); }
.entry-note { max-width: 46em; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 14px; }
.entry-actions .delete-button { color: var(--accent); }
.badge { display: inline-block; color: var(--accent); border-bottom: 1px solid currentColor; }
.entry[data-hidden="true"] { border-left: 2px solid var(--line); padding-left: 20px; }
.photo-grid { --photo-gap: 24px; column-count: 3; column-gap: var(--photo-gap); margin-top: 22px; }
.photo-grid figure { break-inside: avoid; margin-bottom: var(--photo-gap); }
.gallery-add {
  column-span: all;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 44px;
  min-height: 96px;
  break-inside: avoid;
  margin-block: var(--photo-gap);
  padding: 16px;
  border: 1px dashed var(--control-border);
  background: var(--wash);
  font-size: 14px;
}
.gallery-add:hover:not(:disabled) { color: var(--accent); }
.photo-grid figcaption { font-size: 13px; line-height: 1.8; margin-top: 11px; }
.photo-grid .photo-button { position: relative; width: 100%; display: block; padding: 0; border: 0; min-height: 44px; background: var(--wash); }
.video-mark { position: absolute; bottom: 8px; right: 8px; display: inline-flex; gap: 8px; align-items: center; padding: 3px 8px; background: var(--ink); color: var(--paper); font-size: 13px; }
.photo-grid img { width: 100%; height: auto; }
.photo-grid .badge { margin-top: 6px; }
.photo-grid figure[data-hidden="true"] .photo-button { opacity: .55; }
.photo-grid .entry-actions { margin-top: 6px; gap: 20px; }
.photo-error { padding: 12px; font-size: 13px; color: var(--accent); }
.gallery-end { min-height: 44px; margin-top: 12px; }
.gallery-end .status:empty { display: none; }
.photo-dialog, .entry-edit-dialog {
  width: min(860px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.photo-dialog::backdrop, .entry-edit-dialog::backdrop { background: rgb(0 0 0 / 82%); }
.entry-edit-dialog { width: min(690px, calc(100% - 32px)); }
.entry-edit-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.entry-edit-dialog h2 { font-size: 25px; }
.photo-dialog { --dialog-gutter: 52px; width: min(964px, calc(100% - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 0; background: transparent; overflow: visible; }
.dialog-top { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin-inline: var(--dialog-gutter); padding: 6px 12px; background: var(--paper); }
.dialog-top button, .dialog-gutter button { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 27px; line-height: 1; }
.dialog-top button:hover { background: var(--wash); }
.dialog-stage { display: grid; grid-template-columns: var(--dialog-gutter) minmax(0, 1fr) var(--dialog-gutter); align-items: stretch; }
.dialog-gutter { display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.dialog-gutter button { color: #fff; }
.dialog-gutter button:hover { background: rgb(255 255 255 / 15%); }
.dialog-gutter button[aria-disabled="true"] { cursor: wait; opacity: .65; }
.dialog-gutter button:focus-visible { outline-color: #fff; outline-offset: -2px; }
.dialog-media { position: relative; display: grid; align-items: center; min-width: 0; min-height: 128px; background: var(--paper); }
.dialog-media:has(.dialog-video[hidden]) { touch-action: pan-y pinch-zoom; }
.dialog-image, .dialog-video { display: block; max-height: 56dvh; width: 100%; object-fit: contain; }
.dialog-video { background: #202020; }
.dialog-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; padding: 0; border: 1px solid #fff; border-radius: 50%; color: #fff; background: rgb(0 0 0 / 70%); font-size: 24px; line-height: 1; }
.dialog-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.dialog-details { max-height: calc(44dvh - 88px); overflow-y: auto; overscroll-behavior: contain; margin-inline: var(--dialog-gutter); padding: 12px 16px; background: var(--paper); }
.dialog-details .status { margin-top: 0; }
.dialog-details .status:empty { display: none; }
#photo-dialog-caption { margin-top: 0; }
#photo-dialog-author { margin-top: 8px; }
body:has(.photo-dialog[open], .entry-edit-dialog[open]) { overflow: hidden; }
.manage-intro { padding-top: 44px; max-width: 720px; }
.manage-intro h1 { margin-block: 12px 20px; font-weight: 700; }
.manage-intro > p:last-child { max-width: 35em; }
.manage-layout { max-width: 820px; padding-block: 34px 30px; }
.manage-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 30px; }
.manage-form { margin-top: 32px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.manage-form h2 { font-size: 27px; margin-bottom: 26px; }
.manage-form > .badge { margin-bottom: 24px; }
.visibility-help { margin-bottom: 26px; }
.manage-links { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-block: 14px; font-size: 14px; }
.invitation-tools { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 26px; }
.invitation-tools h3 { margin-bottom: 12px; }
.invitation-output { margin-top: 24px; }
.login-section { padding-bottom: 35px; }
.account-page { max-width: 690px; padding-bottom: 64px; }
.account-page .text-link { min-width: 44px; }
.account-page h1 { margin-block: 24px; font-weight: 700; }
.account-intro { max-width: 38em; margin-block: 24px 16px; }
.google-login { margin-top: 24px; }
.google-login:disabled:not([aria-busy="true"]) { cursor: not-allowed; }
.email-login-form { max-width: 440px; margin-block: 28px; padding-block: 24px; border-block: 1px solid var(--line); }
.email-login-form h2 { margin-bottom: 12px; }
.email-preview-notice { padding: 12px 16px; border: 1px solid var(--line); background: var(--wash); color: var(--ink); }
.email-login-form .email-preview-notice { margin-bottom: 22px; }
.email-login-form button { max-width: 100%; white-space: normal; }
.email-login-form input[name="code"] { letter-spacing: .18em; }
.email-login-form button:disabled:not([aria-busy="true"]) { cursor: not-allowed; }
.email-test-mail { margin-bottom: 24px; }
.email-test-mail .hint { margin-top: 12px; }
.email-test-code { display: block; width: fit-content; max-width: 100%; margin-top: 14px; padding: 10px 16px; border: 1px solid var(--line); background: var(--wash); color: var(--ink); font-size: 24px; letter-spacing: .2em; direction: ltr; user-select: all; -webkit-user-select: all; }
.email-code-stage > .hint { margin-top: 12px; }
.account-identity { display: flex; align-items: center; gap: 18px; margin-block: 30px 20px; }
.account-initials { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; min-height: 52px; padding: 6px; background: var(--wash); font-size: 18px; }
.account-name { min-width: 0; font-size: 21px; }
.profile-form { margin-top: 28px; }
.account-actions { margin-top: 22px; }
.account-contributions, .account-linking, .account-ownership { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.account-page h2 { font-size: 23px; }
.account-contribution-list { list-style: none; margin: 18px 0 0; padding: 0; }
.account-contribution-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; padding-block: 8px; }
.account-contribution-list a { min-width: 0; }
.account-contributions > .hint, .account-linking > .hint, .account-ownership > .hint { margin-block: 16px; }
.manage-account-connection { margin-top: 20px; }
.archive-loading { display: grid; place-items: center; min-height: clamp(260px, 55svh, 560px); }
.loading-bread { overflow: visible; }
.loading-loaf { fill: var(--loading-dough); transform-box: fill-box; transform-origin: 50% 100%; animation: archive-bake 2s ease-in-out both; }
.loading-steam { fill: none; stroke: var(--loading-steam); stroke-width: 1.7; stroke-linecap: round; opacity: 0; animation: archive-steam 1.8s ease-in-out infinite; }
.loading-steam-a { animation-delay: .3s; }
.loading-steam-b { animation-delay: .75s; }
.loading-steam-c { animation-delay: 1.2s; }
@keyframes archive-bake {
  0% { fill: var(--loading-dough); transform: scale(.97, .94); }
  30% { fill: var(--loading-dough); transform: scale(.985, .97); }
  74% { fill: #c58a43; transform: scale(1.007, 1.025); }
  100% { fill: var(--loading-crust); transform: scale(1); }
}
@keyframes archive-steam {
  0% { opacity: 0; transform: translate(0, 5px) scaleX(.85); }
  23% { opacity: .52; }
  68% { opacity: .30; }
  100% { opacity: 0; transform: translate(3px, -15px) scaleX(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-loaf { animation: none; fill: var(--loading-crust); }
  .loading-steam { animation: none; opacity: .35; }
}
@media (forced-colors: active) {
  .loading-loaf { animation: none; fill: CanvasText; }
  .loading-steam { stroke: CanvasText; }
}
.page-error { padding-block: 60px 110px; max-width: 650px; }
.page-error h1 { font-size: 36px; margin-bottom: 22px; }
.page-error .form-actions { margin-top: 24px; }
.skip-link { position: fixed; z-index: 10; left: 16px; top: -120px; padding: 12px 20px; color: var(--paper); background: var(--ink); }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .page-width { width: calc(100% - 64px); }
  .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .featured-copy { padding-left: 0; }
  .record-header { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 30px; }
  .archive-grid { gap: 32px; }
  .archive-item { grid-template-columns: minmax(0, 1fr) 85px; gap: 14px; }
  .photo-grid { --photo-gap: 20px; column-count: 2; }
}

@media (max-width: 620px) {
  .page-width { width: calc(100% - 40px); }
  .masthead { min-height: 86px; gap: 10px; }
  .brand-mark { width: 54px; }
  .home-intro { padding-top: 40px; padding-bottom: 0; }
  .home-intro h1 { font-size: clamp(22px, 6vw, 28px); }
  .home-intro .lede { font-size: 15px; margin-top: 8px; }
  .featured { grid-template-columns: minmax(0, 1fr); gap: 27px; padding-block: 34px 55px; }
  .featured .stamp { width: min(100%, 340px); }
  .featured-copy { padding-left: 0; }
  .featured h2 { margin-block: 12px; font-size: clamp(34px, 8vw, 40px); }
  .featured .description { font-size: 15px; }
  .archive-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .archive-item { grid-template-columns: minmax(0, 1fr) 105px; }
  .archive-item .stamp { width: 105px; }
  .record-header { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 25px 40px; }
  .record-header .stamp { width: min(100%, 350px); }
  .record-header h1 { font-size: 39px; }
  .record-description { font-size: 15px; }
  .host-note { padding-left: 18px; padding-bottom: 35px; }
  .community { padding-top: 32px; }
  .section-heading { align-items: flex-start; }
  .media-queue, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .photo-grid { --photo-gap: 14px; }
  .entry-edit-dialog { padding: 16px; }
  .photo-dialog { --dialog-gutter: 44px; width: calc(100% - 8px); }
  .dialog-top { padding-inline: 8px; }
  .dialog-details { padding: 10px 12px; }
  .manage-intro { padding-top: 30px; }
  .manage-intro h1 { font-size: 39px; }
  .manage-toolbar { gap: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media print {
  :root, :root[data-theme], :root:not([data-theme]) {
    color-scheme: light;
    --paper: #fafafa;
    --ink: #202020;
    --accent: #505050;
    --muted: #686868;
    --line: #d6d6d6;
    --wash: #eeeeee;
    --control-border: #888888;
    --placeholder: #686868;
    --error: #9a3c32;
    --selection: #dedede;
    --primary-hover: #3b3b3b;
    --logo-light: block;
    --logo-dark: none;
  }
  .skip-link, .writer, .invitation, .contribution-action, .community-tools, .entry-actions, .site-menu, dialog { display: none; }
  .page-width { width: 100%; }
  body { background: white; color: black; }
  .entry, .featured { break-inside: avoid; }
}

@media (forced-colors: active) {
  .brand-mark-light { display: block; }
  .brand-mark-dark { display: none; }
  .site-menu-panel { border-color: CanvasText; }
  .theme-choice[aria-pressed="true"] .settings-icon { color: CanvasText; stroke: currentColor; }
  .theme-choice[aria-pressed="true"], .locale-switcher button[data-locale][aria-pressed="true"] { border-color: Highlight; }
  .site-menu-panel [data-locale][aria-pressed="true"] .locale-label { color: CanvasText; }
}

@media screen and (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand-mark-light { display: none; }
  .brand-mark-dark { display: block; filter: brightness(0) invert(1); }
}

/* Maker signature: hand-shaped social marks, with a native disclosure. */
.maker-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 44px 28px; }
.policy-links, .policy-language { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.policy-links a, .policy-language a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; }
.policy-page { max-width: 690px; padding-bottom: 64px; }
.policy-page h1 { margin-block: 24px 16px; }
.policy-page section { margin-top: 32px; }
.policy-page h2 { margin-bottom: 10px; font-size: 19px; }
.policy-page p { line-height: 1.9; overflow-wrap: anywhere; }
.policy-page > nav { margin-top: 32px; }
.policy-language [aria-current] { color: var(--ink); }
.maker-contact { position: relative; }
.maker-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0 4px 12px; color: var(--muted); font-size: 13px; letter-spacing: -.035em; cursor: pointer; list-style: none; }
.maker-toggle::-webkit-details-marker { display: none; }
.maker-toggle::marker { content: ''; }
.maker-toggle:hover, .maker-contact[open] .maker-toggle { color: var(--ink); }
.maker-hint { display: block; flex: none; width: 34px; height: 14px; color: var(--ink); transition: transform .18s ease; }
.maker-toggle:hover .maker-hint { transform: rotate(-5deg); }
.maker-card { position: absolute; bottom: calc(100% + 6px); right: 0; display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 5px 8px 4px 7px; background: var(--paper); z-index: 3; }
.maker-card a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; color: var(--ink); }
.maker-card a:hover { color: var(--accent); background: var(--wash); }
.maker-card svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.maker-card .maker-dot { stroke-width: 3.3; }
@media (prefers-reduced-motion: reduce) { .maker-hint { transition: none; } }
@media print { .maker-footer { display: none; } }
@media (forced-colors: active) { .maker-card { border-color: CanvasText; } }

.invitation-dialog { width: min(420px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.invitation-dialog::backdrop { background: rgb(0 0 0 / .32); }
.invitation-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px -8px 12px 0; }
.invitation-dialog h2 { margin: 0; font-size: 22px; }
.invitation-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.invitation-close:hover { color: var(--accent); }
.invitation-dialog .invitation { margin: 0; padding: 0; border: 0; }
.invitation-dialog .invitation-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.invitation-dialog .invitation-form .field { width: 100%; flex: none; }
.invitation-dialog .invitation-form .status { flex: none; }
.invitation-dialog .invitation-form .status:empty { display: none; }
.invitation-feedback { display: grid; min-width: 0; font-size: 14px; }
.invitation-feedback-reserve, .invitation-feedback > .status:not(.sr-only) { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; }
.invitation-feedback-reserve { visibility: hidden; min-height: 1.85em; white-space: pre-wrap; }
.invitation-code-control { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--control-border); }
.invitation-code-control:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.invitation-code-control input { flex: 1 1 0; width: 0; border: 0; background: transparent; }
.invitation-code-control input:focus { box-shadow: none; }
.invitation-code-control input:focus-visible { outline: none; }
.invitation-submit { display: grid; place-items: center; flex: 0 0 48px; width: 48px; min-height: 48px; padding: 0; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--ink); }
.invitation-submit:hover:not(:disabled) { background: var(--wash); }
.invitation-submit:focus-visible { outline-offset: -4px; }
.invitation-submit:disabled { opacity: 1; }
.invitation-submit[data-state="idle"]:disabled { opacity: .45; cursor: not-allowed; }
.invitation-submit[data-state="success"] { color: #287344; }
:root[data-theme="dark"] .invitation-submit[data-state="success"] { color: #80c59a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .invitation-submit[data-state="success"] { color: #80c59a; } }
.invitation-submit[data-state="error"] { color: var(--error); }
.invitation-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invitation-submit[data-state="pending"] .invitation-icon { animation: invitation-spin .8s linear infinite; }
.invitation-submit:is([data-state="success"], [data-state="error"]) .invitation-icon { animation: invitation-reveal 140ms ease-out; }
@keyframes invitation-spin { to { transform: rotate(360deg); } }
@keyframes invitation-reveal { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .invitation-submit[data-state] .invitation-icon { animation: none; } }
@media (forced-colors: active) { .invitation-dialog { border-color: CanvasText; } }
@media (forced-colors: active) {
  input:not([type="checkbox"]):focus, textarea:focus, select:focus,
  .media-picker:focus-within .media-drop, .invitation-code-control:focus-within { border-color: Highlight; }
}