/* Photographic presentation for the homepage and introduction only. */
.public-design .about-page { overflow: clip; }
.public-design .about-photo > img { border-radius: 37% 24% 31% 19% / 25% 34% 22% 29%; }
.public-design .about-photo figcaption { color: #53655a; font-size: 11px; line-height: 1.6; padding-inline: 7px; }
.public-design .about-section-heading p { font-size: 17px; }
.public-design .about-prose p,.public-design .about-detail p,.public-design .about-detail li { font-size: 15px; line-height: 1.9; }
.public-design .about-story-grid .about-photo > img { border-radius: 23% 40% 28% 36% / 30% 25% 39% 23%; }
.public-design .about-story-grid { gap: 56px; }

/* A readable letter on layered paper, with a clip, fold, and embossed seal. */
.founder-letter { position: relative; isolation: isolate; max-width: 1050px; margin: 88px auto 25px; padding: 60px 78px 36px; border: 1px solid #dfd4ba; background: linear-gradient(94deg,transparent 49.8%,#bca87d0b 50%,transparent 50.6%),linear-gradient(#fffdf5,#fcf6e6); box-shadow: 0 16px 36px #594e3514,3px 5px 0 #f3ead5,4px 6px 0 #dacfb4; }
.founder-letter::before { content: ''; position: absolute; inset: 14px -8px -9px 10px; border: 1px solid #d7cbb0; background: transparent; transform: rotate(-1deg); z-index: -2; box-shadow: 0 8px 18px #594e3510; }
.founder-letter::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath opacity='.035' d='M0 0h180v180H0z' filter='url(%23n)'/%3E%3C/svg%3E"); }
.letter-clip { position: absolute; top: -23px; right: 70px; width: 23px; height: 70px; border: 3px solid #b3b6a9; border-radius: 15px; transform: rotate(12deg); box-shadow: 2px 2px 2px #786f4844,inset 1px 0 1px white; }
.letter-clip::after { content: ''; position: absolute; top: 12px; left: 4px; width: 10px; height: 45px; border: 2px solid #a0a799; border-bottom: 0; border-radius: 8px 8px 0 0; }
.letter-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid #c8bda1; margin-bottom: 32px; }
.letter-letterhead { display: block; font: 700 29px/1.3 var(--font-site); color: #234536; letter-spacing: -.04em; }
.letter-letterhead span { display: block; font: 11px/1.6 var(--font-site); letter-spacing: .025em; margin-top: 6px; }
.letter-heading h3 { font: 400 30px/1.3 var(--font-site); margin: 25px 0 0; letter-spacing: -.025em; }
.letter-heading img { width: 100px; height: 121px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.letter-body { max-width: 760px; margin: auto; }
.letter-body p { font: 16px/1.95 var(--font-site); margin: 0 0 21px; color: #37493d; overflow-wrap: break-word; word-break: keep-all; }
html[lang=ko] .letter-body p { font-family: var(--font-site); line-height: 2; }
.letter-signoff { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin: 38px 0 28px; }
.letter-signoff > div > span { display: block; font-size: 12px; color: #697260; margin-bottom: 8px; }
.letter-signoff strong { font: italic 30px/1.4 var(--font-site); }
.letter-seal { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 48% 52% 45% 51%; background: radial-gradient(ellipse at 35% 30%,#51735c,#254c38 65%); border: 4px solid #567457; box-shadow: inset 0 0 0 2px #193d3377,inset 0 0 0 4px #9caa7b55,2px 4px 3px #373f3333; color: #d8d9ae; font: italic 18px var(--font-site); transform: rotate(-13deg); text-shadow: 0 1px 1px #122c21; }
.letter-source { border-top: 1px solid #d9cfb7; padding-top: 17px; font-size: 11px; line-height: 1.7; color: #747360; }

/* Staggered organic photo cutouts keep the tour photographs prominent. */
.about-tour-collage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 25px 38px; align-items: center; margin: 25px 0 55px; }
.about-tour-collage .tour-main { grid-row: span 2; }
.public-design .about-tour-collage .tour-main img { height: 540px; max-height: none; object-position: 48% 50%; border-radius: 43% 32% 35% 29% / 34% 43% 28% 37%; }
.public-design .about-tour-collage .tour-side img,.public-design .about-tour-collage .tour-small img { height: 250px; aspect-ratio: auto; }
.about-tour-collage .tour-small { width: 86%; margin-left: auto; }
.about-photo-ribbon,.about-study-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; align-items: center; margin: 52px 0 12px; }
.public-design .about-photo-ribbon img,.public-design .about-study-photos img { height: 250px; aspect-ratio: auto; }
.about-photo-ribbon figure:nth-child(2),.about-study-photos figure:nth-child(2) { margin-top: 35px; }
.public-design .about-photo-ribbon figure:nth-child(2) img { height: 330px; border-radius: 43% 38% 47% 30% / 32% 47% 39% 43%; object-position: 50% 36%; }
.about-study-photos { margin: 0 0 52px; }
.public-design .about-details-grid .illustrated { border-top: 0; padding-top: 0; }
.about-detail > .about-photo { margin-bottom: 24px; }
.public-design .about-detail > .about-photo img { height: 235px; aspect-ratio: auto; max-width: 620px; margin-inline: auto; }
.public-design .about-detail:nth-child(3n+2) > .about-photo img { border-radius: 24% 38% 25% 42% / 36% 22% 38% 27%; }
.public-design .about-detail:nth-child(3n) > .about-photo img { border-radius: 39% 30% 43% 25% / 31% 42% 22% 37%; }
.public-design #support .about-details-grid { row-gap: 46px; }
.public-design .about-support-intro { grid-template-columns: 1fr 1.1fr; max-width: none; gap: 45px; }
.public-design .about-support-intro .about-photo img { height: 310px; }
.public-design .about-service-note { grid-template-columns: .75fr 1.25fr; padding: 32px; gap: 38px; background: #eee3c9; border-radius: 5px; }
.public-design .about-service-note .about-photo img { height: 250px; aspect-ratio: auto; }
.about-niied { display: grid; grid-template-columns: 1fr 1.05fr; gap: 55px; align-items: center; padding-top: 24px; }
.public-design .about-niied img { height: 300px; aspect-ratio: auto; border-radius: 28% 42% 22% 37% / 40% 27% 35% 26%; }
.about-niied .about-downloads { gap: 14px 22px; }
.public-design .about-memory-strip img { height: 210px; object-fit: cover; background: transparent; }
.public-design .about-bound-grid { grid-template-columns: 1fr 1.1fr; align-items: center; }
.about-bound-album { display: grid; gap: 30px; }
.public-design .about-bound-album img { height: 290px; aspect-ratio: auto; }
.about-bound-album figure:nth-child(2) { width: 88%; margin-left: auto; }
.about-bound-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 42px 0 0; }
.public-design .about-bound-strip img { height: 290px; aspect-ratio: auto; }
.about-bound-strip figure:nth-child(2) { margin-top: 30px; }
.about-closing-album { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; }
.public-design .about-closing-album .about-photo img { height: 270px; border-radius: 38% 34% 45% 27% / 29% 42% 31% 40%; }
.about-closing-album figure:nth-child(2) { margin-top: 95px; }

/* The homepage uses the same cutouts, with paper photographs between sections. */
.connection-home .connection-story-photo { overflow: visible; background: transparent; border-radius: 0; }
.connection-home .connection-story-photo img { border-radius: 34% 23% 30% 18% / 26% 34% 23% 35%; }
.connection-home .connection-story:nth-child(3n+2) .connection-story-photo img { border-radius: 23% 39% 25% 35% / 35% 24% 37% 27%; }
.connection-home .connection-story:nth-child(3n) .connection-story-photo img { border-radius: 42% 27% 35% 24% / 24% 38% 30% 42%; }
.connection-path-photo { margin: 23px -8px 0; }
.connection-path-photo img { width: 100%; height: 195px; object-fit: cover; border-radius: 38% 27% 43% 23% / 28% 39% 26% 37%; }
.connection-path-grid > a:nth-child(even) .connection-path-photo img { border-radius: 23% 38% 25% 40% / 37% 26% 39% 28%; }
.connection-photo-wall { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 30px; max-width: 1130px; margin: 0 auto 60px; align-items: center; }
.connection-photo-print { position: relative; padding: 10px 10px 28px; background: #fffdf5; box-shadow: 0 5px 12px #554a3226; transform: rotate(-4deg); }
.connection-photo-print:nth-child(2) { transform: rotate(3deg); margin-top: 20px; }
.connection-photo-print:nth-child(3) { transform: rotate(-3deg); }
.connection-photo-print::before { content: ''; position: absolute; top: -11px; left: 35%; width: 30%; height: 30px; background: #ccb58188; transform: rotate(-8deg); box-shadow: 0 1px 2px #79694012; z-index: 1; }
.connection-photo-print img { width: 100%; height: 220px; object-fit: cover; }
.connection-photo-print:first-child img { object-position: 50% 18%; }
.connection-photo-print figcaption { font: 12px/1.5 var(--font-site); margin-top: 14px; }
.connection-manifesto:has(.connection-photo-wall) h2 { font-size: 65px; }
.connection-support.connection-support-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; }
.connection-support-album { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: center; }
.connection-support-album img { width: 100%; height: 225px; object-fit: cover; border-radius: 43% 28% 37% 25% / 31% 42% 26% 35%; }
.connection-support-album img:nth-child(2) { margin-top: 65px; border-radius: 27% 40% 24% 38% / 39% 27% 35% 24%; }
.connection-support-photos .connection-support-actions { grid-column: 1/-1; flex-direction: row; justify-content: flex-start; gap: 30px; flex-wrap: wrap; }

@media(max-width:1050px) {
  .founder-letter { padding: 45px 50px 30px; }
  .public-design .about-tour-collage .tour-main img { height: 430px; }
  .public-design .about-tour-collage .tour-side img,.public-design .about-tour-collage .tour-small img { height: 205px; }
  .public-design .about-detail > .about-photo img { height: 190px; }
  .public-design .about-photo-ribbon img,.public-design .about-study-photos img { height: 200px; }
  .public-design .about-photo-ribbon figure:nth-child(2) img { height: 275px; }
  .public-design .about-memory-strip img { height: 160px; }
  .about-closing-album { grid-template-columns: 1fr; }
  .about-closing-album figure:nth-child(2) { width: 72%; margin: -38px 0 0 auto; }
  .public-design .about-closing-album figure:nth-child(2) img { height: 190px; }
  .connection-photo-wall { gap: 20px; }
  .connection-photo-print img { height: 175px; }
  .connection-support.connection-support-photos { padding: 40px; }
  .connection-support-album img { height: 185px; }
}
@media(max-width:750px) {
  .public-design .about-story-grid .about-photo > img { height: auto; aspect-ratio: 16 / 9; border-radius: 24% 19% 28% 20% / 26% 23% 30% 22%; }
  .public-design .about-section-heading p { font-size: 15px; }
  .public-design .about-prose p,.public-design .about-detail p,.public-design .about-detail li { font-size: 14px; }
  .founder-letter { margin-top: 58px; padding: 36px 26px 26px; }
  .letter-heading { gap: 15px; margin-bottom: 25px; padding-bottom: 24px; }
  .letter-heading img { width: 73px; height: 88px; }
  .letter-heading h3 { font-size: 24px; margin-top: 21px; }
  .letter-letterhead { font-size: 26px; }
  .letter-letterhead span { font-size: 9px; }
  .letter-clip { right: 32px; width: 19px; height: 58px; }
  .letter-clip::after { width: 7px; height: 35px; }
  .letter-body p { font-size: 15px; line-height: 1.9; word-break: normal; }
  html[lang=ko] .letter-body p { word-break: keep-all; overflow-wrap: anywhere; }
  .letter-signoff strong { font-size: 25px; }
  .letter-seal { width: 64px; height: 64px; font-size: 16px; }
  .letter-source { font-size: 10px; }
  .about-tour-collage { grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 35px; }
  .about-tour-collage .tour-main { grid-column: 1/-1; grid-row: auto; }
  .public-design .about-tour-collage .tour-main img { height: 360px; }
  .about-tour-collage .tour-small { width: 100%; margin-top: 26px; }
  .public-design .about-tour-collage .tour-side img,.public-design .about-tour-collage .tour-small img { height: 180px; }
  .about-photo-ribbon,.about-study-photos { gap: 15px; grid-template-columns: 1fr 1fr; }
  .about-photo-ribbon figure:last-child,.about-study-photos figure:last-child { grid-column: 1/-1; width: 78%; margin-inline: auto; }
  .public-design .about-photo-ribbon img,.public-design .about-study-photos img { height: 210px; }
  .public-design .about-photo-ribbon figure:nth-child(2) img { height: 245px; }
  .public-design .about-detail > .about-photo img { height: 270px; }
  .public-design .about-support-intro,.public-design .about-service-note,.about-niied,.public-design .about-bound-grid { grid-template-columns: 1fr; gap: 28px; }
  .public-design .about-support-intro .about-photo img { width: 100%; height: 260px; }
  .public-design .about-service-note { padding: 25px; }
  .public-design .about-service-note .about-photo img { height: 230px; }
  .public-design .about-niied img { height: 260px; }
  .public-design .about-memory-strip img { height: 190px; }
  .about-bound-album { gap: 20px; }
  .public-design .about-bound-album img { height: 270px; }
  .about-bound-strip { gap: 18px; }
  .public-design .about-bound-strip img { height: 185px; }
  .about-closing-album { grid-template-columns: 1.1fr 1fr; }
  .about-closing-album figure:nth-child(2) { width: 100%; margin: 65px 0 0; }
  .public-design .about-closing-album .about-photo img { height: 220px; }
  .connection-path-photo img { height: 220px; }
  .connection-photo-wall { gap: 13px; margin-bottom: 40px; }
  .connection-photo-print { padding: 6px 6px 15px; }
  .connection-photo-print img { height: 145px; }
  .connection-photo-print figcaption { font-size: 10px; }
  .connection-manifesto:has(.connection-photo-wall) h2 { font-size: 48px; }
  .connection-support.connection-support-photos { grid-template-columns: 1fr; padding: 32px 26px; }
  .connection-support-album { max-width: 520px; }
  .connection-support-album img { height: 240px; }
}
@media(max-width:480px) {
  .public-design .about-photo figcaption { font-size: 10px; padding-inline: 2px; }
  .founder-letter { padding: 30px 21px 22px; }
  .letter-heading { align-items: flex-start; }
  .letter-heading h3 { font-size: 23px; }
  .letter-heading img { width: 59px; height: 72px; margin-top: 8px; }
  .letter-body p { font-size: 15px; }
  .public-design .about-tour-collage .tour-main img { height: 275px; }
  .public-design .about-tour-collage .tour-side img,.public-design .about-tour-collage .tour-small img { height: 140px; }
  .public-design .about-detail > .about-photo img { height: 235px; }
  .public-design .about-photo-ribbon img,.public-design .about-study-photos img { height: 160px; }
  .public-design .about-photo-ribbon figure:nth-child(2) img { height: 210px; }
  .public-design .about-memory-strip img { height: 150px; }
  .public-design .about-bound-strip img { height: 145px; }
  .public-design .about-closing-album .about-photo img { height: 180px; }
  .connection-photo-wall { grid-template-columns: 1fr 1fr; gap: 23px; }
  .connection-photo-print:nth-child(2) { margin-top: 35px; }
  .connection-photo-print:nth-child(3) { grid-column: 1/-1; width: 70%; justify-self: center; }
  .connection-photo-print:nth-child(3) img { height: 185px; }
  .connection-path-photo img { height: 190px; }
  .connection-support-album img { height: 180px; }
  .connection-support-album img:nth-child(2) { margin-top: 42px; }
  .connection-support-photos .connection-support-actions { gap: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .connection-home .connection-story-photo img,.connection-home .connection-journey img { transition: none; }
}

/* Generated photographic TV cabinet; transparent controls overlay its real dials. */
.connection-featured-video { width: 65%; margin: 12px auto 64px; }
.retro-tv { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.retro-tv-art { display: block; width: 100%; height: 100%; object-fit: contain; clip-path: polygon(11% 1.5%,88% 1.5%,90% 3%,91% 6%,91% 80%,90% 84%,85% 85%,83% 97%,80% 97%,77% 85%,22% 85%,20% 97%,16.5% 97%,15% 85%,11% 84%,9% 82%,9% 6%,10% 3%); }
.retro-tv-screen { position: absolute; left: 16.2%; top: 12.5%; width: 55.4%; height: 61.4%; overflow: hidden; border-radius: 8% / 7%; background: #060b0c; }
.connection-featured-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #060b0c; }
.retro-tv-panel { display: contents; }
.retro-tv-knob { position: absolute; left: 77.1%; width: 9.3%; height: 14%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.retro-tv-knob[data-tv-play] { top: 12%; }
.retro-tv-knob[data-tv-sound] { top: 28%; }
.retro-tv-knob span,.retro-tv-speaker { display: none; }
.retro-tv-knob:hover { box-shadow: 0 0 0 2px #ffe4a080; }
.retro-tv-unmute { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 10px 14px; border: 1px solid #f6deb18c; border-radius: 5px; background: #16282ee8; color: #fff5de; font: inherit; font-size: 12px; cursor: pointer; }
.retro-tv-unmute[hidden] { display: none; }
.retro-tv button:focus-visible { outline: 3px solid #ffe0a3; outline-offset: 3px; }
@media (max-width: 640px) {
  .connection-featured-video { width: 100%; margin: 0 auto 42px; }
  .retro-tv-unmute { font-size: 10px; padding: 7px 8px; gap: 5px; }
}