

.so-hero, .so-section, .so-band, .so-voices, .so-contact, .so-rule {
  --so-paper:  var(--paper);
  --so-paper2: var(--paper-2, #f6f0e2);
  --so-card:   var(--paper-2, #f6f0e2);
  --so-ink:    var(--ink);
  --so-ink2:   color-mix(in srgb, var(--ink) 82%, var(--paper));
  --so-muted:  var(--ink-soft);
  --so-accent: var(--navy);
  --so-accent2:var(--navy-deep, var(--navy));
  --so-leaf:   var(--silver);
  --so-line:   var(--silver-2);
  --so-mincho: var(--display);
  --so-sans:   var(--sans);
  --so-serif:  var(--en);
  --so-pad:    clamp(1.2rem,5vw,3.5rem);
  font-family: var(--so-sans);
  color: var(--so-ink);
}

.so-hero, .so-section, .so-contact {
  background-color: var(--so-paper);
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 18%, color-mix(in srgb, var(--so-accent) 5%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 82%, color-mix(in srgb, var(--so-leaf) 6%, transparent), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, scroll;
}
.so-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--so-pad); }

.so-rule { height: 14px; width: 100%; margin: 0; border: 0; display: block;
  background: no-repeat center/100% 8px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='8' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2 C 60 2.8, 120 5.4, 200 3.9 S 360 2.6, 460 4.6 S 640 6, 760 3.6 S 980 2.4, 1090 5 S 1180 3.8, 1200 4.1' fill='none' stroke='%23322a20' stroke-width='1.4' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E"); }
.so-rule--accent { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='8' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4.2 C 60 2.8, 120 5.4, 200 3.9 S 360 2.6, 460 4.6 S 640 6, 760 3.6 S 980 2.4, 1090 5 S 1180 3.8, 1200 4.1' fill='none' stroke='%23a4502b' stroke-width='1.6' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E"); }

.so-seal { width: 74px; height: 74px; border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--so-accent) 78%, #fff) , var(--so-accent) 45%, var(--so-accent2) 100%);
  box-shadow: 0 4px 12px rgba(50,42,32,.28), inset 0 2px 5px rgba(255,255,255,.25), inset 0 -4px 8px rgba(80,30,12,.5);
  display: flex; align-items: center; justify-content: center;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 64%, transparent 70%);
        mask: radial-gradient(circle at 50% 50%, #000 64%, transparent 70%); }
.so-seal::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1.4px dashed rgba(255,255,255,.45); }
.so-seal span { font-family: var(--so-mincho); font-weight: 700; color: #f7ecd8; font-size: 1.5rem; line-height: 1;
  text-shadow: 0 1px 1px rgba(60,20,8,.6); transform: rotate(-4deg); }

.so-hero { padding: clamp(2rem,7vw,4.5rem) 0 clamp(2rem,6vw,3.5rem); }
.so-hero .so-inner { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.5rem,5vw,4rem); align-items: center; }
.so-eyebrow { font-family: var(--so-serif); font-style: italic; color: var(--so-accent);
  font-size: clamp(1rem,.95rem + .25vw,1.15rem); margin-bottom: 1.1rem; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .55rem; }
.so-eyebrow::before { content: ""; width: 34px; height: 6px; background: no-repeat center/100% 5px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='5' viewBox='0 0 40 5' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6 C 8 1.4, 16 3.6, 24 2.4 S 34 1.6, 40 2.8' fill='none' stroke='%23a4502b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.so-hero h1 { font-family: var(--so-mincho); font-weight: 700;
  font-size: clamp(2.1rem,1.35rem + 4.2vw,4.1rem); line-height: 1.32; text-wrap: balance; letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,253,247,.5), 0 .5px .8px rgba(50,42,32,.18); }
.so-hero h1 .so-mark { position: relative; white-space: nowrap; }
.so-hero h1 .so-mark::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .08em; height: .42em; z-index: -1;
  background: no-repeat center/100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 50 6, 150 6, 196 14 C 188 22, 60 26, 6 22 Z' fill='%23a4502b' opacity='0.3'/%3E%3C/svg%3E"); }
.so-hero p { margin-top: 1.5rem; max-width: 38ch; color: var(--so-ink2); text-wrap: pretty; line-height: 1.85; }
.so-hero__art { position: relative; }

.so-ph { width: 100%; aspect-ratio: 3/4; border-radius: 2px; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(50,42,32,.025) 0 2px, transparent 2px 7px),
    linear-gradient(158deg, color-mix(in srgb, var(--so-line) 60%, #fff), var(--so-line) 70%, color-mix(in srgb, var(--so-line) 80%, var(--so-ink)));
  display: flex; align-items: flex-end;
  box-shadow: 0 2px 0 rgba(255,255,255,.5) inset, 0 14px 28px -16px rgba(50,42,32,.5); }
.so-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.so-ph::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(50,42,32,.16); z-index: 2; }
.so-ph__lbl { font-family: var(--so-serif); font-style: italic; font-size: .78rem; letter-spacing: .1em; color: var(--so-ink);
  background: var(--so-card); padding: .32rem .6rem; margin: 1rem; border: 1px solid var(--so-line); position: relative; z-index: 2; }

.so-tape { position: absolute; top: -13px; left: 26px; width: 104px; height: 30px; z-index: 3; transform: rotate(-5deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 5px, transparent 5px 10px),
    linear-gradient(color-mix(in srgb, var(--so-accent) 32%, transparent), color-mix(in srgb, var(--so-accent) 22%, transparent));
  box-shadow: 0 2px 5px rgba(50,42,32,.2); }
.so-tape::before, .so-tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(45deg, transparent 0 2px, rgba(241,233,216,.7) 2px 4px); }
.so-tape::before { left: -1px; } .so-tape::after { right: -1px; }

.so-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.9rem;
  margin-top: 2rem; border: 1.6px solid var(--so-ink); border-radius: 40px; background: transparent; color: var(--so-ink);
  text-decoration: none; font-size: .95rem; letter-spacing: .05em; font-family: var(--so-sans); font-weight: 500;
  transition: background .22s, color .22s, transform .12s; cursor: pointer; }
.so-btn:hover { background: var(--so-ink); color: var(--so-paper); }
.so-btn:active { transform: translateY(1px); }
.so-btn--fill { background: var(--so-accent); border-color: var(--so-accent); color: #fdf6ea;
  box-shadow: 0 6px 14px -8px rgba(126,63,36,.7); }
.so-btn--fill:hover { background: var(--so-ink); border-color: var(--so-ink); color: var(--so-paper); }
.so-btn__arr { font-family: var(--so-serif); }

.so-section { padding: clamp(2.4rem,6vw,4rem) 0; }
.so-sechead { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.6rem; }
.so-kicker { font-family: var(--so-serif); font-style: italic; color: var(--so-leaf);
  font-size: clamp(.95rem,.92rem + .2vw,1.05rem); letter-spacing: .03em; display: inline-flex; align-items: center; gap: .5rem; }
.so-kicker::before { content: ""; width: 26px; height: 5px; background: no-repeat center/100% 4px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='4' viewBox='0 0 30 4' preserveAspectRatio='none'%3E%3Cpath d='M0 2 C 7 1, 13 3, 20 2 S 26 1, 30 2.2' fill='none' stroke='%235b6741' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.so-h2 { font-family: var(--so-mincho); font-weight: 700; font-size: clamp(1.55rem,1.15rem + 2.3vw,2.6rem);
  line-height: 1.42; text-wrap: balance; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255,253,247,.5); }
.so-lead { max-width: 56ch; color: var(--so-ink2); text-wrap: pretty; margin-top: 1rem; line-height: 1.85; }

.so-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.3rem,4vw,2.6rem); margin-top: 2.6rem; }
.so-col { padding-top: 1.3rem; position: relative; }
.so-col::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: no-repeat left top/100% 6px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='6' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 C 40 1.6, 80 4.2, 140 2.8 S 240 1.8, 300 3.4' fill='none' stroke='%23322a20' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.so-no { font-family: var(--so-serif); font-style: italic; color: var(--so-accent); font-size: 1.4rem; display: block; line-height: 1; }
.so-col h3 { font-family: var(--so-mincho); font-weight: 600; font-size: 1.22rem; margin: .45rem 0 .55rem; line-height: 1.5; }
.so-col p { font-size: .96rem; color: var(--so-muted); text-wrap: pretty; line-height: 1.8; }

.so-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,3vw,1.9rem); margin-top: 2.4rem; }
.so-gitem { position: relative; }
.so-gitem .so-ph { aspect-ratio: 4/5; }
.so-gitem:nth-child(1) { transform: rotate(-.7deg); }
.so-gitem:nth-child(2) { transform: rotate(.6deg); }
.so-gitem:nth-child(2) .so-ph { aspect-ratio: 4/3; margin-top: 1.8rem; }
.so-gitem:nth-child(3) { transform: rotate(-.4deg); }
.so-gitem:nth-child(3) .so-ph { aspect-ratio: 3/4; }
.so-gcap { font-family: var(--so-serif); font-size: .86rem; color: var(--so-muted); margin-top: .7rem; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .4rem; }
.so-gcap::before { content: "—"; color: var(--so-accent); }

.so-band { position: relative; overflow: hidden; margin: clamp(1.5rem,5vw,3rem) 0; min-height: clamp(300px,46vh,460px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--so-ink) 78%, var(--so-accent)), var(--so-ink)); }
.so-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.so-band__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(20,14,8,.66), rgba(20,14,8,.34) 55%, rgba(20,14,8,.5)); }
.so-band__t { position: relative; z-index: 2; padding: clamp(1.6rem,5vw,3.2rem); color: #f7efdf; max-width: 680px;
  margin: 0 auto; display: flex; flex-direction: column; justify-content: center; min-height: inherit; }
.so-band__seal { margin-bottom: 1.3rem; }
.so-band__t h2 { font-family: var(--so-mincho); font-weight: 700; font-size: clamp(1.55rem,1.15rem+2.1vw,2.5rem);
  line-height: 1.5; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.so-band__t p { margin-top: 1.1rem; color: #ede2cd; text-shadow: 0 1px 10px rgba(0,0,0,.8); text-wrap: pretty; line-height: 1.85; }

.so-voices { padding: clamp(2.4rem,6vw,4rem) 0; }
.so-voices .so-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem,3vw,2rem); }
.so-vcard { background: var(--so-card); border: 1px solid var(--so-line); border-radius: 2px;
  padding: clamp(1.6rem,4vw,2.4rem) clamp(1.4rem,4vw,2.2rem) clamp(1.4rem,4vw,2rem); position: relative;
  box-shadow: 0 12px 26px -20px rgba(50,42,32,.6); }
.so-vcard::after { content: ""; position: absolute; top: -8px; right: -8px; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--so-accent) 80%, #fff), var(--so-accent) 50%, var(--so-accent2));
  box-shadow: inset 0 1px 3px rgba(255,255,255,.3), inset 0 -3px 5px rgba(80,30,12,.5), 0 3px 8px rgba(50,42,32,.3);
  -webkit-mask: radial-gradient(circle,#000 62%,transparent 68%); mask: radial-gradient(circle,#000 62%,transparent 68%); }
.so-vquote { font-family: var(--so-serif); font-style: italic; font-size: 2.6rem; line-height: .6; color: var(--so-accent); opacity: .5; display: block; height: .7em; }
.so-vcard blockquote { font-family: var(--so-mincho); font-size: 1.12rem; line-height: 1.85; text-wrap: pretty; margin-top: .3rem; }
.so-vcard cite { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-style: normal; font-size: .86rem;
  color: var(--so-muted); font-family: var(--so-serif); }
.so-vcard cite::before { content: ""; width: 22px; height: 4px; background: no-repeat center/100% 3px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='3' viewBox='0 0 24 3' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5 C 6 .8, 12 2.4, 18 1.4 S 24 1, 24 1.6' fill='none' stroke='%23796c56' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

.so-contact { padding: clamp(2.4rem,6vw,4rem) 0; }
.so-contact .so-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,3.5rem); align-items: start; }
.so-info p { color: var(--so-ink2); text-wrap: pretty; margin-top: 1rem; line-height: 1.95; }
.so-info .so-detail { margin-top: 1.4rem; font-family: var(--so-mincho); font-size: 1.02rem; color: var(--so-ink); letter-spacing: .02em; line-height: 1.9; }
.so-channels { background: var(--so-card); border: 1px solid var(--so-line); border-radius: 3px;
  padding: clamp(1.4rem,4vw,2.2rem); box-shadow: 0 12px 26px -20px rgba(50,42,32,.6); position: relative;
  display: flex; flex-direction: column; gap: .9rem; }
.so-channels::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(50,42,32,.1); border-radius: 2px; pointer-events: none; }
.so-channels .so-btn { margin-top: 0; width: 100%; }
.so-channels__note { font-family: var(--so-serif); font-style: italic; font-size: .85rem; color: var(--so-muted); text-wrap: pretty; }

@media (max-width: 820px) {
  .so-hero .so-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .so-hero__art { max-width: 340px; }
  .so-cols, .so-gallery, .so-voices .so-inner, .so-contact .so-inner { grid-template-columns: 1fr; }
  .so-gitem, .so-gitem:nth-child(1), .so-gitem:nth-child(2), .so-gitem:nth-child(3) { transform: none; }
  .so-gitem .so-ph, .so-gitem:nth-child(2) .so-ph, .so-gitem:nth-child(3) .so-ph { aspect-ratio: 4/3; margin-top: 0; }
}
@media (max-width: 430px) { .so-cols { gap: 1.6rem; } }
