/* Studio Monjo · what every page shares, September 2026.
   Colours kept from the studio: navy #16243F, white, ink #131A2A, seal red #B0392E.
   Robey speaks in the pen hand of his printed letter cards; the studio speaks in Gowun Batang.
   The fonts are self-hosted subsets, declared in each page's head by scripts/build-studio.py. */

:root {
  --navy: #16243F;
  --navy-photo: #0d1e33;     /* the navy linen of the product photographs */
  --ink: #131A2A;
  --brown: #3a2f28;          /* the ink colour of the letter cards */
  --red: #B0392E;
  --text: #4a423c;
  --muted: #7a6f66;
  --hair: rgba(58, 47, 40, .16);
  --hand: "Nanum Pen Script", "Gaegu", cursive;
  --book: "Gowun Batang", "Noto Serif KR", Georgia, serif;
  --ui: "Gowun Dodum", "Noto Sans KR", system-ui, sans-serif;
  --gutter: clamp(20px, 5.5vw, 88px);
  --paper: #fcf9f3 url("/media/web/world/img/paper.webp");
  --card: #fbf6ec url("/media/web/world/img/card.webp");
  --navy-tex: #16243F url("/media/web/world/img/navy.webp");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.7 var(--book); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }   /* width and height attributes reserve space; they never fix the height */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: #fff; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font: 400 14px/1.4 var(--ui); }
.skip:focus { left: 12px; }

.eyebrow { font: 400 12px/1.3 var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--red); margin: 0 0 22px; }
[data-theme="dark"] .eyebrow, .navy .eyebrow, .reader .eyebrow { color: rgba(255,255,255,.62); }
.quiet-link { display: inline-block; margin-top: 10px; font: 400 13px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: 7px; border-bottom: 1px solid currentColor; opacity: .85; transition: opacity .3s; }
.quiet-link:hover { opacity: 1; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ——— Header: the wordmark and the three languages ——— */
.top { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter) 0; color: var(--ink); }
.brand { display: block; }
.brand svg { width: 118px; height: 23px; fill: currentColor; }
.lang { display: flex; gap: 2px; align-items: center; margin-right: -7px; }
.lang a { position: relative; padding: 8px 7px; font: 400 12px/1 var(--ui); letter-spacing: .16em; text-decoration: none; opacity: .5; transition: opacity .3s; }
.lang a:hover { opacity: .85; }
.lang a[aria-current] { opacity: 1; }
.lang a[aria-current]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1px; background: currentColor; }
.lang a[lang="ko"] { letter-spacing: .04em; }
.lang a:focus-visible { outline-offset: 1px; border-radius: 3px; }
@media (max-width: 760px) { .brand svg { width: 100px; height: 20px; } .lang a { padding: 8px 6px; font-size: 11.5px; } }

/* ——— Robey's postcard ——— */
.pcard { position: relative; background: var(--card); border-radius: 3px; box-shadow: 0 1px 1px rgba(40,30,20,.1), 0 30px 60px -24px rgba(40,30,20,.45); display: grid; grid-template-columns: 40% 1fr; padding: 28px; gap: 28px; aspect-ratio: 148 / 100; color: var(--brown); }
.pc-art { position: relative; border-right: 1px dashed rgba(58,47,40,.25); padding-right: 18px; container-type: size; }
/* Robey keeps the shape of his drawing (2:3). The painter's canvas stretches to its box, so the box itself has that shape. */
.pc-art img, .pc-art canvas { position: absolute; top: 50%; left: calc(50% - 9px); width: calc(100% - 18px); height: auto; aspect-ratio: 2 / 3; transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.pc-text { align-self: center; padding: 14px 58px 0 0; }
.pc-text p { margin: 0 0 10px; font: 400 clamp(22px, 1.9vw, 27px)/1.2 var(--hand); color: var(--brown); }
.pc-stamp { position: absolute; right: 24px; top: 22px; width: 58px; height: 70px; border: 2px dotted rgba(176,57,46,.55); display: grid; place-items: center; transform: rotate(4deg); }
.pc-stamp svg { width: 32px; height: 32px; fill: var(--red); }
@media (max-width: 760px) {
  .pcard { aspect-ratio: auto; grid-template-columns: 30% 1fr; padding: 16px 18px; gap: 14px; }
  .pc-art { padding: 0 10px 0 0; min-height: 150px; }
  .pc-art img, .pc-art canvas { left: calc(50% - 5px); width: calc(100% - 10px); }
  .pc-text { padding: 0; }
  .pc-text p { font-size: 20px; margin-bottom: 5px; }
  .pc-stamp { display: none; }
}

/* ——— A photograph kept as a print ——— */
.print { display: block; margin: 0; background: #fbf7ef; padding: 10px 10px 12px; box-shadow: 0 22px 44px -22px rgba(40,30,20,.5); transform: rotate(var(--tilt, 0deg)); }
.print img { display: block; width: 100%; height: auto; }
.print figcaption { margin: 10px 2px 0; font: 400 19px/1.25 var(--hand); color: var(--brown); text-wrap: balance; }
.tilt-l { --tilt: -1.4deg; }
.tilt-r { --tilt: 1.4deg; }

/* ——— Windows drawn around the films, in pale ink, a little uneven like a hand ——— */
[data-window] { position: relative; }
[data-window] video { position: relative; z-index: 0; }
.win { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 44px); max-width: none; overflow: visible; pointer-events: none; z-index: 1; }
.win path { fill: none; stroke: #efe6d6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1); }
.win path.w1 { stroke-width: 1.7; opacity: .85; } .win path.w2 { stroke-width: 1.1; opacity: .6; } .win path.w3 { stroke-width: 1.4; opacity: .75; }
.win.drawn path { stroke-dashoffset: 0; }
.win.drawn path:nth-child(2) { transition-delay: .25s; } .win.drawn path:nth-child(3) { transition-delay: .5s; } .win.drawn path:nth-child(4) { transition-delay: .7s; }

/* ——— Footer ——— */
.foot { background: var(--paper); color: var(--ink); text-align: center; padding: 8vh 24px 7vh; border-top: 1px solid var(--hair); }
.foot-home { display: inline-block; }
.foot-mark { width: 40px; height: 40px; margin: 0 auto 20px; fill: var(--ink); }
.foot-line { margin: 0; font: 400 18px/1.5 var(--book); }
.foot-place { margin: 6px 0 0; font: 400 14px/1.5 var(--book); color: var(--muted); }
.foot-nav { margin: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
.foot-nav a { font: 400 15.5px/1.5 var(--book); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s; }
.foot-nav a:hover, .foot-nav a[aria-current] { background-size: 100% 1px; }
.foot-links { margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.foot-links a { font: 400 12px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; opacity: .8; }
.foot-links a:hover { opacity: 1; }
.foot-credit { margin: 34px 0 0; font: 400 11.5px/1.5 var(--ui); letter-spacing: .06em; color: var(--muted); }

/* ——— Korean ——— */
html[lang="ko"] body { word-break: keep-all; }
html[lang="ko"] :is(.eyebrow, .quiet-link, .foot-links a, .lang a) { letter-spacing: .06em; }
html[lang="ko"] .pc-text p { line-height: 1.34; }
/* As large as the card allows in both directions, never stretched. */
@supports (width: 1cqh) { .pc-art img, .pc-art canvas { width: min(100cqw, 100cqh * 2 / 3); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }