/* Three graphic worlds, using bundled Vietnamese fonts and vector artwork. */
@font-face{font-family:'GT October Sans';src:url('/assets/october-postcards/fonts/sans.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GT October Sans';src:url('/assets/october-postcards/fonts/sans-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
.ox-cover,.ox-section{font-family:var(--c-body);color:var(--c-ink);font-kerning:normal;overflow-wrap:anywhere}
.collection-page .ox-cover{padding:0;min-height:0;display:block;background:var(--c-bg)}
.ox-scene{position:relative;max-width:1120px;margin:auto;padding:32px 64px 38px}
.ox-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid currentColor}
.ox-label{font:500 10px/1.8 var(--c-body);letter-spacing:.15em;text-transform:uppercase;white-space:pre-line}
.ox-date{font:400 23px/1.3 var(--c-heading);white-space:nowrap}
.ox-cover .ox-title{display:block;font:400 calc(clamp(46px,6.7vw,84px)*var(--c-scale))/1.24 var(--c-heading);white-space:pre-line;letter-spacing:-.04em;margin:0;text-wrap:balance}
.ox-subtitle{font:400 14px/1.85 var(--c-body);margin:20px 0 0;white-space:pre-line}
.ox-dedication{text-align:center;margin-top:28px}
.ox-dedication p{font:400 23px/1.5 var(--c-heading);margin:6px 0 0}
.ox-deck{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:26px max(32px,calc((100vw - 992px)/2));border-top:1px solid color-mix(in srgb,var(--c-ink) 25%,transparent)}
.ox-deck>p{font:400 13px/1.85 var(--c-body);max-width:48ch;white-space:pre-line}
.ox-link{display:inline-flex;align-items:center;justify-content:center;gap:18px;font:500 11px/1.7 var(--c-body);text-decoration:none;color:inherit;min-height:44px;flex-shrink:0;border-bottom:1px solid currentColor}
.ox-link svg{width:17px;height:17px}
.ox-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* A portable radio, with a punched speaker grille and an analog tuner. */
.ox-radio-heading{text-align:center;margin:42px auto 66px}
.ox-radio-device{position:relative;max-width:610px;margin:auto;padding:23px 28px 16px;border:2px solid var(--c-ink);border-radius:28px;background:var(--c-secondary);box-shadow:7px 9px 0 var(--c-ink);transform:rotate(-3deg)}
.ox-radio-handle{position:absolute;left:24%;right:24%;height:36px;top:-37px;border:8px solid var(--c-ink);border-bottom:0;border-radius:22px 22px 0 0}
.ox-radio-brand,.ox-radio-foot{display:flex;align-items:center;justify-content:space-between;font:500 10px/1.5 var(--c-body);letter-spacing:.15em}
.ox-radio-brand{padding-bottom:18px}.ox-radio-brand>span:first-child{font-size:16px;letter-spacing:.12em}
.ox-radio-face{display:grid;grid-template-columns:1fr 1.12fr;gap:24px;align-items:center}
.ox-speaker{aspect-ratio:1;border:9px solid var(--c-ink);border-radius:50%;background:radial-gradient(var(--c-secondary) 1px,transparent 1.4px) 0 0/5px 5px,var(--c-ink);display:grid;place-items:center}
.ox-speaker>span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--c-secondary)}
.ox-speaker svg{width:24px;height:24px}
.ox-tuner{padding:14px 16px;background:var(--c-bg);border:2px solid var(--c-ink);border-radius:8px}
.ox-tuner .ox-label{font-size:8px;letter-spacing:.1em}
.ox-tuner strong{display:block;font:400 45px/1.3 var(--c-heading);color:var(--c-accent);letter-spacing:-.04em}
.ox-tuner-scale{position:relative;height:17px;margin-top:6px;background:repeating-linear-gradient(90deg,var(--c-ink) 0 1px,transparent 1px 8px);border-bottom:1px solid var(--c-ink)}
.ox-tuner-scale:after{content:'';position:absolute;left:62%;top:-3px;bottom:-3px;width:3px;background:var(--c-accent)}
.ox-dials{display:flex;align-items:center;gap:16px;margin-top:20px}
.ox-dials i{width:43px;aspect-ratio:1;border:3px solid var(--c-ink);border-radius:50%;background:var(--c-bg);position:relative;box-shadow:2px 2px 0 var(--c-ink)}
.ox-dials i:after{content:'';position:absolute;left:48%;top:4px;height:13px;width:2px;background:var(--c-ink);transform:rotate(25deg);transform-origin:bottom}
.ox-dials span{font:500 7px/1.8 var(--c-body);letter-spacing:.1em}
.ox-radio-foot{margin-top:20px;padding-top:13px;border-top:1px solid currentColor;font-size:8px}
.ox-radio-device+.ox-dedication{margin-top:38px}
/* A celestial atlas: the sphere and its paths remain crisp at every size. */
.ox-orbit .ox-meta{border-color:color-mix(in srgb,var(--c-accent) 40%,transparent);color:var(--c-accent)}
.ox-orbit-heading{margin:42px auto 0;text-align:center;position:relative;z-index:1}
.ox-orbit .ox-title{font-style:italic;letter-spacing:-.035em}
.ox-orbit .ox-subtitle{color:var(--c-accent)}
.ox-orbit-art{display:block;width:min(100%,650px);margin:-12px auto -22px;color:var(--c-accent);overflow:visible}
.ox-planet-lines{stroke:var(--c-bg)}
.ox-orbit .ox-dedication{position:relative;margin-top:0}
.ox-orbit .ox-dedication .ox-label{color:var(--c-accent)}
/* An unapologetically bright geometric print. */
.ox-sunny .ox-scene{padding-bottom:0}
.ox-sunny-poster{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:12px;padding:36px 0 16px}
.ox-sunny .ox-title{font-weight:500;line-height:1.2;letter-spacing:-.065em;font-size:calc(clamp(66px,8.4vw,110px)*var(--c-scale))}
.ox-sunny-art{position:relative;margin:0 -10px 0 0;color:var(--c-ink)}
.ox-sun-art{display:block;width:100%;transform:rotate(-12deg)}
.ox-sun-face{stroke:var(--c-bg)}
.ox-sunny-seal{position:absolute;bottom:0;right:3%;display:grid;place-content:center;text-align:center;border:1px solid currentColor;border-radius:50%;width:98px;height:98px;background:var(--c-secondary);font:500 14px/1.5 var(--c-body);transform:rotate(12deg)}
.ox-sunny .ox-subtitle{max-width:65%;font-size:15px;margin-top:8px}
.ox-sunny .ox-dedication{display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;margin:40px 0 25px;padding-top:18px;border-top:1px solid currentColor}
.ox-sunny .ox-dedication p{font-family:var(--c-body);font-size:19px;margin:0}
.ox-checker{height:30px;background:repeating-conic-gradient(var(--c-ink) 0% 25%,var(--c-secondary) 0% 50%) 0 0/30px 30px;margin:0 -64px}
.ox-sunny .ox-deck{background:var(--c-secondary);border:0}
/* Interior typesetting and three separate treatments for the wishes. */
.ox-page .c-nav{background:var(--c-bg);color:var(--c-ink);border-color:color-mix(in srgb,var(--c-ink) 25%,transparent)}
.ox-page .c-nav>a{font-family:var(--c-body);font-size:12px}
.collection-page .ox-section{padding:80px max(28px,calc((100vw - 1000px)/2));max-width:none;margin:0;background:var(--c-bg)}
.ox-section .ox-heading h2{font:400 calc(clamp(32px,4.3vw,54px)*var(--c-scale))/1.3 var(--c-heading);white-space:pre-line;letter-spacing:-.035em;margin:14px 0 0;text-wrap:balance}
.ox-section .ox-heading>.ox-label{color:var(--c-accent)}
.ox-letter-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:70px}
.ox-section-symbol{display:block;font:400 80px/1 var(--c-heading);margin-bottom:35px;color:var(--c-accent)}
.ox-message{font:400 15px/2 var(--c-body);white-space:pre-line;margin:0}
.ox-signature{font:400 17px/1.7 var(--c-heading);margin:28px 0 0;white-space:pre-line}
.ox-intro{font:400 13px/1.9 var(--c-body);max-width:55ch;white-space:pre-line;margin:20px 0 0}
.ox-moments{margin-top:42px}
.ox-moment{display:grid;grid-template-columns:60px 1fr;gap:28px;margin:0;padding:28px 0;border-top:1px solid color-mix(in srgb,var(--c-ink) 30%,transparent)}
.ox-number{font:400 32px/1.4 var(--c-heading);color:var(--c-accent);white-space:nowrap}
.ox-moment h3{font:400 27px/1.5 var(--c-heading);margin:7px 0 12px;white-space:pre-line}
.ox-moment h3+p{font:400 13px/1.9 var(--c-body);max-width:60ch;white-space:pre-line}
.collection-page .ox-story.ox-radio{background:var(--c-secondary)}
.ox-radio.ox-story .ox-moment{grid-template-columns:64px 1fr}
.ox-radio.ox-story .ox-number{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--c-ink);border-radius:50%;color:var(--c-ink);font-size:23px}
.ox-radio.ox-story .ox-heading>.ox-label{color:var(--c-ink)}
.ox-orbit.ox-story{background:var(--c-secondary)}
.ox-orbit .ox-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ox-orbit .ox-moment{display:block;border-top-color:var(--c-accent)}
.ox-orbit .ox-number{display:block;margin-bottom:32px;font-size:48px}
.ox-orbit .ox-moment h3{font-size:24px}
.ox-sunny.ox-letter{background:var(--c-secondary)}
.ox-sunny .ox-heading h2{font-weight:500;letter-spacing:-.05em}
.ox-sunny .ox-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ox-sunny .ox-moment{display:flex;flex-direction:column;gap:26px;padding:28px 22px;border:1px solid var(--c-ink);background:var(--c-secondary);box-shadow:4px 4px 0 var(--c-ink)}
.ox-sunny .ox-moment:nth-child(2){border-radius:80px 80px 0 0;padding-top:42px}
.ox-sunny .ox-moment:nth-child(3){border-radius:0 0 70px 0}
.ox-sunny .ox-moment h3{font-size:23px;font-weight:500}
.ox-album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px}
.ox-album .c-photo{margin:0;min-width:0;min-height:0;background:transparent;aspect-ratio:auto}
.ox-album .photo-zoom{display:block;aspect-ratio:4/5;width:100%;height:auto;overflow:hidden;border:0;padding:0;background:var(--c-secondary)}
.ox-album .c-photo img{width:100%;height:100%;min-height:0}
.ox-album figcaption{position:static;color:var(--c-ink);padding:12px 0;background:none;font:400 11px/1.8 var(--c-body);white-space:pre-line}
.ox-radio .ox-album .c-photo{padding:12px 12px 0;border:1px solid currentColor;background:var(--c-secondary)}
.ox-orbit .ox-album .photo-zoom{border-radius:160px 160px 0 0}
.ox-sunny .ox-album .c-photo{border-bottom:3px solid var(--c-ink)}
.collection-page .ox-closing{text-align:center;border-top:1px solid color-mix(in srgb,var(--c-ink) 25%,transparent);padding-top:64px;padding-bottom:70px}
.ox-closing-symbol{display:block;font-size:90px;line-height:1.2;color:var(--c-accent);margin-bottom:24px}
.ox-closing .ox-intro{margin:25px auto 0}.ox-closing .ox-link{margin-top:28px}
.ox-page .c-footer{background:var(--c-bg);color:var(--c-ink);border-top:1px solid color-mix(in srgb,var(--c-ink) 25%,transparent)}
.ox-page .gt-opening{font-family:var(--c-body)}
@media(min-width:900px){.ox-orbit .ox-scene{padding-bottom:42px}.ox-sunny .ox-scene{padding-top:40px}.ox-sunny-poster{min-height:420px}.ox-radio-heading .ox-title{font-size:calc(70px*var(--c-scale))}}
@media(max-width:600px){
 .ox-scene{padding:24px 24px 30px}.ox-meta{gap:16px;padding-bottom:17px}.ox-meta .ox-label{font-size:8px;max-width:190px}.ox-date{font-size:21px}
 .ox-cover .ox-title{font-size:calc(clamp(36px,10.5vw,56px)*var(--c-scale));line-height:1.3;letter-spacing:-.035em}
 .ox-subtitle{font-size:12px;margin-top:15px}.ox-dedication p{font-size:20px}.ox-dedication .ox-label{font-size:8px}
 .ox-deck{display:block;padding:24px}.ox-deck>p{font-size:12px;margin:0}.ox-deck .ox-link{margin-top:14px}
 .ox-radio-heading{margin:34px -5px 54px}.ox-radio-device{padding:15px 16px 12px;border-radius:19px;box-shadow:5px 6px 0 var(--c-ink)}
 .ox-radio-handle{height:27px;top:-28px;border-width:6px}.ox-radio-brand{padding-bottom:13px;font-size:7px}.ox-radio-brand>span:first-child{font-size:11px}
 .ox-radio-face{gap:14px}.ox-speaker{border-width:5px}.ox-speaker>span{width:33px;height:33px}.ox-speaker svg{width:18px;height:18px}
 .ox-tuner{padding:8px}.ox-tuner .ox-label{font-size:6px;letter-spacing:.035em}.ox-tuner strong{font-size:29px}.ox-tuner-scale{height:13px;background-size:auto}
 .ox-dials{gap:10px;margin-top:12px}.ox-dials i{width:28px;border-width:2px}.ox-dials i:after{height:9px;top:3px}.ox-dials span{font-size:5px}.ox-radio-foot{font-size:6px;margin-top:15px;padding-top:10px}
 .ox-radio-device+.ox-dedication{margin-top:30px}.ox-orbit-heading{margin-top:38px}.ox-orbit-art{width:calc(100% + 26px);max-width:none;margin:6px -13px -6px}
 .ox-orbit .ox-title{font-size:calc(49px*var(--c-scale))}.ox-orbit .ox-subtitle{max-width:240px;margin:18px auto 0}
 .ox-sunny-poster{display:flex;flex-direction:column;align-items:flex-start;padding:28px 0 0;gap:0}
 .ox-sunny .ox-title{font-size:calc(clamp(58px,17vw,78px)*var(--c-scale));line-height:1.15;font-weight:500;letter-spacing:-.06em}
 .ox-sunny-art{width:68%;align-self:flex-end;margin:-2px -3px -9px 0}.ox-sunny-seal{width:67px;height:67px;font-size:10px;bottom:8px;right:-2px}
 .ox-sunny .ox-subtitle{font-size:12px;max-width:210px;margin-top:0}.ox-sunny .ox-dedication{display:block;margin-top:22px;padding-top:15px;margin-bottom:22px}.ox-sunny .ox-dedication p{margin-top:4px;font-size:17px}
 .ox-checker{margin-inline:-24px;height:24px;background-size:24px 24px}
 .collection-page .ox-section{padding:52px 24px}.ox-letter-layout{display:block}.ox-section-symbol{font-size:54px;margin-bottom:22px}.ox-letter-copy{margin-top:30px}
 .ox-message{font-size:13px;line-height:2}.ox-section .ox-heading h2{font-size:calc(34px*var(--c-scale))}.ox-section .ox-label{font-size:8px}.ox-signature{font-size:16px}
 .ox-moment{gap:16px;grid-template-columns:40px 1fr;padding:24px 0}.ox-moment h3{font-size:23px}.ox-moment h3+p{font-size:12px}
 .ox-radio.ox-story .ox-moment{grid-template-columns:42px 1fr}.ox-radio.ox-story .ox-number{width:38px;height:38px;font-size:17px}
 .ox-orbit .ox-moments,.ox-sunny .ox-moments{display:flex;flex-direction:column;gap:20px}.ox-orbit .ox-moment{display:grid;grid-template-columns:44px 1fr;gap:18px}.ox-orbit .ox-number{font-size:30px;margin:0}
 .ox-sunny .ox-moment{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:26px 22px}.ox-sunny .ox-moment:nth-child(2){border-radius:0 40px 0 0;padding-top:26px}.ox-sunny .ox-moment:nth-child(3){border-radius:0 0 40px 0}
 .ox-album{gap:14px}.ox-radio .ox-album .c-photo{padding:7px 7px 0}.ox-album figcaption{font-size:10px}.ox-closing .ox-heading h2{font-size:calc(33px*var(--c-scale))}
 .ox-page .c-nav{padding:15px 20px}.ox-page .c-nav>a{max-width:42%;font-size:10px;overflow-wrap:anywhere}.ox-page .c-nav>div{gap:14px}.ox-page .c-nav a{font-size:9px}
}
/* Catalog miniatures have a fixed 800 × 1100 canvas, independent of viewport. */
.collection-thumb .c-miniature .ox-cover{padding:0;height:1100px;min-height:1100px;width:800px;display:block}
.ox-compact .ox-scene{padding:42px 54px 40px;max-width:none;height:1100px;display:flex;flex-direction:column}
.ox-compact .ox-meta{padding-bottom:24px}.ox-compact .ox-meta .ox-label{font-size:12px;max-width:none}.ox-compact .ox-date{font-size:32px}
.ox-compact .ox-title{font-size:86px!important;line-height:1.28;letter-spacing:-.04em}.ox-compact .ox-subtitle{font-size:19px;max-width:none;margin-top:24px}
.ox-compact .ox-radio-heading{margin:44px -15px 68px}.ox-compact.ox-radio .ox-title{font-size:78px!important}.ox-compact .ox-radio-device{width:610px;max-width:none;padding:23px 28px 16px;border-radius:28px;box-shadow:7px 9px 0 var(--c-ink)}
.ox-compact .ox-radio-handle{height:36px;top:-37px;border-width:8px}.ox-compact .ox-radio-brand{font-size:10px;padding-bottom:18px}.ox-compact .ox-radio-brand>span:first-child{font-size:16px}
.ox-compact .ox-radio-face{gap:24px}.ox-compact .ox-speaker{border-width:9px}.ox-compact .ox-speaker>span{width:54px;height:54px}.ox-compact .ox-speaker svg{width:24px;height:24px}
.ox-compact .ox-tuner{padding:14px 16px}.ox-compact .ox-tuner .ox-label{font-size:8px}.ox-compact .ox-tuner strong{font-size:45px}.ox-compact .ox-tuner-scale{height:17px}
.ox-compact .ox-dials{gap:16px;margin-top:20px}.ox-compact .ox-dials i{width:43px;border-width:3px}.ox-compact .ox-dials i:after{height:13px;top:4px}.ox-compact .ox-dials span{font-size:7px}.ox-compact .ox-radio-foot{font-size:8px;margin-top:20px;padding-top:13px}
.ox-compact .ox-dedication{margin-top:auto;padding-top:32px}.ox-compact .ox-dedication .ox-label{font-size:11px}.ox-compact .ox-dedication p{font-size:30px}
.ox-compact .ox-orbit-heading{margin:54px 0 0}.ox-compact .ox-orbit-art{width:680px;max-width:none;margin:0 auto -20px;flex-shrink:0}.ox-compact.ox-orbit .ox-title{font-size:94px!important}
.ox-compact.ox-sunny .ox-scene{padding-bottom:0}.ox-compact .ox-sunny-poster{display:flex;flex-direction:column;align-items:flex-start;padding-top:46px;gap:0;min-height:0}
.ox-compact.ox-sunny .ox-title{font-size:128px!important;line-height:1.14}.ox-compact .ox-sunny-art{width:390px;align-self:flex-end;margin:-48px -4px -30px 0}.ox-compact .ox-sunny-seal{width:98px;height:98px;font-size:14px}
.ox-compact.ox-sunny .ox-subtitle{max-width:350px;margin-top:0;font-size:20px}.ox-compact.ox-sunny .ox-dedication{display:block;padding-top:20px;margin-bottom:28px}.ox-compact.ox-sunny .ox-dedication p{font-size:27px;margin-top:6px}
.ox-compact .ox-checker{margin-inline:-54px;height:36px;min-height:36px;background-size:36px 36px}
@media(prefers-reduced-motion:reduce){.ox-cover *,.ox-section *{animation:none!important;scroll-behavior:auto}}