/* doaisland: a lime-plaster wall with ochre, terracotta and umber pigment; a hand-drawn spiral of words around tonight's moon,
   and the hand offering a flower beside it. Deliberately one light theme: a fresco is seen in daylight. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --bg:#EEE4D2;        /* lime plaster */
  --paper:#F5EEE2;     /* fresh plaster patch */
  --ink:#3E2618;       /* burnt umber line */
  --quiet:#7A5A45;
  --line:#D9C7AE;
  --ochre:#C98F3E;     /* yellow ochre */
  --terra:#B4532C;     /* terracotta red, the drawing line */
  --leaf:#7D8657;      /* faded fresco green, used once or twice */
  --moon:#E2B25C;
  --moon-dark:#DDCCB1;
  --display:"Fraunces","Gowun Batang",Georgia,serif;
  --body:"Gowun Batang","Noto Serif KR",Georgia,serif;
  --hand:"Nanum Pen Script","Gowun Batang",cursive;
  color-scheme:light;
}
body{color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.85;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html:lang(ko) body{word-break:keep-all}
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='5' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .22 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");background-size:160px 160px,cover;background-repeat:repeat,no-repeat;background-position:0 0,center}

.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;padding-block:48px 88px;display:flex;flex-direction:column;gap:80px}
h1,h2{font-family:var(--display);font-weight:300;text-wrap:balance;margin:0}
p{margin:0}
.label{font-family:var(--hand);font-size:22px;line-height:1;color:var(--terra)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* hero: one vertical axis. The turning spiral is the gate, tonight's moon its centre; the hand with the flower is a small seal between the moon and the name */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.spiral{position:relative;width:min(100%,480px);aspect-ratio:1}
.spiral svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.spiral text{font-family:var(--hand);font-size:16.5px;fill:var(--terra)}
html:lang(ko) .spiral text{font-size:17px}
#moon{position:absolute;left:35%;top:35%;width:30%;height:30%}
.tonight{font-family:var(--hand);font-size:21px;color:var(--terra);margin-top:6px}
.fresco{margin:26px 0 0;width:124px;position:relative}
.fresco .frame{position:relative;width:100%;aspect-ratio:265/360;overflow:hidden;border-radius:46% 54% 44% 56% / 38% 40% 60% 62%;
  -webkit-mask:radial-gradient(closest-side,#000 74%,transparent 100%);mask:radial-gradient(closest-side,#000 74%,transparent 100%)}
.fresco .frame img{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto}
.name{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:26px}
.hero h1{font-family:"IM Fell English",var(--display);font-weight:400;font-style:normal;font-size:clamp(44px,8vw,64px);line-height:1.05;letter-spacing:.04em;margin-right:-.04em;color:#4A2C1E;filter:url(#stamp)}
.hero .grace{font-family:"IM Fell English",var(--display);font-style:normal;font-weight:400;font-size:clamp(16px,2.8vw,19px);letter-spacing:.02em;color:var(--quiet);filter:url(#stamp)}
@media (max-width:540px){.fresco{width:108px}}

/* letter: a fresh plaster patch */
.letter{background:var(--paper);padding:34px clamp(20px,5vw,40px);display:flex;flex-direction:column;gap:20px;
  border-radius:22px 6px 26px 8px / 8px 24px 6px 20px;box-shadow:0 1px 0 var(--line),inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)}
.letter h2{font-size:34px}
.letter h2 span{font-family:var(--body);color:var(--ochre);font-size:.55em;margin-left:.4em}
.entry{display:flex;flex-direction:column;gap:4px;padding-bottom:6px}
.entry .word{font-family:var(--display);font-size:24px;line-height:1.4;color:var(--ink)}
.entry .word{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.entry .word .hangul{font-family:"Song Myung","Gowun Batang",serif;font-size:36px;line-height:1.1;letter-spacing:.04em;color:#7A4A5D}
.entry .gloss{font-family:var(--display);font-style:italic;font-weight:300;color:var(--quiet)}
.lead{font-family:var(--display);font-style:normal;font-weight:300;font-size:21px;line-height:1.5;letter-spacing:0;color:var(--ink);text-wrap:balance}
.next{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums;color:var(--quiet)}
.next b{font-weight:400;color:var(--terra)}
.player{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);color:var(--quiet)}
.player .dot{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--terra);display:grid;place-items:center;flex:none}
.player .dot::before{content:"";border-left:9px solid var(--terra);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:3px}
.player p{font-size:15.5px;line-height:1.5;font-style:italic}
.archive{display:flex;flex-direction:column;gap:8px}
.archive ul{margin:0;padding:0}
.archive li{list-style:none;font-size:15.5px;color:var(--quiet)}

section{display:flex;flex-direction:column;gap:18px}
section h2{font-size:30px;display:flex;align-items:center;gap:12px}
section h2::before{content:"";width:22px;height:22px;flex:none;background:var(--c,var(--terra));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c0-1 1-1.6 1.8-1.2 1.3.6 1.2 2.6-.2 3.4-1.9 1.1-4.3-.2-4.6-2.4-.4-2.8 2-5 4.8-4.8 3.6.3 5.6 3.9 4.7 7.2-1 3.9-5.4 5.9-9 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c0-1 1-1.6 1.8-1.2 1.3.6 1.2 2.6-.2 3.4-1.9 1.1-4.3-.2-4.6-2.4-.4-2.8 2-5 4.8-4.8 3.6.3 5.6 3.9 4.7 7.2-1 3.9-5.4 5.9-9 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
#receive{--c:var(--ochre)}
#practice{--c:var(--leaf)}
.join{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.addr{font-family:var(--display);font-size:16px;padding:9px 14px;border-bottom:1.5px solid var(--ink);user-select:all;min-width:0;overflow-wrap:anywhere}
button{font-family:var(--hand);font-size:23px;line-height:1;padding:9px 18px 7px;border-radius:18px 6px 16px 8px / 8px 16px 6px 18px;border:1.5px solid var(--terra);background:transparent;color:var(--terra);cursor:pointer}
button:hover{background:var(--terra);color:var(--paper)}
.copied{font-family:var(--hand);font-size:20px;color:var(--quiet)}
.verse{font-family:var(--display);font-style:italic;font-weight:300;font-size:16px;line-height:1.95;color:var(--quiet);margin:20px 0;padding-left:22px;border-left:2px solid var(--ochre)}
.verse span{display:block}
.sub{font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink)}
footer{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-top:8px}
footer .ripple{width:min(100%,520px);height:auto;overflow:visible;margin-top:-10px}
footer .sunmoon{width:64px;height:auto;overflow:visible}
footer .sign{font-family:var(--hand);font-size:19px;line-height:1.35;color:var(--quiet)}
footer .copy{font-family:var(--display);font-size:12px;letter-spacing:.06em;color:var(--quiet)}
@media (prefers-reduced-motion:no-preference){.spiral svg{animation:turn 180s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}}

/* ---- added for the live site ---- */
a.inl, section p a, .lbody a{border-bottom:1px solid color-mix(in srgb,var(--terra) 45%,transparent)}
.langswitch{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));font-family:var(--hand);font-size:21px;line-height:1;color:var(--terra)}
.langswitch:hover{border-bottom:1px solid var(--terra)}

/* the reading: the dot becomes a real play button once a letter exists */
.player button.dot{padding:0;background:transparent;cursor:pointer;border-radius:50%}
.player button.dot:hover{background:color-mix(in srgb,var(--terra) 10%,transparent)}
.player.playing button.dot::before{border:0;margin:0;width:11px;height:13px;background:linear-gradient(90deg,var(--terra) 0 34%,transparent 34% 66%,var(--terra) 66%)}
.player .pbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.player p.ptitle{font-family:var(--display);font-style:normal;font-size:17px;color:var(--ink)}
.player p.ptitle a{border-bottom:1px solid var(--line)}
.player p.pmeta{font-style:normal;font-size:13.5px;font-family:var(--display);font-variant-numeric:tabular-nums}
.player .bar{position:relative;height:14px;cursor:pointer;touch-action:none}
.player .bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line);border-radius:2px}
.player .bar span{position:absolute;left:0;top:6px;height:2px;width:0;background:var(--terra);border-radius:2px}
.archive li a{border-bottom:1px solid var(--line)}
.archive li a:hover{border-bottom-color:var(--terra)}
.archive li .d{font-family:var(--display);font-size:14px;font-variant-numeric:tabular-nums;margin-right:.7em}

/* subscribe */
.subscribe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative}
.subscribe input[type=email]{box-sizing:border-box;flex:1 1 220px;min-width:0;font-family:var(--display);font-size:17px;line-height:1.4;padding:9px 4px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.subscribe input[type=email]::placeholder{color:color-mix(in srgb,var(--quiet) 75%,transparent)}
.subscribe input[type=email]:focus{border-bottom-color:var(--terra)}
.subscribe .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.subscribe button[disabled]{opacity:.55;cursor:default;background:transparent;color:var(--terra)}
.formmsg{font-family:var(--hand);font-size:21px;line-height:1.3;color:var(--terra)}
.formmsg.bad{color:#8E2F1C}
.formnote{font-size:14px;line-height:1.65;color:var(--quiet)}
.formnote summary{cursor:pointer;display:inline;list-style:none;border-bottom:1px dotted var(--quiet)}
.formnote summary::-webkit-details-marker{display:none}
.formnote details p{margin-top:6px}
.alt{font-size:15.5px;color:var(--quiet);margin-top:6px}

/* next gathering */
.gathering{display:flex;flex-direction:column;gap:6px;padding:14px 18px;border-left:2px solid var(--leaf);background:color-mix(in srgb,var(--paper) 70%,transparent);border-radius:4px 16px 6px 14px}
.gathering .label{color:var(--leaf)}
.gathering .when{font-family:var(--display);font-size:18px;color:var(--ink)}
.gathering .note{font-size:15.5px;color:var(--quiet)}

/* a single letter's page */
.crumbs{display:flex;justify-content:space-between;align-items:baseline}
.crumbs a{font-family:var(--hand);font-size:23px;color:var(--terra)}
.ltitle{font-family:var(--display);font-weight:300;font-size:clamp(30px,6.4vw,42px);line-height:1.3;color:var(--ink);text-wrap:balance}
.lbody{display:flex;flex-direction:column;gap:1.05em;font-size:17.5px;line-height:1.95}
.lsign{font-family:var(--hand);font-size:23px;color:var(--quiet);text-align:right;margin-top:6px}
.notice{font-family:var(--hand);font-size:22px;color:var(--terra);text-align:center}
.center{text-align:center;align-items:center}
.subwrap{display:flex;flex-direction:column;gap:10px}
.altwrap{display:flex;flex-direction:column;gap:4px}
/* the turning spiral's square box grows past narrow screens while it rotates; its words stay inside the circle, so clip the box */
.spiral{overflow:clip;overflow-clip-margin:14px}