@charset "UTF-8";
:root {
  --ylc-ground: #E7FBF9;
  --ylc-ink: #2C1C21;
  --ylc-accent: #7D314A;
  --ylc-support: #D9C1E2;
  --ylc-surface: #FFFFFF;
  --ylc-fold: #BCE4DE;
  --ylc-serif: "Averia Serif Libre", Georgia, serif;
  --ylc-body: "Sawarabi Gothic", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--ylc-ink); background: var(--ylc-ground); font-family: var(--ylc-body); font-size: 18px; line-height: 1.8; }
a { color: var(--ylc-accent); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .18s, text-underline-offset .18s; }
a:hover { text-decoration-thickness: 2px; text-underline-offset: .35em; }
a:focus-visible { outline: 3px solid var(--ylc-accent); outline-offset: 5px; background: var(--ylc-surface); }
svg, img { max-width: 100%; }
[data-lucide] { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
[data-lucide] svg { width: 100%; height: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--ylc-serif); font-weight: 400; line-height: 1.12; text-wrap: balance; }
p { text-wrap: pretty; }
.ylc-skip { position: absolute; top: -90px; left: 20px; z-index: 100; background: var(--ylc-surface); padding: 12px 20px; }
.ylc-skip:focus { top: 12px; }
.ylc-shell { width: calc(100% - 160px); max-width: 1440px; margin-inline: auto; }
.ylc-masthead { height: 190px; position: relative; }
.ylc-wire-home { position: absolute; top: 2px; left: -13px; width: 330px; height: 181px; background: url("club-clip.svg") center / 100% 100% no-repeat; }
.ylc-name { position: absolute; top: 32px; left: 61px; display: block; font-family: var(--ylc-serif); font-size: 30px; line-height: 1.04; color: var(--ylc-ink); text-decoration: none; }
.ylc-name span { display: block; }
.ylc-name:hover { color: var(--ylc-accent); }
.ylc-thread-nav { position: absolute; left: 67px; top: 101px; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.4; }
.ylc-thread-nav a { display: flex; gap: 9px; align-items: center; width: fit-content; padding-block: 1px; text-decoration: none; }
.ylc-thread-nav a:hover { text-decoration: underline; }
.ylc-thread-nav [data-lucide] { width: 16px; height: 16px; flex-basis: 16px; }
.ylc-head-question { position: absolute; top: 39px; left: 41%; max-width: 405px; }
.ylc-head-question p:first-child { font-size: 15px; color: var(--ylc-accent); margin-bottom: 8px; }
.ylc-head-question p:last-child { font-family: var(--ylc-serif); font-size: 29px; line-height: 1.2; }
.ylc-head-revision { position: absolute; top: 38px; right: 0; width: 142px; min-height: 102px; padding: 20px 12px; border: 2px solid var(--ylc-accent); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--ylc-serif); font-size: 18px; line-height: 1.15; color: var(--ylc-accent); transform: rotate(9deg); }
.ylc-home-opening { width: calc(100% + 160px); margin-inline: -80px; }
.ylc-hero-stage { position: relative; isolation: isolate; min-height: 514px; display: flex; align-items: center; }
.ylc-hero-photo { position: absolute; z-index: -1; inset: 0; background-color: var(--ylc-fold); background-size: cover; background-position: center 56%; }
.ylc-question-slip { position: relative; width: 53%; padding: 54px 61px 39px 80px; margin-block: 33px; background: var(--ylc-fold); clip-path: polygon(0 0,100% 0,99% 10%,99.8% 22%,98.7% 37%,99.5% 50%,98% 64%,99% 78%,97.7% 90%,98.5% 100%,0 100%); }
.ylc-question-slip::before { content: ""; position: absolute; width: 11px; height: 11px; top: 22px; left: 81px; border-radius: 50%; background: var(--ylc-accent); box-shadow: 34px 0 0 var(--ylc-accent), inset 0 2px 2px #2C1C2160; }
.ylc-question-slip::after { content: ""; position: absolute; width: 35px; height: 35px; right: 16px; bottom: 0; background: var(--ylc-ground); clip-path: polygon(0 100%,100% 0,100% 100%); }
.ylc-home-opening h1 { font-size: 56px; line-height: 1.03; max-width: 600px; text-wrap: initial; }
.ylc-home-opening h1 span { display: block; color: var(--ylc-accent); }
.ylc-promise-mention { margin-top: 26px; padding-top: 16px; border-top: 3px solid var(--ylc-accent); font-size: 16px; line-height: 1.65; max-width: 570px; }
.ylc-pencil { position: absolute; width: 171px; height: 10px; background: #D4AC67; border-top: 2px solid #E5C890; border-bottom: 2px solid #9B7843; bottom: 24px; left: calc(53% - 92px); transform: rotate(-19deg); z-index: 2; box-shadow: 1px 4px 3px #2C1C2133; animation: ylc-pencil-settle .7s ease-out both; }
.ylc-pencil::before { content: ""; position: absolute; left: -11px; top: -2px; width: 16px; height: 10px; background: #C78585; border-right: 6px solid #B8B5B2; }
.ylc-pencil::after { content: ""; position: absolute; right: -26px; top: -2px; width: 27px; height: 10px; background: linear-gradient(to right,#DCC39C 75%,#40363A 75%); clip-path: polygon(0 0,100% 50%,0 100%); }
@keyframes ylc-pencil-settle { from { transform: translate(9px,-8px) rotate(-13deg); } to { transform: translate(0,0) rotate(-19deg); } }
.ylc-photo-caption { font-size: 14px; line-height: 1.6; color: var(--ylc-accent); margin-top: 13px; }
.ylc-hero-caption { text-align: right; padding-inline: 80px; }
.ylc-welcome { max-width: 880px; margin: 32px auto 0; font-family: var(--ylc-serif); font-size: 25px; line-height: 1.45; text-align: center; padding-inline: 20px; }
.ylc-scrapbook { margin-top: 74px; }
.ylc-cluster-heading { display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--ylc-accent); padding-top: 22px; }
.ylc-cluster-heading h2 { font-size: 42px; }
.ylc-cluster-heading p { font-size: 16px; color: var(--ylc-accent); }
.ylc-cluster { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 36px; padding: 0 14px 25px; }
.ylc-sheet { position: relative; isolation: isolate; padding: 39px 66px 68px; filter: drop-shadow(3px 9px 0 #7D314A20) drop-shadow(1px 7px 8px #2C1C2112); }
.ylc-sheet::before { content: ""; position: absolute; inset: 0; background: var(--ylc-surface); z-index: -1; clip-path: polygon(0 .5%,12% 0,25% .4%,46% 0,61% .2%,78% 0,99.7% .4%,100% 33%,99.6% 72%,100% 99.2%,90% 99.5%,77% 99.1%,62% 99.8%,48% 99.4%,32% 100%,20% 99.3%,.4% 99.8%,0 83%,.5% 62%,0 35%); }
.ylc-sheet-one { transform: rotate(-1.25deg) translateX(9px); padding-right: 72px; }
.ylc-sheet-two { transform: rotate(1.15deg); margin-top: 69px; margin-left: -20px; padding-left: 68px; }
.ylc-sheet-three { grid-column: 1 / -1; width: 74%; justify-self: center; margin-top: -30px; transform: rotate(-.5deg); padding: 40px 76px 54px; }
.ylc-sheet-number { color: var(--ylc-accent); font-family: var(--ylc-serif); font-size: 78px; line-height: 1; margin: 0 0 12px -8px; }
.ylc-sheet h3 { font-size: 35px; max-width: 440px; margin-bottom: 25px; }
.ylc-sheet p:not(.ylc-sheet-number) { font-size: 17px; line-height: 1.85; margin-bottom: 19px; }
.ylc-long-read { display: inline; font-size: 16px; line-height: 1.5; }
.ylc-edge-photo { position: absolute; width: 147px; height: 174px; border: 10px solid var(--ylc-surface); background-color: var(--ylc-fold); background-size: cover; box-shadow: 3px 5px 0 #7D314A30, 1px 8px 12px #2C1C211C; z-index: 1; }
.ylc-edge-photo::before { content: ""; position: absolute; height: 20px; width: 60px; top: -20px; left: 25%; background: #BCE4DEE6; transform: rotate(-6deg); clip-path: polygon(3% 0,96% 6%,100% 95%,0 100%); }
.ylc-sheet-one .ylc-edge-photo { left: -82px; top: 202px; transform: rotate(-7deg); background-position: 47% center; }
.ylc-sheet-two .ylc-edge-photo { right: -75px; top: 95px; transform: rotate(7deg); background-position: 48% center; }
.ylc-sheet-three .ylc-edge-photo { right: -86px; bottom: 58px; transform: rotate(5deg); background-position: 50% center; }
.ylc-revision { max-width: 880px; margin: 73px auto 0; border-left: 6px solid var(--ylc-accent); padding: 17px 0 18px 33px; }
.ylc-revision h2 { font-size: 36px; margin-bottom: 22px; }
.ylc-revision p + p { margin-top: 20px; }
.ylc-crumb { font-size: 14px; margin: 3px 0 24px; display: flex; flex-wrap: wrap; gap: 11px; }
.ylc-entry-opening h1 { max-width: 1040px; font-size: 53px; line-height: 1.1; margin-bottom: 22px; }
.ylc-deck { max-width: 800px; font-size: 20px; line-height: 1.6; }
.ylc-entry-opening figure { position: relative; margin-top: 33px; }
.ylc-entry-photo { height: 251px; width: calc(100% + 80px); margin-left: -40px; background-size: cover; background-position: center 56%; background-color: var(--ylc-fold); border-bottom: 9px solid var(--ylc-accent); clip-path: polygon(0 0,99% 0,100% 94%,98% 100%,0 100%); }
.ylc-entry-opening figcaption { position: relative; margin: -26px 16px 0 auto; width: fit-content; max-width: 77%; padding: 15px 24px; background: var(--ylc-ground); border-left: 4px solid var(--ylc-accent); transform: rotate(-1deg); }
.ylc-entry-layout { display: grid; grid-template-columns: minmax(0,900px) 230px; gap: 60px; align-items: start; margin-top: 46px; }
.ylc-reading-sheet { position: relative; isolation: isolate; background: var(--ylc-surface); padding: 50px 64px 60px; box-shadow: 8px 10px 0 var(--ylc-fold); border-top: 5px solid var(--ylc-accent); }
.ylc-reading-sheet::after { content: ""; position: absolute; height: 10px; bottom: -9px; left: 0; right: 0; background: var(--ylc-surface); clip-path: polygon(0 0,100% 0,100% 50%,95% 70%,89% 35%,81% 65%,72% 40%,65% 80%,57% 35%,48% 75%,39% 30%,30% 65%,22% 40%,13% 100%,6% 45%,0 80%); }
.ylc-reading-sheet h2 { font-size: 32px; margin: 38px 0 20px; }
.ylc-reading-sheet h2:first-child { margin-top: 0; }
.ylc-reading-sheet p { margin-bottom: 22px; }
.ylc-note { position: relative; background: var(--ylc-fold); border-left: 5px solid var(--ylc-accent); padding: 26px 29px; margin: 35px -32px 39px 17px; transform: rotate(-1deg); box-shadow: 6px 6px 0 #7D314A24; }
.ylc-note h2 { display: flex; align-items: start; gap: 12px; font-size: 27px; margin: 0 0 12px; }
.ylc-note h2 [data-lucide] { margin-top: 4px; }
.ylc-note p { font-size: 17px; line-height: 1.75; margin: 0; }
.ylc-side-reading { position: sticky; top: 30px; font-size: 15px; line-height: 1.7; padding-top: 18px; border-top: 3px solid var(--ylc-accent); }
.ylc-side-reading h2 { font-size: 25px; margin-bottom: 15px; }
.ylc-side-reading ul { list-style: none; margin: 0; padding: 0; }
.ylc-side-reading li { padding: 8px 0; }
.ylc-side-reading a[aria-current="page"] { color: var(--ylc-ink); text-decoration-style: double; }
.ylc-bookmark { margin-top: 29px; padding: 19px 0; border-top: 2px solid var(--ylc-fold); color: var(--ylc-accent); }
.ylc-bookmark [data-lucide] { width: 26px; height: 26px; margin-bottom: 12px; display: block; }
.ylc-comparison { margin: 30px 0; }
.ylc-compare-row { padding: 23px 0; border-bottom: 2px solid var(--ylc-fold); display: grid; grid-template-columns: 145px 1fr; gap: 17px; }
.ylc-compare-row h3 { font-size: 25px; }
.ylc-compare-row p { font-size: 16px; line-height: 1.7; margin: 0; }
.ylc-compare-row p span { display: block; color: var(--ylc-accent); margin-bottom: 4px; }
.ylc-question { padding: 27px 0 8px; border-top: 3px solid var(--ylc-fold); }
.ylc-question h2 { margin: 0 0 17px; font-size: 29px; }
.ylc-source-note { padding: 27px 0 8px; border-top: 3px solid var(--ylc-fold); }
.ylc-source-note h2 { font-size: 25px; margin: 0 0 13px; }
.ylc-source-note p { font-size: 16px; line-height: 1.8; }
.ylc-foot { margin-top: 110px; padding: 42px 0 35px; border-top: 4px solid var(--ylc-accent); display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; }
.ylc-foot-intro { max-width: 500px; }
.ylc-foot-intro p:first-child { font-family: var(--ylc-serif); font-size: 26px; line-height: 1.35; margin-bottom: 18px; }
.ylc-foot-intro p:last-child { font-size: 14px; }
.ylc-foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 30px; align-content: start; font-size: 15px; }
.ylc-lost-page { max-width: 800px; margin: 50px 0 100px; }
.ylc-lost-page h1 { font-size: 50px; margin-bottom: 24px; }
.ylc-lost-page p { margin-bottom: 24px; }
@media (min-width: 1601px) {
  .ylc-home-opening { width: 100vw; margin-left: calc((1440px - 100vw) / 2); }
  .ylc-question-slip { padding-left: max(80px,calc((100vw - 1440px) / 2)); }
  .ylc-hero-stage { min-height: 560px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .ylc-shell { width: calc(100% - 88px); }
  .ylc-head-question { left: 44%; max-width: 285px; }
  .ylc-head-question p:last-child { font-size: 25px; }
  .ylc-head-revision { display: none; }
  .ylc-home-opening { width: calc(100% + 88px); margin-inline: -44px; }
  .ylc-question-slip { width: 60%; padding-left: 44px; padding-right: 41px; }
  .ylc-question-slip::before { left: 44px; }
  .ylc-home-opening h1 { font-size: 46px; }
  .ylc-hero-caption { padding-inline: 44px; }
  .ylc-sheet { padding: 35px 42px 55px; }
  .ylc-sheet h3 { font-size: 31px; }
  .ylc-sheet-one .ylc-edge-photo { left: -46px; width: 80px; height: 108px; }
  .ylc-sheet-two .ylc-edge-photo, .ylc-sheet-three .ylc-edge-photo { right: -46px; width: 80px; height: 108px; }
  .ylc-entry-layout { grid-template-columns: minmax(0,1fr) 180px; gap: 30px; }
  .ylc-reading-sheet { padding: 40px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 12px; }
  body { font-size: 16px; line-height: 1.85; }
  .ylc-shell { width: calc(100% - 36px); }
  .ylc-masthead { height: 85px; }
  .ylc-wire-home { top: 0; left: 0; width: 100%; height: 85px; background-size: 100% 48px; background-position: center 34px; }
  .ylc-name { top: 4px; left: 17px; font-size: 25px; line-height: 1.1; white-space: nowrap; display: flex; gap: 6px; }
  .ylc-thread-nav { left: 26px; right: 24px; top: 45px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.7; }
  .ylc-thread-nav a { gap: 4px; }
  .ylc-thread-nav [data-lucide] { width: 13px; height: 13px; flex-basis: 13px; }
  .ylc-head-question, .ylc-head-revision { display: none; }
  .ylc-home-opening { width: calc(100% + 36px); margin-inline: -18px; }
  .ylc-hero-stage { display: flex; flex-direction: column; min-height: 0; }
  .ylc-question-slip { width: 100%; margin: 0; padding: 44px 27px 30px; background: var(--ylc-fold); clip-path: polygon(0 0,100% 0,100% 99%,94% 98%,86% 100%,75% 98.5%,64% 99.5%,52% 98.3%,40% 100%,28% 98.6%,17% 99.8%,7% 98%,0 99%); }
  .ylc-question-slip::before { left: 28px; top: 19px; width: 8px; height: 8px; box-shadow: 24px 0 0 var(--ylc-accent); }
  .ylc-question-slip::after { width: 27px; height: 27px; right: 0; bottom: 3px; }
  .ylc-home-opening h1 { font-size: 34px; line-height: 1.08; max-width: 370px; }
  .ylc-promise-mention { font-size: 16px; line-height: 1.6; margin-top: 21px; padding-top: 13px; }
  .ylc-hero-photo { position: relative; inset: auto; z-index: -2; width: 100%; height: 184px; margin-top: -9px; background-position: center 54%; }
  .ylc-pencil { width: 94px; height: 7px; left: auto; right: 24px; bottom: -4px; border-top-width: 1px; border-bottom-width: 1px; animation-name: ylc-pencil-settle-phone; }
  .ylc-pencil::before { top: -1px; width: 12px; height: 7px; left: -8px; border-right-width: 4px; }
  .ylc-pencil::after { top: -1px; height: 7px; width: 18px; right: -18px; }
  .ylc-photo-caption { font-size: 13px; line-height: 1.6; margin-top: 13px; }
  .ylc-hero-caption { text-align: left; padding-inline: 27px; }
  .ylc-welcome { margin-top: 27px; padding-inline: 27px; font-size: 21px; line-height: 1.45; text-align: left; }
  .ylc-scrapbook { margin-top: 46px; }
  .ylc-cluster-heading { display: block; padding-top: 20px; }
  .ylc-cluster-heading h2 { font-size: 34px; }
  .ylc-cluster-heading p { margin-top: 8px; font-size: 14px; }
  .ylc-cluster { display: flex; flex-direction: column; gap: 32px; padding: 0; margin-top: 26px; }
  .ylc-sheet, .ylc-sheet-one, .ylc-sheet-two, .ylc-sheet-three { width: 100%; padding: 27px 27px 32px; margin: 0; transform: none; filter: drop-shadow(3px 6px 0 #7D314A20); }
  .ylc-sheet-number { font-size: 60px; margin: 0 0 12px -3px; }
  .ylc-sheet h3 { font-size: 31px; margin-bottom: 20px; }
  .ylc-sheet p:not(.ylc-sheet-number) { font-size: 16px; line-height: 1.85; margin-bottom: 19px; }
  .ylc-edge-photo, .ylc-sheet-one .ylc-edge-photo, .ylc-sheet-two .ylc-edge-photo, .ylc-sheet-three .ylc-edge-photo { position: relative; inset: auto; width: 139px; height: 120px; margin: 30px 0 0 auto; transform: rotate(3deg); border-width: 7px; }
  .ylc-revision { margin-top: 47px; padding-left: 21px; }
  .ylc-revision h2 { font-size: 31px; }
  .ylc-crumb { font-size: 13px; margin: 25px 0 23px; gap: 8px; }
  .ylc-entry-opening h1 { font-size: 34px; line-height: 1.12; margin-bottom: 21px; }
  .ylc-deck { font-size: 17px; line-height: 1.75; }
  .ylc-entry-opening figure { margin-top: 26px; }
  .ylc-entry-photo { height: 171px; width: calc(100% + 36px); margin-left: -18px; border-bottom-width: 6px; }
  .ylc-entry-opening figcaption { max-width: 94%; font-size: 13px; margin: -21px -2px 0 auto; padding: 12px 15px; }
  .ylc-entry-layout { display: flex; flex-direction: column; gap: 48px; margin-top: 31px; }
  .ylc-reading-sheet { width: 100%; padding: 29px 24px 38px; box-shadow: 5px 7px 0 var(--ylc-fold); }
  .ylc-reading-sheet h2 { font-size: 28px; margin: 31px 0 19px; }
  .ylc-reading-sheet p { margin-bottom: 22px; overflow-wrap: break-word; }
  .ylc-note { margin: 29px -10px 31px -5px; padding: 23px 18px; transform: rotate(-.6deg); }
  .ylc-note h2 { font-size: 24px; margin: 0 0 13px; gap: 8px; }
  .ylc-note p { font-size: 16px; }
  .ylc-side-reading { position: static; width: 100%; padding-top: 20px; }
  .ylc-side-reading ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .ylc-bookmark { max-width: 300px; }
  .ylc-compare-row { grid-template-columns: 1fr; gap: 9px; }
  .ylc-compare-row h3 { font-size: 25px; }
  .ylc-question h2, .ylc-source-note h2 { font-size: 25px; margin: 0 0 17px; }
  .ylc-source-note p { font-size: 16px; }
  .ylc-foot { margin-top: 68px; padding: 31px 5px; grid-template-columns: 1fr; gap: 33px; }
  .ylc-foot-intro p:first-child { font-size: 25px; }
  .ylc-foot-links { gap: 9px 24px; font-size: 14px; }
  .ylc-lost-page { margin: 55px 0 60px; }
  .ylc-lost-page h1 { font-size: 36px; }
}
@media (max-width: 360px) {
  .ylc-name { font-size: 23px; left: 12px; }
  .ylc-thread-nav { left: 22px; right: 18px; font-size: 12px; }
  .ylc-thread-nav [data-lucide] { width: 11px; height: 11px; flex-basis: 11px; }
  .ylc-home-opening h1 { font-size: 31px; }
}
/* The phone pencil keeps its resting position without travelling past the edge. */
@keyframes ylc-pencil-settle-phone { from { transform: translate(0,-8px) rotate(-13deg); } to { transform: translate(0,0) rotate(-19deg); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.ylc-picture-park-folds { background-image: image-set("park-folds.webp" 1x); }
.ylc-picture-big-paper { background-image: image-set("big-paper.webp" 1x); }
.ylc-picture-crease-light { background-image: image-set("crease-light.webp" 1x); }
.ylc-picture-shared-fold { background-image: image-set("shared-fold.webp" 1x); }
.ylc-picture-hands-support { background-image: image-set("hands-support.webp" 1x); }
.ylc-picture-steady-fold { background-image: image-set("steady-fold.webp" 1x); }
.ylc-picture-refold { background-image: image-set("refold.webp" 1x); }
.ylc-picture-open-table { background-image: image-set("open-table.webp" 1x); }