/* Demetrius: a private file-service front door. No scripts or remote assets. */
:root {
  color-scheme: light dark;
  --canvas: #f4f1e9;
  --text: #303b32;
  --quiet: #5b645a;
  --hairline: #c3c8ba;
  --accent: #405744;
  --on-accent: #fffdf7;
  --soft: #e8ece1;
  --ring: #72501e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #20251f;
    --text: #eeeede;
    --quiet: #b9c0ae;
    --hairline: #57634f;
    --accent: #cedcbb;
    --on-accent: #253120;
    --soft: #2c3529;
    --ring: #ead29e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 5px; border-radius: 3px; }
.skip { position: absolute; top: 1rem; left: 1rem; z-index: 10; padding: .6rem 1rem; border: 1px solid var(--hairline); background: var(--canvas); transform: translateY(-200%); }
.skip:focus { transform: none; }
.envelope { width: min(100% - 3.5rem, 51rem); margin-inline: auto; }
.front-header { padding-block: 2.65rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.signature { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--text); font: 1.4rem/1.3 Georgia, "Times New Roman", serif; letter-spacing: -.035em; min-height: 2.75rem; }
.signature img { flex-shrink: 0; }
.access-label { color: var(--quiet); font-size: .8rem; letter-spacing: .035em; }
.letter { width: min(100% - 3.5rem, 37rem); margin-inline: auto; padding-block: 4.4rem 5.5rem; flex: 1; }
.letter.home { display: flex; flex-direction: column; justify-content: center; padding-block: 4rem 7rem; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: 2.8rem; line-height: 1.16; letter-spacing: -.04em; margin: 0 0 1.5rem; }
h2 { font-size: 1.4rem; line-height: 1.35; margin: 2.2rem 0 .65rem; letter-spacing: -.02em; }
p { margin: 0 0 1.15rem; }
.description { color: var(--quiet); font-size: 1.075rem; max-width: 32rem; line-height: 1.8; }
.actions { margin: 1.6rem 0 1.2rem; }
.open-storage { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.15rem; background: var(--accent); color: var(--on-accent); padding: .85rem 1.3rem; border: 1px solid var(--accent); border-radius: 7px; text-decoration: none; font-size: .96rem; line-height: 1.5; min-height: 3.2rem; }
.open-storage:hover { text-decoration: underline; text-underline-offset: .25em; }
.open-storage span { flex-shrink: 0; }
.small-note { color: var(--quiet); font-size: .85rem; max-width: 31rem; }
.margin-note { margin-top: 3.1rem; border-top: 1px solid var(--hairline); padding-top: 1.2rem; color: var(--quiet); font-size: .9rem; }
.margin-note p { margin-bottom: .45rem; }
.margin-note a { display: inline-block; padding-block: .25rem; }
.return { margin: 0 0 1.65rem; font-size: .85rem; }
.return a { display: inline-block; padding-block: .4rem; }
.steps { margin: 1.4rem 0 2rem; padding-left: 1.45rem; }
.steps li { padding: .3rem 0 .75rem .3rem; }
.steps li::marker { color: var(--quiet); }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .88em; }
details { border-top: 1px solid var(--hairline); }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary { cursor: pointer; padding: 1.05rem 0; font-size: .98rem; font-weight: 500; }
details p { margin: 0 0 1.2rem; color: var(--quiet); padding-right: .3rem; }
.error-label { font-size: .8rem; color: var(--quiet); letter-spacing: .05em; margin-bottom: 1rem; }
.front-footer { border-top: 1px solid var(--hairline); padding-block: 1.1rem 2rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: space-between; font-size: .85rem; color: var(--quiet); }
.front-footer nav { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; }
.front-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.front-footer a[aria-current="page"] { font-weight: 650; text-decoration-thickness: 2px; }
@media (max-width: 38rem) {
  .envelope, .letter { width: calc(100% - 2.5rem); }
  .front-header { padding-top: 1.65rem; }
  .access-label { font-size: .74rem; }
  .letter { padding-block: 2.1rem 3.5rem; }
  .letter.home { padding-block: 2.5rem 4rem; }
  h1 { font-size: 2.2rem; }
  .description { font-size: 1rem; }
  .margin-note { margin-top: 2.5rem; }
  .front-footer { padding-bottom: 1.2rem; }
}
@media print {
  :root { color-scheme: light; --canvas: white; --text: black; --quiet: #333; --hairline: #999; --accent: black; --on-accent: white; }
  .skip { display: none; }
  .letter, .letter.home { padding-block: 1rem; }
}