:root{
  --night:#04111f;
  --night2:#081a2d;
  --night3:#0e2740;
  --paper:rgba(255,255,255,.94);
  --paper-edge:rgba(255,255,255,.22);
  --ink:#f4f1ea;
  --ink-dark:#203044;
  --muted:rgba(244,241,234,.72);
  --gold:#d6bd82;
  --line:rgba(214,189,130,.18);
  --shadow:0 28px 48px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  background:
    radial-gradient(circle at 20% 12%,rgba(35,93,156,.24),transparent 26rem),
    radial-gradient(circle at 80% 20%,rgba(223,199,140,.10),transparent 22rem),
    radial-gradient(circle at 55% 80%,rgba(32,72,117,.22),transparent 28rem),
    linear-gradient(180deg,#07121f 0%, #06182a 40%, #04101c 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body:before,
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
}
body:before{
  background-image:
    radial-gradient(circle at 4% 9%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 15% 33%, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 28% 14%, rgba(214,189,130,.8) 0 1.4px, transparent 2px),
    radial-gradient(circle at 40% 24%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 52% 10%, rgba(255,255,255,.75) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 63% 17%, rgba(214,189,130,.85) 0 1.4px, transparent 2px),
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.72) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.85) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 94% 29%, rgba(214,189,130,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 7% 62%, rgba(255,255,255,.72) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 23% 78%, rgba(214,189,130,.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 37% 68%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 56% 82%, rgba(255,255,255,.8) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 67% 74%, rgba(214,189,130,.75) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 82% 66%, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 92% 87%, rgba(255,255,255,.78) 0 1.3px, transparent 1.9px);
  opacity:.85;
}
body:after{
  background:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.18;
}

.twinkle-stars{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.twinkle-stars i{
  position:absolute;display:block;border-radius:999px;
  width:var(--size,4px);height:var(--size,4px);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 34%, rgba(214,189,130,.88) 58%, transparent 72%);
  box-shadow:0 0 8px rgba(255,255,255,.34),0 0 18px rgba(214,189,130,.18);
  opacity:.12;
  animation:starTwinkle var(--dur,5.8s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.twinkle-stars i:nth-child(1){left:6%;top:13%;--size:4px;--dur:4.8s;--delay:.2s}
.twinkle-stars i:nth-child(2){left:14%;top:24%;--size:5px;--dur:6.2s;--delay:1.1s}
.twinkle-stars i:nth-child(3){left:22%;top:9%;--size:3px;--dur:5.1s;--delay:2.4s}
.twinkle-stars i:nth-child(4){left:31%;top:18%;--size:4px;--dur:6.7s;--delay:.8s}
.twinkle-stars i:nth-child(5){left:39%;top:8%;--size:5px;--dur:5.4s;--delay:3.2s}
.twinkle-stars i:nth-child(6){left:48%;top:29%;--size:3px;--dur:4.9s;--delay:1.7s}
.twinkle-stars i:nth-child(7){left:57%;top:12%;--size:4px;--dur:6.5s;--delay:2.8s}
.twinkle-stars i:nth-child(8){left:67%;top:22%;--size:5px;--dur:5.6s;--delay:.6s}
.twinkle-stars i:nth-child(9){left:77%;top:10%;--size:3px;--dur:4.6s;--delay:2.1s}
.twinkle-stars i:nth-child(10){left:88%;top:18%;--size:4px;--dur:6.3s;--delay:3.6s}
.twinkle-stars i:nth-child(11){left:9%;top:46%;--size:3px;--dur:5.3s;--delay:1.4s}
.twinkle-stars i:nth-child(12){left:19%;top:58%;--size:5px;--dur:6.1s;--delay:2.6s}
.twinkle-stars i:nth-child(13){left:28%;top:44%;--size:4px;--dur:4.7s;--delay:.4s}
.twinkle-stars i:nth-child(14){left:44%;top:63%;--size:3px;--dur:6.8s;--delay:3.1s}
.twinkle-stars i:nth-child(15){left:53%;top:52%;--size:5px;--dur:5.2s;--delay:1.9s}
.twinkle-stars i:nth-child(16){left:66%;top:68%;--size:4px;--dur:6.4s;--delay:.9s}
.twinkle-stars i:nth-child(17){left:74%;top:56%;--size:3px;--dur:4.5s;--delay:2.7s}
.twinkle-stars i:nth-child(18){left:84%;top:72%;--size:5px;--dur:5.8s;--delay:1.3s}
.twinkle-stars i:nth-child(19){left:91%;top:47%;--size:3px;--dur:6.0s;--delay:2.2s}
.twinkle-stars i:nth-child(20){left:96%;top:82%;--size:4px;--dur:5.0s;--delay:3.4s}
@keyframes starTwinkle{
  0%,100%{opacity:.10;transform:scale(.75)}
  20%{opacity:.22;transform:scale(.88)}
  45%{opacity:.78;transform:scale(1.18)}
  60%{opacity:.28;transform:scale(.92)}
  78%{opacity:.64;transform:scale(1.08)}
}
a{color:inherit}
button{font:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1180px,calc(100% - 44px));margin:auto}

.site-header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(4,17,31,.48);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.brand strong{font-size:20px;letter-spacing:.17em;font-weight:600}
.brand small{font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;letter-spacing:.24em;color:rgba(255,255,255,.62)}
.navlinks{display:flex;gap:25px;font-size:12px;letter-spacing:.11em}
.navlinks a{text-decoration:none;opacity:.78}
.navlinks a:hover{opacity:1}
.pick{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer;transition:.25s}
.pick:hover{background:rgba(255,255,255,.14)}

.eyebrow{display:inline-block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:.28em;color:rgba(214,189,130,.95);margin-bottom:14px}

.chooser{padding:22px 0 28px}
.title-block h2{font-size:30px;font-weight:500;letter-spacing:.11em;margin:0 0 10px}
.title-block p{margin:0;color:rgba(244,241,234,.64);font-size:13px;line-height:1.9}
.moods{display:flex;gap:16px;overflow:auto;padding:22px 0 4px;scrollbar-width:none}
.moods::-webkit-scrollbar{display:none}
.mood{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;min-width:184px;
  padding:13px 18px;border-radius:8px 16px 8px 16px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;transition:.28s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mood span:last-child{display:flex;flex-direction:column;align-items:flex-start}
.mood b{font-weight:500;font-size:14px;letter-spacing:.04em}
.mood em{font-style:normal;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.5);margin-top:2px}
.mood .orb{width:36px;height:36px;border-radius:50%;flex:0 0 36px;background:radial-gradient(circle at 35% 35%, #e7ddb6, #b99d68 58%, #102742 100%);box-shadow:0 0 0 5px rgba(255,255,255,.04)}
.mood.active,.mood:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);border-color:rgba(214,189,130,.42);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.mood.active em,.mood:hover em{color:rgba(255,255,255,.76)}

.gallery-shell{position:relative;padding:38px 0 92px}
.constellation-line{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:min(1220px,96%);height:900px;pointer-events:none;opacity:.9}
.gallery{position:relative;height:950px;margin-top:10px}
.work-card{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);padding:16px 16px 18px;
  background:var(--paper);border:1px solid rgba(255,255,255,.46);border-radius:12px;
  box-shadow:var(--shadow);transform:rotate(var(--r));transform-origin:center center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, opacity .25s;
  backdrop-filter:blur(10px);cursor:pointer;color:var(--ink-dark);
}
.work-card:hover{transform:rotate(0deg) translateY(-12px) scale(1.02);z-index:30;box-shadow:0 34px 70px rgba(0,0,0,.34)}
.work-card.is-hidden{display:none}
.work-photo{aspect-ratio:1.91 / 1;overflow:hidden;border-radius:8px;background:#d7d4cb;position:relative}
.work-photo img{width:100%;height:100%;object-fit:cover}
.work-photo:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 55px rgba(0,0,0,.08);pointer-events:none}
.work-user{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.07em;color:#7c776d;margin-top:10px}
.work-card h3{font-size:15px;font-weight:500;letter-spacing:.045em;line-height:1.6;margin:6px 0 8px;color:#1d3044}
.obi{
  margin:2px 0 0;
  padding:8px 0 2px;
  font-size:12px;
  line-height:1.9;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:0;
  text-shadow:0 1px 6px rgba(3,12,23,.72);
}

.photo-dandelion{background:
  radial-gradient(circle at 28% 26%,rgba(255,245,198,.92) 0 6%,transparent 7%),
  radial-gradient(circle at 72% 68%,rgba(255,252,235,.38) 0 18%,transparent 19%),
  linear-gradient(180deg,rgba(255,244,212,.38),transparent 32%),
  linear-gradient(180deg,#c9dbb3 0%, #88a477 60%, #5b7454 100%)}
.photo-school{background:
  linear-gradient(90deg,rgba(255,255,255,.28) 0 14%,transparent 14% 32%,rgba(255,255,255,.14) 32% 36%,transparent 36% 100%),
  radial-gradient(circle at 62% 24%,rgba(252,242,206,.6),transparent 18%),
  linear-gradient(180deg,#b3c8dc 0%, #d9e5ef 45%, #879db4 46%, #9caebc 100%)}
.photo-memory{background:
  radial-gradient(circle at 72% 26%,rgba(255,244,214,.72),transparent 14%),
  linear-gradient(140deg,rgba(34,48,63,.18) 0 38%,transparent 39%),
  linear-gradient(0deg,#efe4d3 0%, #e6dac7 56%, #c1b49f 100%)}
.photo-airport{background:
  radial-gradient(circle at 72% 24%,#f8efc5 0 14px,rgba(248,239,197,.18) 15px 28px,transparent 29px),
  linear-gradient(180deg,transparent 56%,rgba(12,18,26,.34) 57% 100%),
  linear-gradient(90deg,transparent 0 14%,rgba(255,255,255,.16) 14.5% 15%,transparent 15.5% 38%,rgba(255,255,255,.12) 38.5% 39%,transparent 39.5% 100%),
  linear-gradient(180deg,#17324a 0%,#0a1e34 100%)}
.photo-call{background:
  radial-gradient(circle at 68% 20%,rgba(251,239,209,.55),transparent 16%),
  repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px, transparent 2px 12px),
  linear-gradient(180deg,#b6c6d1 0%,#8ca5b1 44%,#6b7e8b 100%)}
.photo-window{background:
  radial-gradient(circle at 62% 46%,rgba(255,230,163,.84) 0 3px,transparent 4px),
  radial-gradient(circle at 77% 35%,rgba(255,223,168,.7) 0 2px,transparent 3px),
  linear-gradient(90deg,transparent 46%,rgba(7,12,21,.62) 47% 49%,transparent 50%),
  linear-gradient(180deg,rgba(2,9,19,.1),rgba(2,9,19,.64)),
  linear-gradient(135deg,#17324a,#071521 65%)}

.gallery.is-filtered{
  height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;padding:16px 0 8px;align-items:start;
}
.gallery.is-filtered .work-card{position:relative;left:auto!important;top:auto!important;width:auto!important;transform:rotate(0deg);margin:0}
.gallery.is-filtered .work-card:hover{transform:translateY(-8px)}
.gallery.is-filtered .work-photo{aspect-ratio:1.91 / 1}

footer{padding:28px 0 40px;font-family:ui-sans-serif,system-ui,sans-serif;color:rgba(255,255,255,.58);font-size:10px;letter-spacing:.12em}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:24px}

.modal{position:fixed;inset:0;background:rgba(10,27,58,.66);z-index:200;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(12px)}
.modal.open{display:flex}
.modal-shell{position:relative;width:min(920px,96vw);max-height:88vh}
.modal-card{width:100%;max-height:88vh;overflow:auto;background:rgba(255,255,255,.92);box-shadow:0 40px 90px rgba(0,0,0,.35);display:grid;grid-template-columns:.98fr 1.02fr;position:relative;z-index:2;border-radius:12px;color:#18293c}
.modal-photo{min-height:360px;background:#d7d4cb;border-radius:12px 0 0 12px;overflow:hidden}
.modal-photo img{width:100%;height:100%;object-fit:cover}
.modal-copy{padding:40px 38px 38px}
.modal-copy .overline{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.18em;color:#887b63}
.modal-copy h3{font-size:30px;font-weight:500;line-height:1.55;margin:10px 0 20px}
.modal-copy p{font-size:14px;line-height:2.1;color:#51606d;white-space:pre-line}
.modal-copy a{display:inline-block;margin-top:20px;background:#122840;color:white;padding:13px 18px;text-decoration:none;font-size:12px;letter-spacing:.08em;border-radius:8px}
.close{position:absolute;right:14px;top:14px;z-index:8;width:34px;height:34px;border:1px solid rgba(20,38,56,.13);background:rgba(255,255,255,.94);padding:0;border-radius:50%;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.10);transition:background .2s,border-color .2s,transform .2s}.close:hover{background:#13283a;border-color:#13283a;transform:scale(1.04)}.close::before,.close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.25px;border-radius:999px;background:#25394d;transform-origin:center;transition:background .2s}.close::before{transform:translate(-50%,-50%) rotate(45deg)}.close::after{transform:translate(-50%,-50%) rotate(-45deg)}.close:hover::before,.close:hover::after{background:#fff}
.flash{animation:flash 1.1s ease}
@keyframes flash{0%,100%{box-shadow:var(--shadow)}35%{box-shadow:0 0 0 6px rgba(193,166,109,.38),0 35px 70px rgba(0,0,0,.34)}}

@media (max-width:1100px){
  .gallery.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wrap{width:min(100% - 30px,720px)}
  .nav{height:68px}.navlinks{display:none}.brand strong{font-size:18px}.pick{padding:8px 11px}
  .title-block h2{font-size:24px}
  .gallery-shell{padding-bottom:46px}.constellation-line{display:none}

  /* smartphone: three cards vertically in each horizontally scrollable column */
  .gallery,
  .gallery.is-filtered{
    height:auto;
    display:grid;
    grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;
    grid-auto-columns:min(56vw,230px);
    column-gap:14px;
    row-gap:18px;
    overflow-x:auto;
    overflow-y:visible;
    padding:14px 22px 32px;
    margin-left:-15px;
    margin-right:-15px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:22px;
    scrollbar-width:none;
    align-items:start;
  }
  .gallery::-webkit-scrollbar{display:none}
  .work-card,
  .gallery.is-filtered .work-card{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0;
    margin:0;
    transform:rotate(var(--r));
    scroll-snap-align:start;
    padding:11px 11px 13px;
    border-radius:10px;
  }
  .work-card:hover,
  .gallery.is-filtered .work-card:hover{transform:rotate(var(--r)) translateY(-4px)}
  .work-photo,
  .gallery.is-filtered .work-photo{aspect-ratio:1.91 / 1;border-radius:7px}
  .work-user{font-size:10px;margin-top:9px;letter-spacing:.06em}
  .work-card h3{font-size:14px;line-height:1.55;margin:5px 0 6px;letter-spacing:.03em}
  .obi{font-size:10.5px;line-height:1.72}

  .modal-shell{width:min(920px,96vw);max-height:88vh}
  .modal-card{grid-template-columns:1fr}.modal-photo{min-height:260px;border-radius:12px 12px 0 0}.modal-copy{padding:30px 24px}.modal-copy h3{font-size:25px}
}
@media (max-width:540px){
  .mood{min-width:170px;padding:12px 15px}
  .mood b{font-size:13px}
  .gallery,
  .gallery.is-filtered{grid-auto-columns:min(58vw,220px);column-gap:12px;row-gap:16px;padding-left:18px;padding-right:18px}
}

/* v7: mood selector — no orb / no English, all visible on mobile */
.moods{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  overflow:visible;
  padding:22px 0 4px;
}
.mood{
  min-width:0;
  min-height:48px;
  padding:9px 12px;
  justify-content:center;
  border-radius:6px 24px 6px 24px;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.30);
}
.mood::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:34%;
  height:2px;
  background:linear-gradient(90deg,rgba(214,189,130,.95),transparent);
  opacity:.55;
  transition:.25s;
}
.mood::after{
  content:"";
  position:absolute;
  right:11px;
  bottom:10px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(214,189,130,.65);
  box-shadow:0 0 9px rgba(214,189,130,.45);
}
.mood b{
  font-weight:500;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.06em;
  position:relative;
  z-index:1;
}
.mood.active,.mood:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,rgba(214,189,130,.16),rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.48);
  box-shadow:0 13px 28px rgba(0,0,0,.18);
}
.mood.active::before,.mood:hover::before{width:72%;opacity:.95}
.mood .orb,.mood em{display:none!important}

@media(max-width:900px){
  .moods{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    overflow:visible;
    padding:17px 0 2px;
  }
  .mood{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:7px 8px;
    border-radius:5px 20px 5px 20px;
  }
  .mood b{font-size:12px;letter-spacing:.03em;white-space:nowrap}
  .mood::after{right:8px;bottom:7px}
}
@media(max-width:380px){
  .moods{gap:7px}
  .mood{min-height:40px;padding:6px 6px}
  .mood b{font-size:11px}
}

/* v9 — cleaner top, handwriting, motion, scattered filtering, mobile swipe affordance */
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');

/* remove obsolete controls / copy */
.nav{justify-content:flex-start;height:68px}
.brand strong{
  font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:22px;
  letter-spacing:.12em;
  font-weight:400;
}
.navlinks,.pick,.eyebrow,.title-block p{display:none!important}

.chooser{padding:42px 0 20px}
.title-block{position:relative;display:block;padding-right:0;text-align:center;margin:0 auto 6px}
.title-block h1{
  margin:0;
  font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:400;
  font-size:28px;
  letter-spacing:.02em;
  line-height:1.42;
  transform:none;
  text-align:center;
  text-shadow:0 0 16px rgba(255,255,255,.05);
  animation:titleIn 1s cubic-bezier(.18,.8,.2,1) both, titleBreath 5.6s ease-in-out 1.1s infinite;
}
@keyframes titleIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes titleBreath{0%,100%{text-shadow:0 0 12px rgba(255,255,255,.03)}50%{text-shadow:0 0 20px rgba(214,189,130,.12)}}

/* selector buttons: subtle living light */
.mood{
  animation:moodRise .75s both;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s,box-shadow .28s;
}
.mood:nth-child(1){animation-delay:.05s}.mood:nth-child(2){animation-delay:.11s}.mood:nth-child(3){animation-delay:.17s}.mood:nth-child(4){animation-delay:.23s}.mood:nth-child(5){animation-delay:.29s}.mood:nth-child(6){animation-delay:.35s}
.mood::before{animation:buttonGleam 4.8s ease-in-out infinite}
.mood:nth-child(2)::before{animation-delay:.4s}.mood:nth-child(3)::before{animation-delay:.8s}.mood:nth-child(4)::before{animation-delay:1.2s}.mood:nth-child(5)::before{animation-delay:1.6s}.mood:nth-child(6)::before{animation-delay:2s}
.mood::after{animation:tinyStar 2.8s ease-in-out infinite}
.mood:active{transform:translateY(-1px) scale(.97)!important}
@keyframes moodRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes buttonGleam{0%,70%,100%{opacity:.25;width:28%}82%{opacity:1;width:82%}}
@keyframes tinyStar{0%,100%{opacity:.35;box-shadow:0 0 4px rgba(214,189,130,.25)}50%{opacity:1;box-shadow:0 0 12px rgba(214,189,130,.85)}}

/* cards enter and keep an almost imperceptible floating motion */
.work-card{
  opacity:0;
  animation:cardReveal .85s cubic-bezier(.18,.8,.2,1) forwards, cardFloat 6.8s ease-in-out 1s infinite;
}
.work-card:nth-child(1){animation-delay:.08s,1.08s}.work-card:nth-child(2){animation-delay:.16s,1.16s}.work-card:nth-child(3){animation-delay:.24s,1.24s}.work-card:nth-child(4){animation-delay:.32s,1.32s}.work-card:nth-child(5){animation-delay:.40s,1.40s}.work-card:nth-child(6){animation-delay:.48s,1.48s}.work-card:nth-child(7){animation-delay:.56s,1.56s}
@keyframes cardReveal{from{opacity:0;filter:blur(5px);transform:translateY(22px) rotate(var(--r)) scale(.97)}to{opacity:1;filter:blur(0);transform:translateY(0) rotate(var(--r)) scale(1)}}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.work-card:hover{animation-play-state:paused}

/* filtered desktop: keep a curated scattered composition instead of snapping to a grid */
.gallery.is-filtered{
  display:block;
  position:relative;
  height:620px;
  padding:0;
}
.gallery.is-filtered .work-card{
  position:absolute;
  left:var(--fx,4%)!important;
  top:var(--fy,20px)!important;
  width:var(--fw,305px)!important;
  transform:rotate(var(--fr,var(--r)));
  margin:0;
}
.gallery.is-filtered .work-card:hover{transform:rotate(0deg) translateY(-10px) scale(1.02)}
.gallery.is-filtered .work-photo{aspect-ratio:1.91 / 1}

/* popup entrance */
.modal.open .modal-card{animation:modalIn .36s cubic-bezier(.2,.8,.2,1) both}
.modal.open{animation:veilIn .25s ease both}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.mobile-scroll-guide,.mobile-scroll-progress{display:none}

/* background stars breathe */
body:before{animation:starsTwinkle 8s ease-in-out infinite alternate}
@keyframes starsTwinkle{0%{opacity:.62;filter:brightness(.88)}100%{opacity:.98;filter:brightness(1.18)}}

@media(max-width:1100px) and (min-width:901px){
  .gallery.is-filtered{height:860px}
}

@media(max-width:900px){
  .chooser{padding:38px 0 18px}
  .title-block h1{font-size:22px;letter-spacing:.02em}

  .gallery-viewport{position:relative;margin-left:-15px;margin-right:-15px;overflow:hidden}
  .gallery-viewport:after{
    content:"";position:absolute;right:0;top:34px;bottom:26px;width:34px;pointer-events:none;z-index:12;
    background:linear-gradient(90deg,transparent,rgba(4,16,28,.72));
  }
  .mobile-scroll-guide{
    display:flex;align-items:center;justify-content:flex-end;gap:7px;
    width:100%;padding:0 18px 7px;
    font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.58);
  }
  .mobile-scroll-guide i{display:block;width:10px;height:10px;border-top:1px solid rgba(214,189,130,.9);border-right:1px solid rgba(214,189,130,.9);transform:rotate(45deg);animation:swipeCue 1.55s ease-in-out infinite}
  .mobile-scroll-guide i+ i{margin-left:-6px;animation-delay:.12s}
  @keyframes swipeCue{0%,100%{opacity:.28;translate:-5px 0}50%{opacity:1;translate:4px 0}}

  .mobile-scroll-progress{
    display:block;height:2px;margin:3px 18px 0;background:rgba(255,255,255,.08);overflow:hidden;border-radius:0;
  }
  .mobile-scroll-progress span{display:block;width:26%;height:100%;background:linear-gradient(90deg,rgba(214,189,130,.35),rgba(214,189,130,.95));transform-origin:left;transform:scaleX(.15);transition:transform .12s linear}

  /* retain 3-up vertical columns and horizontal swipe even while filtered */
  .gallery,
  .gallery.is-filtered{
    height:auto;
    display:grid;
    grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;
    grid-auto-columns:min(58vw,220px);
    column-gap:12px;
    row-gap:16px;
    overflow-x:auto;
    overflow-y:visible;
    padding:14px 44px 28px 18px;
    margin:0;
    scroll-snap-type:x proximity;
    scroll-padding-inline:18px;
    scrollbar-width:none;
  }
  .gallery.is-filtered .work-card{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    transform:rotate(var(--r));
  }
  .gallery.is-filtered .work-card:hover{transform:rotate(var(--r)) translateY(-4px)}
}

@media(max-width:380px){
  .title-block h1{font-size:20px}
}

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


/* v10 — stronger swipe affordance + minimal copyright footer */
.site-footer{
  padding:24px 0 32px;
  color:rgba(255,255,255,.52);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:10px;
  letter-spacing:.08em;
  text-align:center;
}
.site-footer .wrap{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:20px;
}

/* v14 — shooting stars fall from the upper-right toward the lower-left */
header,main,footer{position:relative;z-index:1}
.shooting-stars{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.shooting-stars i{
  position:absolute;
  right:-12vw;
  top:var(--start-top,10%);
  width:8px;
  height:8px;
  border-radius:999px;
  opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,1) 0 38%, rgba(239,225,182,.95) 56%, rgba(214,189,130,.35) 72%, transparent 78%);
  box-shadow:0 0 10px rgba(255,255,255,.75),0 0 22px rgba(214,189,130,.34);
  animation:skyShoot var(--shoot-dur,16s) linear infinite;
  animation-delay:var(--shoot-delay,0s);
}
.shooting-stars i::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:140px;
  height:2px;
  border-radius:999px;
  transform-origin:left center;
  transform:translate(0,-50%) rotate(-34deg);
  background:linear-gradient(90deg, rgba(255,255,255,.96), rgba(214,189,130,.42), rgba(214,189,130,0));
  filter:blur(.25px);
  opacity:.92;
}
.shooting-stars i:nth-child(1){--start-top:9%;--shoot-dur:17s;--shoot-delay:2.8s}
.shooting-stars i:nth-child(2){--start-top:22%;--shoot-dur:20s;--shoot-delay:9.8s}
.shooting-stars i:nth-child(3){--start-top:14%;--shoot-dur:23s;--shoot-delay:16.2s}
.shooting-stars i:nth-child(2)::after{width:110px;transform:translate(0,-50%) rotate(-31deg)}
.shooting-stars i:nth-child(3)::after{width:165px;transform:translate(0,-50%) rotate(-37deg)}
@keyframes skyShoot{
  0%,74%{opacity:0;transform:translate3d(0,0,0)}
  75%{opacity:.98}
  82%{opacity:0;transform:translate3d(-128vw,72vh,0)}
  100%{opacity:0;transform:translate3d(-128vw,72vh,0)}
}

/* handwritten heading should look like it was quickly written, not typeset */
.title-block h1{
  font-weight:400;
  font-feature-settings:"palt" 1;
}

@media(max-width:900px){
  .mobile-scroll-guide{
    justify-content:flex-start;
    gap:0;
    padding:1px 18px 8px;
    color:rgba(255,255,255,.72);
    font-size:10px;
    letter-spacing:.06em;
  }
  .mobile-scroll-guide i{display:none!important}
  .mobile-scroll-guide span::before{content:"作品は横にスワイプ"}
  .mobile-scroll-guide span{font-size:0;display:inline-flex;align-items:center}
  .mobile-scroll-guide span::before{font-size:10px}
  .mobile-scroll-guide::after{
    content:"";
    flex:0 0 auto;
    margin-left:12px;
    width:46px;
    height:1px;
    background:linear-gradient(90deg,rgba(214,189,130,.12),rgba(214,189,130,.92));
    animation:swipeLine 2.7s ease-out infinite;
    transform-origin:left center;
  }
  @keyframes swipeLine{0%{transform:translateX(-10px) scaleX(.22);opacity:0}18%{transform:translateX(-4px) scaleX(.42);opacity:.45}52%{transform:translateX(5px) scaleX(1);opacity:.95}78%{transform:translateX(14px) scaleX(.72);opacity:.42}100%{transform:translateX(22px) scaleX(.38);opacity:0}}

  .gallery-viewport::before{
    content:"";
    position:absolute;
    right:13px;
    top:50%;
    z-index:20;
    width:28px;
    height:28px;
    border-right:1px solid rgba(214,189,130,.82);
    border-top:1px solid rgba(214,189,130,.82);
    transform:translateY(-50%) rotate(45deg);
    pointer-events:none;
    opacity:.75;
    animation:edgeArrow 1.5s ease-in-out infinite;
  }
  @keyframes edgeArrow{0%,100%{translate:-5px 0;opacity:.3}50%{translate:2px 0;opacity:.9}}

  /* make the next 3-card column peek into view */
  .gallery,
  .gallery.is-filtered{
    grid-auto-columns:min(45vw,166px);
    padding-right:64px;
  }

  .mobile-scroll-progress{
    height:3px;
    margin-top:7px;
    background:rgba(255,255,255,.07);
  }
  .mobile-scroll-progress span{
    background:linear-gradient(90deg,rgba(214,189,130,.25),#e3cc96);
    box-shadow:0 0 8px rgba(214,189,130,.22);
  }
}


/* v15 — compact mobile polaroids + refined mood tabs */
@media(max-width:900px){
  .work-card,
  .gallery.is-filtered .work-card{padding:9px 9px 11px}
  .work-user{font-size:9px;margin-top:7px}
  .work-card h3{font-size:12.5px;line-height:1.5;margin:4px 0 5px}
  .obi{font-size:9.5px;line-height:1.65;padding:7px 8px;border-radius:5px}
}


/* v17 — centered brand, natural shooting-star trajectory, right card lowered */
.site-header .nav{
  height:58px;
  justify-content:center;
}
.site-header .brand{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  transform:none!important;
}
.site-header .brand strong{
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:.20em!important;
  line-height:1!important;
  transform:none!important;
  font-style:normal!important;
}

/* The visible tail and the falling direction share the same 32° diagonal. */
.shooting-stars i::after{
  transform:translate(0,-50%) rotate(-32deg)!important;
}
.shooting-stars i:nth-child(2)::after,
.shooting-stars i:nth-child(3)::after{
  transform:translate(0,-50%) rotate(-32deg)!important;
}
@keyframes skyShoot{
  0%,74%{opacity:0;transform:translate3d(0,0,0)}
  75%{opacity:.98}
  82%{opacity:0;transform:translate3d(-122vw,76.2vw,0)}
  100%{opacity:0;transform:translate3d(-122vw,76.2vw,0)}
}

@media(max-width:900px){
  .site-header .nav{height:54px}
  .site-header .brand strong{font-size:14px!important;letter-spacing:.18em!important}
}

/* v19 — refined polaroid typography and desktop scale */
.real-work .work-user{font-size:8.5px;letter-spacing:.06em}
@media(min-width:901px){
  .work-card{width:calc(var(--w) - 36px);padding:14px 14px 16px}
  .gallery.is-filtered .work-card{width:calc(var(--fw,305px) - 36px)!important}
  .work-card h3{font-size:14px}
  .work-user{font-size:9px}
  .real-work .work-user{font-size:8px}
  .obi{font-size:11.5px;line-height:1.85}
}
@media(max-width:900px){
  .work-user{font-size:8.5px;margin-top:7px}
  .real-work .work-user{font-size:7.5px}
  .work-card h3{font-size:11.5px;line-height:1.48;margin:4px 0 5px}
  .obi{font-size:9px;line-height:1.62;padding:6px 0 1px;color:#fff;background:transparent;border:0}
}


/* v21 — transparent obi cutout, tighter spacing, centered mobile guide */
.title-block{display:block!important;text-align:center!important;margin:0 auto 4px!important;padding:0!important}
.title-block h1{
  font-size:24px!important;
  letter-spacing:.08em!important;
  transform:none!important;
  text-align:center!important;
}

/* Turn the white card into a framed sheet with a genuine see-through lower window. */
.work-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.26));
  isolation:isolate;
}
.work-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;bottom:78px;
  z-index:-2;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.48);
  border-bottom:0;
  border-radius:12px 12px 0 0;
}
.work-card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:82px;
  z-index:-2;
  border:12px solid rgba(255,255,255,.96);
  border-top-width:10px;
  background:transparent;
  border-radius:0 0 12px 12px;
  pointer-events:none;
}
.work-photo,.work-user,.work-card h3,.obi{position:relative;z-index:1}
.obi{
  min-height:58px;
  max-height:58px;
  margin:9px 0 1px!important;
  padding:8px 10px!important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#fff!important;
  background:rgba(4,17,31,.10)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:8px!important;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  text-shadow:0 1px 5px rgba(0,0,0,.58)!important;
}
.work-card h3{margin-top:1px!important}
.work-user{margin-bottom:0!important}

@media(min-width:901px){
  .gallery{height:760px!important}
  .gallery-shell{padding-bottom:58px!important}
  .title-block h1{font-size:24px!important}
  .work-card h3{margin-top:0!important}
  .obi{min-height:56px;max-height:56px}
}

@media(max-width:900px){
  /* reduce the empty space between filters and swipe guide */
  .chooser{padding-bottom:5px!important}
  .gallery-shell{padding-top:7px!important}
  .mobile-scroll-guide{
    justify-content:center!important;
    text-align:center!important;
    padding:0 12px 5px!important;
  }
  .mobile-scroll-guide span{justify-content:center!important}
  .mobile-scroll-guide::after{margin-left:11px!important}
  .title-block h1{font-size:18px!important;letter-spacing:.075em!important}
  .work-card h3{margin-top:0!important;margin-bottom:4px!important}
  .work-user{margin-bottom:-1px!important}
  .obi{
    min-height:50px;
    max-height:50px;
    margin-top:7px!important;
    padding:7px 8px!important;
    border-radius:7px!important;
  }
  .work-card::before{bottom:68px}
  .work-card::after{height:72px;border-width:9px;border-top-width:8px}
}


/* v22 — title clamp, cleaner obi window, softer mobile guide gap, reduced overlap */
.work-card h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:3.2em;
}

/* keep the lower window genuinely transparent and softly rounded */
.obi{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:9px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* footer truly centered */
.site-footer .wrap{
  display:block!important;
  text-align:center!important;
}

@media(min-width:901px){
  .obi{
    min-height:54px;
    max-height:54px;
    padding:8px 11px!important;
    border-radius:10px!important;
  }
}

@media(max-width:900px){
  /* bring back a touch more breathing room above the swipe guide */
  .gallery-shell{padding-top:12px!important}
  .mobile-scroll-guide{
    padding:5px 12px 8px!important;
  }
  .obi{
    min-height:48px;
    max-height:48px;
    padding:7px 8px!important;
    border-radius:8px!important;
  }
  .work-card h3{max-height:3.05em}
}


/* v23 — cheki cards become outline-only with white typography */
.work-card{
  background:transparent!important;
  border:1.4px solid rgba(255,255,255,.74)!important;
  border-radius:16px!important;
  box-shadow:0 18px 34px rgba(0,0,0,.20)!important;
  color:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.work-card::before,
.work-card::after{display:none!important;content:none!important}
.work-photo{
  border:1px solid rgba(255,255,255,.32);
  border-radius:10px!important;
  background:transparent;
}
.work-photo:after{box-shadow:inset 0 0 36px rgba(0,0,0,.10)}
.work-user,
.work-card h3,
.obi{color:#fff!important}
.work-user{
  opacity:.82;
  letter-spacing:.08em;
}
.work-card h3{
  text-shadow:0 1px 10px rgba(0,0,0,.24);
}
.obi{
  margin-top:9px!important;
  padding:10px 12px!important;
  min-height:54px;
  max-height:54px;
  background:transparent!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  text-shadow:0 1px 8px rgba(0,0,0,.46)!important;
}
.work-card:hover{
  box-shadow:0 26px 48px rgba(0,0,0,.28)!important;
}
@media(min-width:901px){
  .work-card{padding:16px 16px 18px!important}
}
@media(max-width:900px){
  .work-card,
  .gallery.is-filtered .work-card{
    border-radius:14px!important;
    padding:10px 10px 12px!important;
  }
  .work-photo{border-radius:9px!important}
  .obi{
    min-height:48px;
    max-height:48px;
    padding:8px 9px!important;
    border-radius:9px!important;
  }
}


/* v24 — ninth work placement */
.work-card:nth-child(8){animation-delay:.64s,1.64s}
.work-card:nth-child(9){animation-delay:.72s,1.72s}
@media(min-width:901px){
  .gallery{height:1010px!important}
  .gallery-shell{padding-bottom:50px!important}
}


/* v25 — remove front-card excerpts; no-overlap scattered desktop; sturdier filtering */
.gallery .obi{display:none!important}
.gallery .work-card{padding-bottom:14px!important}
.gallery .work-user{margin-top:9px!important}
.gallery .work-card h3{margin:4px 0 0!important}

@media(min-width:901px){
  .gallery,
  .gallery.is-filtered{
    position:relative!important;
    display:grid!important;
    height:auto!important;
    padding:12px 0 34px!important;
    margin-top:8px!important;
    overflow:visible!important;
    align-items:start!important;
    justify-items:center!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:18px!important;
    row-gap:26px!important;
  }
  .gallery.is-filtered{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:20px!important;
    row-gap:30px!important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:min(100%,232px)!important;
    margin:0 auto!important;
    transform:translateY(var(--shift,0)) rotate(var(--rot,var(--r)))!important;
  }
  .work-card:hover,
  .gallery.is-filtered .work-card:hover{
    transform:translateY(calc(var(--shift,0) - 10px)) rotate(0deg) scale(1.02)!important;
  }
  .work-card:nth-child(1){--shift:26px;--rot:-4deg}
  .work-card:nth-child(2){--shift:0px;--rot:3deg}
  .work-card:nth-child(3){--shift:34px;--rot:-2.5deg}
  .work-card:nth-child(4){--shift:10px;--rot:4deg}
  .work-card:nth-child(5){--shift:-4px;--rot:2.5deg}
  .work-card:nth-child(6){--shift:30px;--rot:-3deg}
  .work-card:nth-child(7){--shift:8px;--rot:3deg}
  .work-card:nth-child(8){--shift:22px;--rot:-2deg}
  .work-card:nth-child(9){--shift:-6px;--rot:2deg}
  .gallery-shell{padding-bottom:56px!important}
}

@media(min-width:901px) and (max-width:1180px){
  .gallery,
  .gallery.is-filtered{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:28px!important}
  .gallery.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .gallery-shell{padding-top:14px!important}
  .mobile-scroll-guide{padding:7px 12px 8px!important}
  .gallery .obi{display:none!important}
  .gallery .work-card,
  .gallery.is-filtered .work-card{padding-bottom:11px!important}
}


/* v27 — twelve compact discovery tags; mobile is 3 across */
.moods{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  padding-top:20px!important;
}
.mood{
  min-height:42px!important;
  padding:7px 8px!important;
}
.mood b{
  font-size:12px!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
}

@media(max-width:900px){
  .moods{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:16px 0 2px!important;
  }
  .mood{
    min-height:39px!important;
    padding:6px 4px!important;
    border-radius:5px 16px 5px 16px!important;
  }
  .mood b{
    font-size:10.5px!important;
    letter-spacing:0!important;
  }
  .mood::after{right:6px!important;bottom:6px!important}
}

@media(max-width:360px){
  .moods{gap:6px!important}
  .mood{min-height:37px!important;padding:5px 2px!important}
  .mood b{font-size:9.5px!important}
}


/* v28 — night wording + small subtitle */
.title-block .title-sub{
  display:block!important;
  margin:7px 0 0!important;
  color:rgba(255,255,255,.56)!important;
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif!important;
  font-size:11px!important;
  line-height:1.5!important;
  letter-spacing:.12em!important;
  text-align:center!important;
}
@media(max-width:900px){
  .title-block .title-sub{
    margin-top:6px!important;
    font-size:10px!important;
    letter-spacing:.10em!important;
  }
}


/* v33 — restore the outer cheki border to the original thicker weight while keeping other refinements */
.work-card,
.gallery.is-filtered .work-card{
  border-width:1.4px!important;
  border-color:rgba(255,255,255,.74)!important;
}
.work-photo,
.gallery.is-filtered .work-photo{
  border:0!important;
}
.mood b{
  font-weight:400!important;
  opacity:.90;
}

.shooting-stars i{
  right:var(--start-right,-12vw);
}
.shooting-stars i:nth-child(4){
  --start-right:38vw;
  --start-top:3%;
  --shoot-dur:19s;
  --shoot-delay:5.4s;
}
.shooting-stars i:nth-child(4)::after{
  width:125px;
  opacity:.78;
}

@media(max-width:900px){
  .work-card,
  .gallery.is-filtered .work-card{
    border-width:.7px!important;
  }
  .mood b{font-weight:400!important;opacity:.88}
  .shooting-stars i:nth-child(4){--start-right:30vw;--start-top:2%;}
}


/* v34 — smartphone only: a little more breathing room between cheki cards */
@media(max-width:900px){
  .gallery,
  .gallery.is-filtered{
    column-gap:18px!important;
    row-gap:24px!important;
  }
}


/* v35 — remove any remaining thumbnail frame/inner stroke */
.work-photo,
.gallery.is-filtered .work-photo{
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.work-photo img,
.gallery.is-filtered .work-photo img{
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
}
.work-photo::before,
.work-photo::after,
.gallery.is-filtered .work-photo::before,
.gallery.is-filtered .work-photo::after{
  display:none!important;
  content:none!important;
  box-shadow:none!important;
  background:none!important;
}


/* v38 — stronger navy overlay on full-screen galaxy background */
body{
  background:
    linear-gradient(180deg,rgba(2,10,24,.68) 0%,rgba(2,12,28,.76) 48%,rgba(2,10,24,.82) 100%),
    radial-gradient(circle at 22% 16%,rgba(4,24,54,.16),transparent 36rem),
    url("../img/galaxy-bg.webp") center center / cover fixed no-repeat!important;
  background-color:#020b16!important;
}

/* keep the decorative star layers above the photograph but very subtle */
body::before{opacity:.42!important;}
body::after{opacity:.10!important;}

.gallery .work-user,
.gallery.is-filtered .work-user{
  margin-top:13px!important;
}

@media(max-width:900px){
  body{
    background-position:center top!important;
    background-attachment:scroll!important;
  }
  .gallery .work-user,
  .gallery.is-filtered .work-user{
    margin-top:11px!important;
  }
}


/* v40 — brighter navy overlay, stronger coverage, lighter heading, 12-card scatter */
body{
  background:
    linear-gradient(180deg,rgba(12,43,78,.82) 0%,rgba(8,36,72,.86) 48%,rgba(5,27,59,.90) 100%),
    radial-gradient(circle at 24% 14%,rgba(34,91,145,.22),transparent 38rem),
    url("../img/galaxy-bg.webp") center center / cover fixed no-repeat!important;
  background-color:#09284a!important;
}
body::before{opacity:.34!important;}
body::after{opacity:.08!important;}

.title-block h1{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif!important;
  font-weight:300!important;
  letter-spacing:.095em!important;
  text-shadow:none!important;
}

@media(min-width:901px){
  .work-card:nth-child(10){--shift:18px;--rot:3deg}
  .work-card:nth-child(11){--shift:-3px;--rot:-3deg}
  .work-card:nth-child(12){--shift:26px;--rot:2deg}
}

@media(max-width:900px){
  body{
    background-position:center top!important;
    background-attachment:scroll!important;
  }
  .title-block h1{font-weight:300!important;letter-spacing:.08em!important;}
}


/* v41 — a long, fine rule before each creator name */
.gallery .work-user,
.gallery.is-filtered .work-user{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
.gallery .work-user::before,
.gallery.is-filtered .work-user::before{
  content:"";
  display:block;
  width:32px;
  height:1px;
  flex:0 0 32px;
  background:rgba(255,255,255,.42);
}
@media(max-width:900px){
  .gallery .work-user,
  .gallery.is-filtered .work-user{gap:7px!important;}
  .gallery .work-user::before,
  .gallery.is-filtered .work-user::before{
    width:24px;
    flex-basis:24px;
    opacity:.9;
  }
}


/* v43 — remove popup orbit decoration and shorten creator-name lead line */


/* v44 — stronger navy overlay and more visible twinkling stars */
body{
  background:
    linear-gradient(180deg,rgba(16,45,82,.86) 0%,rgba(12,38,72,.90) 46%,rgba(7,25,51,.94) 100%),
    radial-gradient(circle at 24% 14%,rgba(52,110,170,.20),transparent 36rem),
    radial-gradient(circle at 78% 16%,rgba(28,63,110,.16),transparent 32rem),
    url("../img/galaxy-bg.webp") center center / cover fixed no-repeat!important;
  background-color:#0a2240!important;
}
body::before{opacity:.46!important;}
body::after{opacity:.11!important;}

.twinkle-stars i{
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0 33%, rgba(245,237,214,.96) 46%, rgba(214,189,130,.92) 62%, transparent 76%);
  box-shadow:0 0 10px rgba(255,255,255,.42),0 0 24px rgba(214,189,130,.28);
  opacity:.16;
}
@keyframes starTwinkle{
  0%,100%{opacity:.14;transform:scale(.72)}
  18%{opacity:.30;transform:scale(.9)}
  40%{opacity:.92;transform:scale(1.22)}
  58%{opacity:.34;transform:scale(.95)}
  76%{opacity:.78;transform:scale(1.1)}
}
.twinkle-stars i:nth-child(21){left:4%;top:28%;--size:5px;--dur:5.7s;--delay:1.8s}
.twinkle-stars i:nth-child(22){left:12%;top:72%;--size:4px;--dur:6.5s;--delay:.7s}
.twinkle-stars i:nth-child(23){left:18%;top:38%;--size:3px;--dur:4.9s;--delay:2.2s}
.twinkle-stars i:nth-child(24){left:26%;top:84%;--size:5px;--dur:6.2s;--delay:3.1s}
.twinkle-stars i:nth-child(25){left:34%;top:32%;--size:4px;--dur:5.1s;--delay:1.2s}
.twinkle-stars i:nth-child(26){left:46%;top:78%;--size:3px;--dur:6.8s;--delay:2.9s}
.twinkle-stars i:nth-child(27){left:58%;top:38%;--size:5px;--dur:5.5s;--delay:.5s}
.twinkle-stars i:nth-child(28){left:64%;top:86%;--size:4px;--dur:6.1s;--delay:2.4s}
.twinkle-stars i:nth-child(29){left:72%;top:41%;--size:3px;--dur:4.8s;--delay:1.5s}
.twinkle-stars i:nth-child(30){left:79%;top:83%;--size:5px;--dur:5.9s;--delay:3.3s}
.twinkle-stars i:nth-child(31){left:86%;top:34%;--size:4px;--dur:6.4s;--delay:1.1s}
.twinkle-stars i:nth-child(32){left:93%;top:61%;--size:3px;--dur:5.0s;--delay:2.7s}

@media(max-width:900px){
  body{
    background:
      linear-gradient(180deg,rgba(16,45,82,.88) 0%,rgba(12,38,72,.92) 48%,rgba(7,25,51,.95) 100%),
      radial-gradient(circle at 24% 12%,rgba(52,110,170,.16),transparent 26rem),
      url("../img/galaxy-bg.webp") center top / cover scroll no-repeat!important;
    background-color:#0a2240!important;
  }
}


/* v46 — smartphone modal thumbnail keeps note's 1.91:1 aspect ratio */
@media(max-width:900px){
  .modal-photo{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.91 / 1!important;
    border-radius:12px 12px 0 0!important;
  }
  .modal-photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}


/* v47 — smartphone popup close button: translucent circle */
@media(max-width:900px){
  .modal .close{
    background:rgba(255,255,255,.58)!important;
    border-color:rgba(255,255,255,.46)!important;
    box-shadow:0 4px 12px rgba(0,0,0,.08)!important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
}


/* v48 — remove header and place the YORU logo quietly above the main question */
.site-header{display:none!important;}
.chooser{padding-top:34px!important;}
.title-block{display:flex!important;flex-direction:column!important;align-items:center!important;}
.yoru-logo{
  display:block;
  width:190px;
  max-width:min(58vw,190px);
  height:auto;
  margin:0 auto 16px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.05));
}
@media(max-width:900px){
  .chooser{padding-top:27px!important;}
  .yoru-logo{width:135px;max-width:48vw;margin-bottom:12px;}
}


/* v49 — make the main question much smaller and more understated */
.title-block h1{
  font-size:15px!important;
  line-height:1.55!important;
  letter-spacing:.075em!important;
}
@media(max-width:900px){
  .title-block h1{
    font-size:12px!important;
    letter-spacing:.065em!important;
  }
}


/* v52 — restore the original understated Mincho question styling */
.title-block h1{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif!important;
  font-weight:300!important;
  font-size:15px!important;
  line-height:1.55!important;
  letter-spacing:.075em!important;
}
@media(max-width:900px){
  .title-block h1{
    font-size:12px!important;
    font-weight:300!important;
    letter-spacing:.065em!important;
  }
}


/* v53 — shift the full-screen overlay a little deeper toward classic navy */
body{
  background:
    linear-gradient(180deg,rgba(8,30,63,.88) 0%,rgba(6,27,58,.92) 46%,rgba(4,19,43,.95) 100%),
    radial-gradient(circle at 24% 14%,rgba(29,72,126,.18),transparent 36rem),
    radial-gradient(circle at 78% 16%,rgba(18,48,92,.15),transparent 32rem),
    url("../img/galaxy-bg.webp") center center / cover fixed no-repeat!important;
  background-color:#061b38!important;
}
@media(max-width:900px){
  body{
    background:
      linear-gradient(180deg,rgba(8,30,63,.90) 0%,rgba(6,27,58,.93) 48%,rgba(4,19,43,.96) 100%),
      radial-gradient(circle at 24% 12%,rgba(29,72,126,.15),transparent 26rem),
      url("../img/galaxy-bg.webp") center top / cover scroll no-repeat!important;
    background-color:#061b38!important;
  }
}


/* v54 — give the main question a little more breathing room between characters */
.title-block h1{
  letter-spacing:.13em!important;
}
@media(max-width:900px){
  .title-block h1{
    letter-spacing:.10em!important;
  }
}


/* v57 — twinkling stars in modal backdrop */
.modal{overflow:hidden;}
.modal::before,
.modal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.modal::before{
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.1px, transparent 1.9px) 8% 12% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.3px, transparent 2.1px) 18% 24% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.8px) 29% 14% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.4px, transparent 2.1px) 41% 19% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.96) 0 1.2px, transparent 2px) 53% 11% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.8px) 65% 26% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.9px) 77% 15% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.8) 0 1.4px, transparent 2.2px) 89% 22% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.7px) 12% 42% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.84) 0 1.2px, transparent 1.9px) 24% 58% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.93) 0 1.1px, transparent 1.9px) 37% 46% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.3px, transparent 2.1px) 49% 62% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.94) 0 1px, transparent 1.7px) 61% 48% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.4px, transparent 2.1px) 72% 61% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.8px) 84% 45% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.85) 0 1.3px, transparent 2px) 94% 66% / auto auto no-repeat;
  opacity:.82;
  animation:modalStarsTwinkleA 4.8s ease-in-out infinite alternate;
}
.modal::after{
  background:
    radial-gradient(circle, rgba(214,189,130,.92) 0 1.2px, transparent 2px) 15% 18% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.76) 0 1px, transparent 1.7px) 33% 29% / auto auto no-repeat,
    radial-gradient(circle, rgba(214,189,130,.88) 0 1.1px, transparent 1.9px) 45% 13% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.74) 0 1.2px, transparent 1.9px) 57% 37% / auto auto no-repeat,
    radial-gradient(circle, rgba(214,189,130,.9) 0 1px, transparent 1.8px) 70% 22% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.74) 0 1.2px, transparent 2px) 82% 33% / auto auto no-repeat,
    radial-gradient(circle, rgba(214,189,130,.88) 0 1px, transparent 1.8px) 22% 72% / auto auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.1px, transparent 1.8px) 52% 74% / auto auto no-repeat,
    radial-gradient(circle, rgba(214,189,130,.85) 0 1.2px, transparent 1.9px) 78% 70% / auto auto no-repeat;
  opacity:.55;
  animation:modalStarsTwinkleB 6.6s ease-in-out infinite;
}
@keyframes modalStarsTwinkleA{
  0%,100%{opacity:.42;transform:scale(1)}
  25%{opacity:.82;transform:scale(1.01)}
  50%{opacity:.58;transform:scale(1)}
  75%{opacity:.92;transform:scale(1.015)}
}
@keyframes modalStarsTwinkleB{
  0%,100%{opacity:.22;transform:scale(1)}
  30%{opacity:.62;transform:scale(1.02)}
  60%{opacity:.3;transform:scale(1)}
  85%{opacity:.7;transform:scale(1.015)}
}


/* v58 — real DOM stars in the popup backdrop; footer branding */
.modal::before,
.modal::after{content:none!important;display:none!important;}
.modal-shell{z-index:2;}
.modal-stars{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.modal-stars i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s,4px);
  height:var(--s,4px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,1) 0 28%,rgba(241,231,202,.96) 45%,rgba(214,189,130,.72) 63%,transparent 76%);
  box-shadow:0 0 8px rgba(255,255,255,.52),0 0 18px rgba(214,189,130,.28);
  opacity:.18;
  animation:modalStarPulse var(--d,4.8s) ease-in-out var(--delay,0s) infinite;
}
.modal-stars i:nth-child(1){--x:5%;--y:10%;--s:4px;--d:4.4s;--delay:.1s}
.modal-stars i:nth-child(2){--x:12%;--y:23%;--s:6px;--d:5.8s;--delay:1.1s}
.modal-stars i:nth-child(3){--x:20%;--y:8%;--s:3px;--d:4.9s;--delay:2.1s}
.modal-stars i:nth-child(4){--x:29%;--y:18%;--s:5px;--d:6.1s;--delay:.6s}
.modal-stars i:nth-child(5){--x:41%;--y:9%;--s:4px;--d:5.0s;--delay:1.7s}
.modal-stars i:nth-child(6){--x:54%;--y:14%;--s:6px;--d:6.4s;--delay:2.7s}
.modal-stars i:nth-child(7){--x:66%;--y:8%;--s:3px;--d:4.6s;--delay:.9s}
.modal-stars i:nth-child(8){--x:78%;--y:20%;--s:5px;--d:5.5s;--delay:1.9s}
.modal-stars i:nth-child(9){--x:89%;--y:11%;--s:4px;--d:6.0s;--delay:3.1s}
.modal-stars i:nth-child(10){--x:95%;--y:29%;--s:3px;--d:4.8s;--delay:1.2s}
.modal-stars i:nth-child(11){--x:7%;--y:44%;--s:5px;--d:5.7s;--delay:2.2s}
.modal-stars i:nth-child(12){--x:17%;--y:61%;--s:3px;--d:4.5s;--delay:.4s}
.modal-stars i:nth-child(13){--x:27%;--y:78%;--s:6px;--d:6.3s;--delay:1.5s}
.modal-stars i:nth-child(14){--x:38%;--y:52%;--s:4px;--d:5.1s;--delay:2.9s}
.modal-stars i:nth-child(15){--x:48%;--y:84%;--s:3px;--d:4.7s;--delay:1.0s}
.modal-stars i:nth-child(16){--x:58%;--y:64%;--s:5px;--d:5.9s;--delay:2.0s}
.modal-stars i:nth-child(17){--x:69%;--y:78%;--s:4px;--d:6.2s;--delay:.7s}
.modal-stars i:nth-child(18){--x:79%;--y:53%;--s:6px;--d:5.4s;--delay:2.4s}
.modal-stars i:nth-child(19){--x:89%;--y:70%;--s:3px;--d:4.9s;--delay:1.3s}
.modal-stars i:nth-child(20){--x:96%;--y:88%;--s:5px;--d:6.5s;--delay:3.0s}
.modal-stars i:nth-child(21){--x:14%;--y:88%;--s:4px;--d:5.2s;--delay:1.8s}
.modal-stars i:nth-child(22){--x:34%;--y:34%;--s:3px;--d:4.6s;--delay:2.6s}
.modal-stars i:nth-child(23){--x:63%;--y:36%;--s:4px;--d:5.8s;--delay:.3s}
.modal-stars i:nth-child(24){--x:86%;--y:39%;--s:5px;--d:6.0s;--delay:2.2s}
@keyframes modalStarPulse{
  0%,100%{opacity:.12;transform:scale(.7)}
  20%{opacity:.28;transform:scale(.9)}
  46%{opacity:1;transform:scale(1.35)}
  65%{opacity:.34;transform:scale(.92)}
  82%{opacity:.82;transform:scale(1.16)}
}
@media(max-width:900px){
  .modal-stars i{box-shadow:0 0 7px rgba(255,255,255,.48),0 0 14px rgba(214,189,130,.24);}
}


/* v62 — place the updated YORU logo in the footer as well */
.site-footer{padding:28px 0 40px;}
.site-footer .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  text-align:center;
}
.footer-logo{
  display:block;
  width:96px;
  max-width:28vw;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.05));
}
.footer-copy{
  font-family:ui-sans-serif,system-ui,sans-serif;
  color:rgba(255,255,255,.58);
  font-size:10px;
  letter-spacing:.12em;
}
@media(max-width:900px){
  .footer-logo{width:84px;max-width:34vw;}
  .site-footer .wrap{gap:10px;padding-top:22px;}
}


/* v64 — vertical work browser on desktop and mobile; tabs stay above while cards scroll beneath */
.chooser{
  padding-bottom:16px!important;
}
.browser-frame{
  position:relative;
  width:100%;
  height:clamp(560px,68vh,760px);
  overflow:hidden;
}
.browser-scroll{
  position:relative;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.browser-scroll::-webkit-scrollbar{width:6px}
.browser-scroll::-webkit-scrollbar-track{background:transparent}
.browser-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.20);
  border-radius:999px;
}
.browser-tabs{
  position:sticky;
  top:0;
  z-index:90;
  padding:12px 0 16px;
  background:linear-gradient(180deg,rgba(5,24,52,.98) 0%,rgba(5,24,52,.96) 76%,rgba(5,24,52,.90) 100%);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 28px rgba(2,10,24,.18);
}
.browser-tabs::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-22px;
  height:22px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,24,52,.82),rgba(5,24,52,0));
}
.browser-tabs .moods{
  margin:0 auto!important;
  padding:0!important;
}
.gallery-shell{
  padding:22px 0 58px!important;
}
.gallery-shell .constellation-line{
  opacity:.42;
}
.gallery-viewport{
  position:relative!important;
  margin:0!important;
  overflow:visible!important;
}
.gallery-viewport::before,
.gallery-viewport::after{
  display:none!important;
  content:none!important;
}
.mobile-scroll-guide,
.mobile-scroll-progress{
  display:none!important;
}
.gallery,
.gallery.is-filtered{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:24px 0 46px!important;
  margin:0!important;
  column-gap:28px!important;
  row-gap:34px!important;
  align-items:start!important;
  justify-items:center!important;
  scroll-snap-type:none!important;
}
.work-card,
.gallery.is-filtered .work-card{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:min(100%,260px)!important;
  min-width:0!important;
  margin:0 auto!important;
  transform:rotate(var(--rot,var(--r)))!important;
  scroll-snap-align:none!important;
}
.work-card:hover,
.gallery.is-filtered .work-card:hover{
  transform:translateY(-8px) rotate(0deg) scale(1.015)!important;
}

@media(min-width:901px) and (max-width:1180px){
  .gallery,
  .gallery.is-filtered{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:22px!important;
  }
}

@media(max-width:900px){
  .chooser{
    padding-bottom:12px!important;
  }
  .browser-frame{
    height:min(72svh,680px);
    min-height:540px;
  }
  .browser-scroll{
    scrollbar-width:none;
  }
  .browser-scroll::-webkit-scrollbar{display:none}
  .browser-tabs{
    padding:10px 0 13px;
    background:linear-gradient(180deg,rgba(5,24,52,.985) 0%,rgba(5,24,52,.965) 78%,rgba(5,24,52,.91) 100%);
  }
  .browser-tabs::after{
    bottom:-18px;
    height:18px;
  }
  .browser-tabs .moods{
    width:min(100% - 30px,720px)!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .gallery-shell{
    padding:20px 0 48px!important;
  }
  .gallery,
  .gallery.is-filtered{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    column-gap:14px!important;
    row-gap:30px!important;
    padding:22px 15px 44px!important;
    margin:0!important;
    overflow:visible!important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    width:100%!important;
    transform:rotate(var(--r))!important;
  }
  .work-card:hover,
  .gallery.is-filtered .work-card:hover{
    transform:translateY(-4px) rotate(var(--r))!important;
  }
}

@media(max-width:370px){
  .browser-frame{
    min-height:520px;
    height:72svh;
  }
  .gallery,
  .gallery.is-filtered{
    column-gap:11px!important;
    row-gap:26px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* v65 — taller vertical browser + page-scroll gutters */
.browser-frame{
  height:clamp(840px,102vh,1140px)!important;
}
.browser-scroll{
  width:calc(100% - 56px)!important;
  margin:0 auto!important;
  overscroll-behavior-y:auto!important;
}

@media(max-width:900px){
  .browser-frame{
    height:min(108svh,1020px)!important;
    min-height:810px!important;
  }
  .browser-scroll{
    width:calc(100% - 24px)!important;
    margin:0 auto!important;
    overscroll-behavior-y:auto!important;
  }
}

@media(max-width:370px){
  .browser-frame{
    height:min(108svh,960px)!important;
    min-height:780px!important;
  }
}

/* v66 — desktop 4 cards per row */
@media (min-width:901px){
  .gallery,
  .gallery.is-filtered{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:24px !important;
    row-gap:34px !important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    width:min(100%,220px) !important;
  }
}

/* v67 — widen the letter spacing of the main question */
.title-block h1{
  letter-spacing:.18em!important;
}
@media(max-width:900px){
  .title-block h1{
    letter-spacing:.14em!important;
  }
}


/* v69 — slightly larger cards; desktop emphasis */
@media(min-width:901px){
  .gallery,
  .gallery.is-filtered{
    column-gap:18px!important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    width:min(100%,248px)!important;
  }
}
@media(max-width:900px){
  .gallery,
  .gallery.is-filtered{
    column-gap:12px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}


/* v70 — ensure footer logo is perfectly centered */
.site-footer .wrap > .footer-logo{
  margin-left:auto;
  margin-right:auto;
  align-self:center;
}


/* v71 — mobile: remove the special left/right page-scroll gutters */
@media(max-width:900px){
  .browser-scroll{
    width:100%!important;
    margin:0!important;
    overscroll-behavior-y:auto!important;
  }
}


/* v72 — mobile: narrower side gutters and slightly larger cheki cards while keeping 2 columns */
@media(max-width:900px){
  .gallery,
  .gallery.is-filtered{
    column-gap:10px!important;
    row-gap:30px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    width:min(100%, 100%)!important;
  }
}
@media(max-width:370px){
  .gallery,
  .gallery.is-filtered{
    column-gap:9px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
}


/* v73 — restore the work-browser scrolling behavior to v64 */
.browser-frame{
  position:relative!important;
  width:100%!important;
  height:clamp(560px,68vh,760px)!important;
  overflow:hidden!important;
}
.browser-scroll{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
}

/* add a clearer gap between footer logo and copyright */
.site-footer .wrap{
  gap:20px!important;
}

@media(max-width:900px){
  .browser-frame{
    height:min(72svh,680px)!important;
    min-height:540px!important;
  }
  .browser-scroll{
    width:100%!important;
    height:100%!important;
    margin:0!important;
    overscroll-behavior:contain!important;
    scrollbar-width:none!important;
  }
  .browser-scroll::-webkit-scrollbar{display:none!important;}
  .site-footer .wrap{
    gap:17px!important;
  }
}

@media(max-width:370px){
  .browser-frame{
    min-height:520px!important;
    height:72svh!important;
  }
}

/* v74 — increase the vertical work-browser height to about 1.5x v73 */
.browser-frame{
  height:clamp(840px,102vh,1140px)!important;
}
@media(max-width:900px){
  .browser-frame{
    height:min(108svh,1020px)!important;
    min-height:810px!important;
  }
}
@media(max-width:370px){
  .browser-frame{
    min-height:780px!important;
    height:108svh!important;
  }
}


/* v75 — work browser height at about 1.2x v73 + breathing room after the last cheki */
.browser-frame{
  height:clamp(672px,81.6vh,912px)!important;
}
.scroll-end-spacer{
  width:100%;
  height:150px;
  flex:0 0 auto;
  pointer-events:none;
}
@media(max-width:900px){
  .browser-frame{
    height:min(86.4svh,816px)!important;
    min-height:648px!important;
  }
  .scroll-end-spacer{
    height:125px;
  }
}
@media(max-width:370px){
  .browser-frame{
    min-height:624px!important;
    height:86.4svh!important;
  }
  .scroll-end-spacer{
    height:110px;
  }
}


/* v76 — keep the YORU footer visible at the bottom of the viewport on PC, iPad and mobile */
.site-footer{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:120!important;
  margin:0!important;
  padding:26px 0 14px!important;
  background:linear-gradient(180deg,rgba(5,24,52,0) 0%,rgba(5,24,52,.82) 34%,rgba(5,24,52,.97) 100%)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.site-footer .wrap{
  width:min(100% - 40px,1180px)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  padding-top:12px!important;
  gap:14px!important;
}
.site-footer .footer-logo{
  width:82px!important;
  max-width:24vw!important;
}
.site-footer .footer-copy{
  line-height:1.35!important;
}

/* reserve room so page content and the last cheki can clear the fixed footer */
body{
  padding-bottom:118px!important;
}
.scroll-end-spacer{
  height:190px!important;
}

@media(max-width:900px){
  .site-footer{
    padding:22px 0 10px!important;
  }
  .site-footer .wrap{
    width:min(100% - 28px,720px)!important;
    padding-top:10px!important;
    gap:11px!important;
  }
  .site-footer .footer-logo{
    width:68px!important;
    max-width:30vw!important;
  }
  body{
    padding-bottom:102px!important;
  }
  .scroll-end-spacer{
    height:165px!important;
  }
}


/* v77 — soften the transition between logo area and tabs, and simplify the footer */
.chooser{
  padding-bottom:10px!important;
}
.browser-frame{
  margin-top:-10px!important;
}
.browser-tabs{
  padding-top:8px!important;
  background:linear-gradient(180deg,rgba(8,31,67,.54) 0%,rgba(8,31,67,.88) 38%,rgba(5,24,52,.96) 100%)!important;
  box-shadow:none!important;
  border-top:none!important;
}
.browser-tabs::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:18px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,31,67,0) 0%,rgba(8,31,67,.48) 100%);
}
.browser-tabs::after{
  background:linear-gradient(180deg,rgba(5,24,52,.88),rgba(5,24,52,0))!important;
}

.site-footer{
  padding:10px 0 max(4px, env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(5,24,52,0) 0%,rgba(5,24,52,.70) 42%,rgba(5,24,52,.94) 100%)!important;
}
.site-footer .wrap{
  width:min(100% - 24px,1180px)!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  border-top:none!important;
  padding-top:0!important;
  padding-bottom:0!important;
  gap:0!important;
}
.site-footer .footer-logo{
  display:none!important;
}
.site-footer .footer-copy{
  text-align:center!important;
  width:100%!important;
  letter-spacing:.08em!important;
  font-size:12px!important;
  line-height:1.2!important;
}
body{
  padding-bottom:66px!important;
}
.scroll-end-spacer{
  height:136px!important;
}

@media(max-width:900px){
  .chooser{
    padding-bottom:8px!important;
  }
  .browser-frame{
    margin-top:-8px!important;
  }
  .browser-tabs{
    padding-top:7px!important;
  }
  .browser-tabs::before{
    top:-14px;
    height:14px;
  }
  .site-footer{
    padding:8px 0 max(2px, env(safe-area-inset-bottom))!important;
  }
  .site-footer .wrap{
    width:min(100% - 16px,720px)!important;
  }
  .site-footer .footer-copy{
    font-size:11px!important;
    line-height:1.15!important;
  }
  body{
    padding-bottom:56px!important;
  }
  .scroll-end-spacer{
    height:118px!important;
  }
}


/* v78 — make the fixed footer copyright much finer and lighter */
.site-footer .footer-copy{
  font-family:"Helvetica Neue","Avenir Next","Hiragino Kaku Gothic ProN",Arial,sans-serif!important;
  font-weight:200!important;
  font-size:9px!important;
  letter-spacing:.28em!important;
  color:rgba(255,255,255,.46)!important;
  line-height:1!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.site-footer{
  padding-bottom:max(3px, env(safe-area-inset-bottom))!important;
}
@media(max-width:900px){
  .site-footer .footer-copy{
    font-size:8px!important;
    font-weight:200!important;
    letter-spacing:.24em!important;
    color:rgba(255,255,255,.44)!important;
  }
  .site-footer{
    padding-bottom:max(2px, env(safe-area-inset-bottom))!important;
  }
}


/* v79 — footer text styled to match the delicate minimalist mockup */
.site-footer .footer-copy{
  font-family:"Helvetica Neue","Avenir Next","Hiragino Sans","Yu Gothic UI",Arial,sans-serif!important;
  font-weight:200!important;
  font-size:11px!important;
  letter-spacing:.34em!important;
  color:rgba(255,255,255,.60)!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 0 8px rgba(255,255,255,.05)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.site-footer .wrap{
  justify-content:center!important;
  align-items:flex-end!important;
}
.site-footer{
  padding:6px 0 max(2px, env(safe-area-inset-bottom))!important;
}
@media(max-width:900px){
  .site-footer .footer-copy{
    font-size:9px!important;
    letter-spacing:.30em!important;
    color:rgba(255,255,255,.58)!important;
  }
  .site-footer{
    padding:5px 0 max(2px, env(safe-area-inset-bottom))!important;
  }
}


/* v80 — smartphone only: reduce the blank space above the YORU logo */
@media(max-width:540px){
  .chooser{
    padding-top:15px!important;
  }
}


/* v81 — mobile: center the note button inside the popup */
@media(max-width:900px){
  .modal-copy a{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    text-align:center!important;
  }
}

/* v90 — YORU modal CTA: softly drifting organic oval instead of a standard button */
.modal-copy a#modalLink{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:28px!important;
  padding:16px 27px!important;
  background:transparent!important;
  color:#122840!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif!important;
  font-size:13px!important;
  font-weight:400!important;
  letter-spacing:.10em!important;
  line-height:1.4!important;
  text-decoration:none!important;
  isolation:isolate;
  transition:transform .35s ease,color .35s ease!important;
}
.modal-copy a#modalLink::before,
.modal-copy a#modalLink::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:50% 46% 52% 48% / 48% 54% 46% 52%;
  transform-origin:center;
}
.modal-copy a#modalLink::before{
  inset:-7px -16px;
  border:1px solid rgba(18,40,64,.58);
  animation:yoruCtaOval 6.8s ease-in-out infinite alternate;
}
.modal-copy a#modalLink::after{
  inset:-10px -20px;
  border:1px solid rgba(18,40,64,.15);
  filter:blur(.35px);
  animation:yoruCtaOvalGhost 8.6s ease-in-out infinite alternate-reverse;
}
.modal-copy a#modalLink:hover{
  transform:translateY(-1px)!important;
  color:#071b31!important;
}
.modal-copy a#modalLink:focus-visible{
  outline:1px solid rgba(18,40,64,.42)!important;
  outline-offset:14px!important;
}
@keyframes yoruCtaOval{
  0%{
    transform:translate(-2px,1px) rotate(-1.8deg) scaleX(.985) scaleY(1.02);
    border-radius:49% 51% 47% 53% / 53% 46% 54% 47%;
  }
  28%{
    transform:translate(1px,-2px) rotate(.7deg) scaleX(1.018) scaleY(.985);
    border-radius:54% 46% 52% 48% / 46% 55% 45% 54%;
  }
  63%{
    transform:translate(2px,1px) rotate(1.9deg) scaleX(.995) scaleY(1.025);
    border-radius:47% 53% 49% 51% / 55% 45% 52% 48%;
  }
  100%{
    transform:translate(-1px,-1px) rotate(-.6deg) scaleX(1.025) scaleY(.99);
    border-radius:52% 48% 55% 45% / 48% 52% 46% 54%;
  }
}
@keyframes yoruCtaOvalGhost{
  0%{transform:translate(2px,-1px) rotate(2deg) scale(.99);opacity:.42}
  50%{transform:translate(-2px,2px) rotate(-1.4deg) scale(1.025);opacity:.72}
  100%{transform:translate(1px,0) rotate(.8deg) scale(1.01);opacity:.50}
}
@media(max-width:900px){
  .modal-copy a#modalLink{
    display:flex!important;
    width:max-content!important;
    max-width:calc(100% - 44px)!important;
    margin:28px auto 4px!important;
    padding:15px 22px!important;
    text-align:center!important;
  }
  .modal-copy a#modalLink::before{inset:-6px -13px}
  .modal-copy a#modalLink::after{inset:-9px -17px}
}
@media(prefers-reduced-motion:reduce){
  .modal-copy a#modalLink::before,
  .modal-copy a#modalLink::after{animation:none!important}
}


/* v92 — refine modal CTA oval and popup title spacing */
.modal-copy .overline{
  font-size:10px;
  letter-spacing:.20em;
  color:#887b63;
}
.modal-copy h3{
  font-size:27px;
  line-height:1.48;
  margin:6px 0 18px;
}
.modal-copy a#modalLink::before,
.modal-copy a#modalLink::after{
  border-radius:50% 50% 49% 51% / 52% 50% 50% 48%;
}
.modal-copy a#modalLink::before{
  inset:-8px -15px;
  border:1px solid rgba(18,40,64,.58);
  animation:yoruCtaOvalV92 6.8s ease-in-out infinite alternate;
}
.modal-copy a#modalLink::after{
  inset:-12px -19px;
  border:1px solid rgba(18,40,64,.28);
  filter:blur(.2px);
  animation:yoruCtaOvalGhostV92 8.6s ease-in-out infinite alternate-reverse;
}
@keyframes yoruCtaOvalV92{
  0%{
    transform:translate(-1px,1px) rotate(-1deg) scaleX(.995) scaleY(1.02);
    border-radius:50% 50% 48% 52% / 53% 49% 51% 47%;
  }
  33%{
    transform:translate(1px,-1px) rotate(.6deg) scaleX(1.015) scaleY(.99);
    border-radius:52% 48% 50% 50% / 49% 53% 47% 51%;
  }
  66%{
    transform:translate(1px,1px) rotate(1.1deg) scaleX(1.005) scaleY(1.015);
    border-radius:49% 51% 52% 48% / 51% 48% 52% 49%;
  }
  100%{
    transform:translate(-1px,-1px) rotate(-.5deg) scaleX(1.018) scaleY(.995);
    border-radius:51% 49% 50% 50% / 48% 52% 49% 51%;
  }
}
@keyframes yoruCtaOvalGhostV92{
  0%{transform:translate(1px,-1px) rotate(1.3deg) scale(.995);opacity:.50}
  50%{transform:translate(-1px,1px) rotate(-.9deg) scale(1.02);opacity:.80}
  100%{transform:translate(1px,0) rotate(.6deg) scale(1.008);opacity:.58}
}
@media(max-width:900px){
  .modal-copy h3{
    font-size:22px;
    line-height:1.46;
    margin:5px 0 16px;
  }
  .modal-copy a#modalLink::before{inset:-7px -12px}
  .modal-copy a#modalLink::after{inset:-10px -16px}
}


/* v93 — center CTA on PC too, and make the two ovals drift across each other */
.modal-copy a#modalLink{
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin:28px auto 0!important;
  text-align:center!important;
}
.modal-copy a#modalLink::before,
.modal-copy a#modalLink::after{
  border-radius:52% 48% 50% 50% / 50% 53% 47% 50%;
}
.modal-copy a#modalLink::before{
  inset:-8px -13px;
  border:1px solid rgba(18,40,64,.62);
  animation:yoruCtaCrossA 7.4s ease-in-out infinite;
}
.modal-copy a#modalLink::after{
  inset:-11px -17px;
  border:1px solid rgba(18,40,64,.34);
  filter:none;
  animation:yoruCtaCrossB 7.4s ease-in-out infinite;
}
@keyframes yoruCtaCrossA{
  0%{
    transform:translate(-7px,1px) rotate(-3.2deg) scaleX(.97) scaleY(1.03);
    border-radius:50% 50% 47% 53% / 54% 48% 52% 46%;
    opacity:.95;
  }
  25%{
    transform:translate(-1px,-2px) rotate(-.8deg) scaleX(1.01) scaleY(.99);
    border-radius:53% 47% 50% 50% / 48% 54% 46% 52%;
    opacity:.88;
  }
  50%{
    transform:translate(6px,1px) rotate(2.8deg) scaleX(.985) scaleY(1.02);
    border-radius:48% 52% 53% 47% / 52% 46% 54% 48%;
    opacity:.96;
  }
  75%{
    transform:translate(1px,2px) rotate(.7deg) scaleX(1.015) scaleY(1);
    border-radius:52% 48% 49% 51% / 47% 53% 48% 52%;
    opacity:.90;
  }
  100%{
    transform:translate(-7px,-1px) rotate(-3deg) scaleX(.97) scaleY(1.03);
    border-radius:50% 50% 47% 53% / 54% 48% 52% 46%;
    opacity:.95;
  }
}
@keyframes yoruCtaCrossB{
  0%{
    transform:translate(7px,-1px) rotate(3.6deg) scaleX(1.03) scaleY(.97);
    border-radius:49% 51% 54% 46% / 46% 54% 48% 52%;
    opacity:.55;
  }
  25%{
    transform:translate(2px,2px) rotate(1deg) scaleX(.995) scaleY(1.025);
    border-radius:54% 46% 50% 50% / 52% 47% 53% 48%;
    opacity:.74;
  }
  50%{
    transform:translate(-7px,-1px) rotate(-3.3deg) scaleX(1.025) scaleY(.985);
    border-radius:47% 53% 48% 52% / 55% 45% 50% 50%;
    opacity:.58;
  }
  75%{
    transform:translate(-1px,-2px) rotate(-.9deg) scaleX(1.005) scaleY(1.018);
    border-radius:51% 49% 53% 47% / 48% 52% 46% 54%;
    opacity:.78;
  }
  100%{
    transform:translate(7px,-1px) rotate(3.6deg) scaleX(1.03) scaleY(.97);
    border-radius:49% 51% 54% 46% / 46% 54% 48% 52%;
    opacity:.55;
  }
}
@media(max-width:900px){
  .modal-copy a#modalLink{
    max-width:calc(100% - 40px)!important;
  }
  .modal-copy a#modalLink::before{inset:-7px -11px}
  .modal-copy a#modalLink::after{inset:-10px -15px}
}


/* v94 — mobile popup layout fix: keep image and text clearly separated and fully scrollable */
@media(max-width:900px){
  .modal{
    align-items:flex-start!important;
    justify-content:center!important;
    padding:14px 12px 18px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .modal-shell{
    width:min(100%,680px)!important;
    max-height:none!important;
    margin:10px auto 0!important;
    display:block!important;
  }
  .modal-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    border-radius:14px!important;
  }
  .modal-photo{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.91 / 1!important;
    border-radius:14px 14px 0 0!important;
    overflow:hidden!important;
    flex:none!important;
    background:#d7d4cb!important;
  }
  .modal-photo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    vertical-align:bottom!important;
  }
  .modal-copy{
    display:block!important;
    position:relative!important;
    z-index:1!important;
    background:rgba(247,247,249,.98)!important;
    padding:18px 22px 34px!important;
    border-radius:0 0 14px 14px!important;
  }
  .modal-copy .overline{
    display:block!important;
    margin:0 0 4px!important;
  }
  .modal-copy h3{
    display:block!important;
    font-size:21px!important;
    line-height:1.42!important;
    margin:0 0 14px!important;
    color:#18293c!important;
  }
  .modal-copy p{
    display:block!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.98!important;
    color:#51606d!important;
  }
  .modal-copy a#modalLink{
    margin:28px auto 10px!important;
  }
  .modal .close{
    top:14px!important;
    right:14px!important;
  }
}


/* v95 — calmer, continuous CTA ovals (no loop snap) */
.modal-copy a#modalLink::before{
  animation:yoruCtaGlideA 10.2s cubic-bezier(.42,0,.58,1) infinite alternate!important;
  will-change:transform,border-radius;
}
.modal-copy a#modalLink::after{
  animation:yoruCtaGlideB 10.2s cubic-bezier(.42,0,.58,1) infinite alternate!important;
  will-change:transform,border-radius;
}
@keyframes yoruCtaGlideA{
  from{
    transform:translate3d(-3.5px,.5px,0) rotate(-1.25deg) scaleX(.992) scaleY(1.008);
    border-radius:51% 49% 48% 52% / 52% 49% 51% 48%;
    opacity:.93;
  }
  to{
    transform:translate3d(3.5px,-.5px,0) rotate(1.15deg) scaleX(1.008) scaleY(.992);
    border-radius:49% 51% 52% 48% / 48% 52% 49% 51%;
    opacity:.93;
  }
}
@keyframes yoruCtaGlideB{
  from{
    transform:translate3d(3.5px,-.5px,0) rotate(1.3deg) scaleX(1.007) scaleY(.993);
    border-radius:49% 51% 53% 47% / 48% 52% 49% 51%;
    opacity:.62;
  }
  to{
    transform:translate3d(-3.5px,.5px,0) rotate(-1.2deg) scaleX(.993) scaleY(1.007);
    border-radius:52% 48% 48% 52% / 52% 49% 51% 48%;
    opacity:.62;
  }
}


/* v96 — mobile popup typography + medium CTA oval motion */
@media(max-width:900px){
  .modal-copy h3{
    font-size:18.5px!important;
    line-height:1.42!important;
    margin:0 0 13px!important;
  }
  .modal-copy p{
    font-size:14.5px!important;
    line-height:2.0!important;
  }
}
.modal-copy a#modalLink::before{
  animation:yoruCtaGlideA96 8.8s ease-in-out infinite alternate!important;
}
.modal-copy a#modalLink::after{
  animation:yoruCtaGlideB96 8.8s ease-in-out infinite alternate!important;
}
@keyframes yoruCtaGlideA96{
  from{
    transform:translate3d(-5px,.8px,0) rotate(-1.85deg) scaleX(.985) scaleY(1.015);
    border-radius:51% 49% 48% 52% / 53% 48% 52% 47%;
    opacity:.94;
  }
  to{
    transform:translate3d(5px,-.8px,0) rotate(1.75deg) scaleX(1.015) scaleY(.985);
    border-radius:49% 51% 52% 48% / 47% 53% 48% 52%;
    opacity:.94;
  }
}
@keyframes yoruCtaGlideB96{
  from{
    transform:translate3d(5px,-.8px,0) rotate(1.9deg) scaleX(1.013) scaleY(.987);
    border-radius:49% 51% 53% 47% / 47% 53% 48% 52%;
    opacity:.64;
  }
  to{
    transform:translate3d(-5px,.8px,0) rotate(-1.8deg) scaleX(.987) scaleY(1.013);
    border-radius:52% 48% 48% 52% / 53% 48% 52% 47%;
    opacity:.64;
  }
}


/* v97 — slightly faster CTA ovals + vertically centered mobile popup until content fills the screen */
.modal-copy a#modalLink::before{
  animation:yoruCtaGlideA97 7.4s ease-in-out infinite alternate!important;
}
.modal-copy a#modalLink::after{
  animation:yoruCtaGlideB97 7.4s ease-in-out infinite alternate!important;
}
@keyframes yoruCtaGlideA97{
  from{
    transform:translate3d(-5px,.8px,0) rotate(-1.85deg) scaleX(.985) scaleY(1.015);
    border-radius:51% 49% 48% 52% / 53% 48% 52% 47%;
    opacity:.94;
  }
  to{
    transform:translate3d(5px,-.8px,0) rotate(1.75deg) scaleX(1.015) scaleY(.985);
    border-radius:49% 51% 52% 48% / 47% 53% 48% 52%;
    opacity:.94;
  }
}
@keyframes yoruCtaGlideB97{
  from{
    transform:translate3d(5px,-.8px,0) rotate(1.9deg) scaleX(1.013) scaleY(.987);
    border-radius:49% 51% 53% 47% / 47% 53% 48% 52%;
    opacity:.64;
  }
  to{
    transform:translate3d(-5px,.8px,0) rotate(-1.8deg) scaleX(.987) scaleY(1.013);
    border-radius:52% 48% 48% 52% / 53% 48% 52% 47%;
    opacity:.64;
  }
}
@media(max-width:900px){
  .modal{
    align-items:stretch!important;
    padding:14px 12px 18px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .modal-shell{
    width:min(100%,680px)!important;
    max-height:none!important;
    min-height:calc(100svh - 32px)!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .modal-card{
    margin-top:auto!important;
    margin-bottom:auto!important;
  }
}


/* v101 — intro label gets a thin horizontal rule; tighten PC intro spacing, open mobile title spacing */
.modal-copy .intro-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 4px;
  font-family:"Helvetica Neue","Avenir Next","Hiragino Sans",Arial,sans-serif;
  font-size:8px;
  font-weight:400;
  line-height:1;
  letter-spacing:.28em;
  color:rgba(81,96,109,.46);
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
}
.modal-copy .intro-label::before{
  content:"";
  flex:0 0 42px;
  width:42px;
  height:1px;
  background:rgba(81,96,109,.42);
  border-radius:999px;
}
@media(max-width:900px){
  .modal-copy .intro-label{
    gap:9px;
    margin:0 0 7px;
    font-size:7.5px;
    letter-spacing:.26em;
    color:rgba(81,96,109,.44);
  }
  .modal-copy .intro-label::before{
    flex-basis:36px;
    width:36px;
    background:rgba(81,96,109,.38);
  }
}


/* v101 — popup spacing refinement requested */
.modal-copy .intro-label{
  margin-bottom:4px!important;
}
@media(max-width:900px){
  .modal-copy h3{
    margin:0 0 19px!important;
  }
  .modal-copy .intro-label{
    margin-bottom:7px!important;
  }
}


/* v103 — logo acts as a home/reload link */
.yoru-logo-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  text-decoration:none;
  cursor:pointer;
}
.yoru-logo-link .yoru-logo{
  margin-left:auto;
  margin-right:auto;
}


/* v109 — desktop popup thumbnail keeps note's 1.91:1 aspect ratio */
@media(min-width:901px){
  .modal-photo{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.91 / 1!important;
    align-self:start!important;
    border-radius:12px 0 0 0!important;
  }
  .modal-photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}


/* v110 — desktop popup follows the mobile stacked composition */
@media(min-width:901px){
  .modal{
    align-items:center!important;
    justify-content:center!important;
    padding:24px!important;
  }
  .modal-shell{
    width:min(720px,92vw)!important;
    max-height:88vh!important;
  }
  .modal-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-height:88vh!important;
    overflow:auto!important;
    border-radius:14px!important;
  }
  .modal-photo{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.91 / 1!important;
    align-self:auto!important;
    flex:none!important;
    border-radius:14px 14px 0 0!important;
    overflow:hidden!important;
    background:#d7d4cb!important;
  }
  .modal-photo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .modal-copy{
    width:100%!important;
    padding:26px 34px 34px!important;
    border-radius:0 0 14px 14px!important;
    background:rgba(247,247,249,.98)!important;
  }
  .modal .close{
    top:14px!important;
    right:14px!important;
    background:rgba(255,255,255,.58)!important;
    border-color:rgba(255,255,255,.46)!important;
    box-shadow:0 4px 12px rgba(0,0,0,.08)!important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
}

/* v111 — experimental transparent popup with all-white typography */
.modal-card{
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}
.modal-copy{
  background:transparent!important;
  color:#fff!important;
}
.modal-copy .overline,
.modal-copy h3,
.modal-copy p,
.modal-copy .intro-label,
.modal-copy a#modalLink{
  color:#fff!important;
}
.modal-copy .overline{
  opacity:.72;
}
.modal-copy .intro-label{
  color:rgba(255,255,255,.56)!important;
}
.modal-copy .intro-label::before{
  background:rgba(255,255,255,.46)!important;
}
.modal-copy p{
  color:rgba(255,255,255,.88)!important;
}
.modal-copy a#modalLink::before{
  border-color:rgba(255,255,255,.72)!important;
}
.modal-copy a#modalLink::after{
  border-color:rgba(255,255,255,.38)!important;
}
.modal-copy a#modalLink:hover{
  color:#fff!important;
}
.modal-copy a#modalLink:focus-visible{
  outline-color:rgba(255,255,255,.55)!important;
}
@media(min-width:901px){
  .modal-copy{
    background:transparent!important;
  }
}
@media(max-width:900px){
  .modal-copy{
    background:transparent!important;
  }
}

/* v112 — thin white border around the entire popup card */
.modal-card{
  border:1px solid rgba(255,255,255,.62)!important;
}

/* v113 — slightly stronger background overlay while popup is open */
.modal{
  background:rgba(10,27,58,.74)!important;
}

/* v114 — popup frame starts below the thumbnail instead of wrapping around it */
.modal-card{
  border:0!important;
}

.modal-photo{
  position:relative!important;
  z-index:1!important;
}

.modal-copy{
  position:relative!important;
  z-index:2!important;
  width:calc(100% - 2px)!important;
  margin:-1px 1px 1px!important;
  border-left:1px solid rgba(255,255,255,.62)!important;
  border-right:1px solid rgba(255,255,255,.62)!important;
  border-bottom:1px solid rgba(255,255,255,.62)!important;
  border-top:0!important;
  border-radius:0 0 14px 14px!important;
}

@media(min-width:901px){
  .modal-copy{
    width:calc(100% - 2px)!important;
    margin:-1px 1px 1px!important;
  }
}

@media(max-width:900px){
  .modal-copy{
    width:calc(100% - 2px)!important;
    margin:-1px 1px 1px!important;
  }
}

/* v115 — ultra-light translucent white panel only behind popup text area */
.modal-copy{
  background:rgba(255,255,255,.055)!important;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

/* v116 — slightly stronger translucent white text panel, no popup frame */
.modal-copy{
  width:100%!important;
  margin:0!important;
  border:0!important;
  background:rgba(255,255,255,.08)!important;
}
@media(min-width:901px){
  .modal-copy{
    width:100%!important;
    margin:0!important;
    border:0!important;
  }
}
@media(max-width:900px){
  .modal-copy{
    width:100%!important;
    margin:0!important;
    border:0!important;
  }
}

/* v117 — front cheki cards keep the same scattered white frame, with a subtle translucent white fill inside */
.work-card,
.gallery.is-filtered .work-card{
  background:rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

/* v118 — slightly brighter translucent front cheki fill, with the outer white frame removed */
.work-card,
.gallery.is-filtered .work-card{
  background:rgba(255,255,255,.12)!important;
  border:0!important;
}

/* v119 — each front cheki sways gently like a wind chime */
.work-card,
.gallery.is-filtered .work-card{
  transform-origin:50% 5%!important;
  animation-duration:.85s,var(--wind-dur,7.8s)!important;
  animation-timing-function:cubic-bezier(.18,.8,.2,1),ease-in-out!important;
}

/* v120 — widen the sway range just a little while keeping it soft. */
@keyframes cardFloat{
  0%,100%{
    translate:0 0;
    rotate:var(--wind-left,-.98deg);
  }
  22%{
    translate:1.6px -1.7px;
    rotate:-.16deg;
  }
  50%{
    translate:0 -4.8px;
    rotate:var(--wind-right,1.08deg);
  }
  76%{
    translate:-1.6px -2px;
    rotate:.14deg;
  }
}

/* Different rhythm / amplitude so the cards never sway in sync. */
.work-card:nth-child(6n+1){
  --wind-dur:7.4s;--wind-left:-1.08deg;--wind-right:1.20deg;
  animation-delay:.08s,-1.6s!important;
}
.work-card:nth-child(6n+2){
  --wind-dur:8.6s;--wind-left:-.90deg;--wind-right:1.02deg;
  animation-delay:.16s,-4.1s!important;
}
.work-card:nth-child(6n+3){
  --wind-dur:7.9s;--wind-left:-1.18deg;--wind-right:.94deg;
  animation-delay:.24s,-2.7s!important;
}
.work-card:nth-child(6n+4){
  --wind-dur:9.1s;--wind-left:-.96deg;--wind-right:1.26deg;
  animation-delay:.32s,-5.3s!important;
}
.work-card:nth-child(6n+5){
  --wind-dur:8.1s;--wind-left:-1.00deg;--wind-right:.96deg;
  animation-delay:.40s,-.9s!important;
}
.work-card:nth-child(6n){
  --wind-dur:8.9s;--wind-left:-.86deg;--wind-right:1.12deg;
  animation-delay:.48s,-3.5s!important;
}

@media(max-width:900px){
  .work-card,
  .gallery.is-filtered .work-card{
    transform-origin:50% 4%!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .work-card,
  .gallery.is-filtered .work-card{
    animation:cardReveal .01s linear forwards!important;
    translate:0 0!important;
    rotate:0deg!important;
  }
}

/* v121 — mobile: make each cheki a touch larger and reduce side gutters slightly */
@media(max-width:900px){
  .gallery,
  .gallery.is-filtered{
    column-gap:8px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  .work-card,
  .gallery.is-filtered .work-card{
    width:calc(100% + 4px)!important;
    max-width:none!important;
    margin-left:-2px!important;
    margin-right:-2px!important;
  }
}

@media(max-width:370px){
  .gallery,
  .gallery.is-filtered{
    column-gap:7px!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
}

/* v122 — mobile cheki title +1px */
@media(max-width:900px){
  .gallery .work-card h3,
  .gallery.is-filtered .work-card h3{
    font-size:15px!important;
    line-height:1.56!important;
  }
}

/* v124 — make popup note-button ovals a bit more active while keeping motion smooth */
.modal-copy a#modalLink::before{
  animation:yoruCtaActiveA124 7.8s cubic-bezier(.42,0,.58,1) infinite alternate!important;
  will-change:transform,border-radius,opacity;
}
.modal-copy a#modalLink::after{
  animation:yoruCtaActiveB124 6.9s cubic-bezier(.42,0,.58,1) infinite alternate!important;
  will-change:transform,border-radius,opacity;
}
@keyframes yoruCtaActiveA124{
  from{
    transform:translate3d(-5.4px,1.2px,0) rotate(-1.95deg) scaleX(.987) scaleY(1.018);
    border-radius:51% 49% 47% 53% / 54% 47% 53% 46%;
    opacity:.95;
  }
  to{
    transform:translate3d(5.4px,-1.2px,0) rotate(1.85deg) scaleX(1.018) scaleY(.987);
    border-radius:48% 52% 53% 47% / 46% 54% 47% 53%;
    opacity:.95;
  }
}
@keyframes yoruCtaActiveB124{
  from{
    transform:translate3d(5.1px,-1.4px,0) rotate(2.1deg) scaleX(1.015) scaleY(.985);
    border-radius:48% 52% 54% 46% / 47% 54% 46% 53%;
    opacity:.68;
  }
  to{
    transform:translate3d(-5.1px,1.4px,0) rotate(-2deg) scaleX(.985) scaleY(1.015);
    border-radius:53% 47% 47% 53% / 53% 46% 54% 47%;
    opacity:.68;
  }
}


/* v137 — compact "YORUとは" button beside the main question + translucent concept popup */
.question-row{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  max-width:100%;
}
.question-row .about-trigger{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.82);
  border-radius:999px;
  padding:7px 12px 7px 13px;
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:10px;
  font-weight:300;
  line-height:1;
  letter-spacing:.13em;
  cursor:pointer;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.question-row .about-trigger:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.62);
  color:#fff;
  transform:translateY(-1px);
}
.question-row .about-trigger:focus-visible{
  outline:1px solid rgba(255,255,255,.72);
  outline-offset:4px;
}

.about-modal{
  position:fixed;
  inset:0;
  z-index:260;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,13,31,.62);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.about-modal.open{
  display:flex;
  animation:aboutVeil137 .24s ease both;
}
.about-panel{
  position:relative;
  width:min(610px,92vw);
  max-height:min(82vh,680px);
  overflow:auto;
  box-sizing:border-box;
  padding:50px 54px 42px;
  color:#fff;
  text-align:left;
  background:rgba(14,34,66,.66);
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  backdrop-filter:blur(18px) saturate(115%);
  animation:aboutPanel137 .38s cubic-bezier(.2,.8,.2,1) both;
}
.about-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 14% 17%,rgba(255,255,255,.62) 0 1px,transparent 1.6px),
    radial-gradient(circle at 82% 23%,rgba(255,255,255,.44) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 79%,rgba(214,189,130,.38) 0 1px,transparent 1.8px),
    radial-gradient(circle at 24% 72%,rgba(255,255,255,.34) 0 1px,transparent 1.6px);
  opacity:.75;
}
.about-panel > *{position:relative;z-index:1}
.about-kicker{
  margin:0 0 14px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:9px;
  font-weight:300;
  letter-spacing:.31em;
  color:rgba(255,255,255,.52);
}
.about-panel h2{
  margin:0 0 28px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:27px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.075em;
  color:rgba(255,255,255,.96);
}
.about-panel p{
  margin:0 0 17px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:14px;
  line-height:2.05;
  font-weight:300;
  letter-spacing:.035em;
  color:rgba(255,255,255,.76);
}
.about-panel p strong{font-weight:500;color:rgba(255,255,255,.94)}
.about-panel .about-last{margin-bottom:25px}
.about-wish{
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);
  text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:14px;
  line-height:1.9;
  letter-spacing:.08em;
  color:rgba(255,255,255,.93);
}
.about-close-x{
  position:absolute!important;
  z-index:3!important;
  top:15px;
  right:16px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.82);
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:200;
  line-height:30px;
  text-align:center;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.about-close-x:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.42);
  transform:rotate(4deg);
}
.about-close-text{
  display:block;
  margin:24px auto 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.34);
  padding:4px 2px 6px;
  background:transparent;
  color:rgba(255,255,255,.66);
  font-family:"Helvetica Neue","Yu Gothic",sans-serif;
  font-size:10px;
  font-weight:300;
  letter-spacing:.20em;
  cursor:pointer;
}
.about-close-text:hover{color:#fff;border-color:rgba(255,255,255,.72)}
.about-close-x:focus-visible,.about-close-text:focus-visible{outline:1px solid rgba(255,255,255,.72);outline-offset:3px}
@keyframes aboutVeil137{from{opacity:0}to{opacity:1}}
@keyframes aboutPanel137{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .question-row{gap:10px!important;}
  .question-row .about-trigger{
    padding:6px 9px 6px 10px;
    font-size:8.5px;
    letter-spacing:.10em;
  }
  .about-modal{padding:18px;}
  .about-panel{
    width:min(560px,94vw);
    max-height:84svh;
    padding:43px 25px 32px;
    border-radius:15px;
  }
  .about-panel h2{
    margin-bottom:22px;
    font-size:21px;
    line-height:1.65;
    letter-spacing:.055em;
  }
  .about-panel p{font-size:13px;line-height:2.0;}
  .about-wish{font-size:13px;padding-top:18px;}
  .about-close-x{top:11px;right:11px;width:32px;height:32px;font-size:20px;line-height:28px;}
}
@media(max-width:390px){
  .question-row{gap:7px!important;}
  .question-row .about-trigger{padding:5px 7px 5px 8px;font-size:7.5px;letter-spacing:.075em;}
  .about-panel{padding-left:21px;padding-right:21px;}
}
@media(prefers-reduced-motion:reduce){
  .about-modal.open,.about-panel{animation:none!important;}
}


/* v139 — move "YORUとは" to the site upper-right and match the popup text-panel glass */
.chooser{
  position:relative!important;
}
.site-about-trigger{
  appearance:none!important;
  -webkit-appearance:none!important;
  position:fixed!important;
  top:24px!important;
  right:clamp(22px,3.6vw,54px)!important;
  z-index:145!important;
  margin:0!important;
  padding:9px 15px 9px 16px!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.84)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(2px)!important;
  backdrop-filter:blur(2px)!important;
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif!important;
  font-size:10px!important;
  font-weight:300!important;
  line-height:1!important;
  letter-spacing:.15em!important;
  cursor:pointer!important;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
.site-about-trigger:hover{
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.site-about-trigger:focus-visible{
  outline:1px solid rgba(255,255,255,.64)!important;
  outline-offset:4px!important;
}
@media(max-width:900px){
  .site-about-trigger{
    top:17px!important;
    right:14px!important;
    padding:8px 11px 8px 12px!important;
    border-radius:9px!important;
    font-size:8.5px!important;
    letter-spacing:.12em!important;
  }
}
@media(max-width:390px){
  .site-about-trigger{
    top:14px!important;
    right:10px!important;
    padding:7px 9px 7px 10px!important;
    font-size:8px!important;
  }
}


/* v141 — YORUとは: Mincho button typography */
.site-about-trigger{
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif!important;
  font-weight:400!important;
  letter-spacing:.16em!important;
}


/* v142 — concise YORU concept copy */
.about-panel h2{
  margin:0 0 30px!important;
  text-align:center!important;
  font-size:16px!important;
  line-height:1.8!important;
  font-weight:400!important;
  letter-spacing:.12em!important;
  color:rgba(255,255,255,.92)!important;
}
.about-panel p{
  margin:0 0 22px!important;
}
.about-panel .about-night{
  margin:29px 0 0!important;
  padding-top:23px!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
  text-align:center!important;
  color:rgba(255,255,255,.91)!important;
  letter-spacing:.07em!important;
}
@media(max-width:900px){
  .about-panel h2{
    margin-bottom:26px!important;
    font-size:14px!important;
    line-height:1.8!important;
    letter-spacing:.10em!important;
  }
  .about-panel p{margin-bottom:20px!important;}
  .about-panel .about-night{margin-top:25px!important;padding-top:20px!important;}
}


/* v143 — YORU concept: centered copy + mood buttons */
.about-panel h2{
  margin:12px 0 30px!important;
  text-align:center!important;
  font-size:19px!important;
  line-height:1.8!important;
  font-weight:400!important;
  letter-spacing:.12em!important;
}
.about-copy{
  text-align:center!important;
}
.about-panel .about-copy p{
  margin:0 0 13px!important;
  text-align:center!important;
  font-size:14px!important;
  line-height:1.9!important;
  letter-spacing:.035em!important;
  color:rgba(255,255,255,.78)!important;
}
.about-panel .about-copy .about-night{
  margin:25px 0 0!important;
  padding:0!important;
  border:0!important;
  color:rgba(255,255,255,.92)!important;
  letter-spacing:.07em!important;
}
.about-divider{
  width:100%;
  height:1px;
  margin:25px 0 23px;
  background:rgba(255,255,255,.15);
}
.about-moods{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  width:100%;
}
.about-moods button{
  appearance:none;
  -webkit-appearance:none;
  min-height:38px;
  padding:8px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:5px 17px 5px 17px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.82);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:11px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.045em;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease;
}
.about-moods button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.36);
  color:#fff;
}
.about-moods button:focus-visible{
  outline:1px solid rgba(255,255,255,.72);
  outline-offset:3px;
}
.about-close-text{
  margin-top:25px!important;
}
@media(max-width:900px){
  .about-panel h2{
    margin:10px 0 26px!important;
    font-size:17px!important;
    line-height:1.8!important;
  }
  .about-panel .about-copy p{
    margin-bottom:12px!important;
    font-size:13px!important;
    line-height:1.85!important;
  }
  .about-panel .about-copy .about-night{
    margin-top:22px!important;
  }
  .about-divider{
    margin:22px 0 20px;
  }
  .about-moods{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .about-moods button{
    min-height:36px;
    padding:7px 6px;
    font-size:10.5px;
  }
}


/* v153 — animated elliptical ring around the YORU concept heading */
.about-panel h2{
  position:relative!important;
}
.about-title-ring{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  isolation:isolate;
}
.about-title-ring::before,
.about-title-ring::after{
  content:"";
  position:absolute;
  inset:-11px -24px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  transform-origin:center;
  will-change:transform,border-radius,opacity;
}
.about-title-ring::before{
  opacity:.78;
  animation:yoruAboutOvalA153 7.4s cubic-bezier(.42,0,.58,1) infinite alternate;
}
.about-title-ring::after{
  inset:-16px -34px;
  opacity:.48;
  animation:yoruAboutOvalB153 6.1s cubic-bezier(.42,0,.58,1) infinite alternate;
}
@keyframes yoruAboutOvalA153{
  from{
    transform:translate3d(-4px,1px,0) rotate(-2.2deg) scaleX(.988) scaleY(1.03);
    border-radius:47% 53% 49% 51% / 52% 46% 54% 48%;
  }
  to{
    transform:translate3d(4px,-1px,0) rotate(2deg) scaleX(1.022) scaleY(.982);
    border-radius:53% 47% 51% 49% / 47% 54% 46% 53%;
  }
}
@keyframes yoruAboutOvalB153{
  from{
    transform:translate3d(4.5px,-1.4px,0) rotate(2.6deg) scaleX(1.018) scaleY(.982);
    border-radius:52% 48% 54% 46% / 48% 55% 45% 52%;
  }
  to{
    transform:translate3d(-4.5px,1.4px,0) rotate(-2.4deg) scaleX(.984) scaleY(1.02);
    border-radius:46% 54% 47% 53% / 54% 46% 55% 45%;
  }
}
@media(max-width:900px){
  .about-title-ring{
    padding:10px 20px;
  }
  .about-title-ring::before{
    inset:-9px -18px;
  }
  .about-title-ring::after{
    inset:-13px -25px;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-title-ring::before,
  .about-title-ring::after{
    animation:none!important;
  }
}


/* v154 — ensure the animated oval around the YORU concept heading also breathes clearly on smartphone */
.about-panel,
.about-panel h2,
.about-title-ring{
  overflow:visible!important;
}
.about-title-ring{
  max-width:100%;
  box-sizing:border-box;
}
.about-title-ring::before,
.about-title-ring::after{
  backface-visibility:hidden;
}
@media(max-width:900px){
  .about-panel{
    overflow-x:visible!important;
  }
  .about-panel h2{
    margin:14px 0 28px!important;
  }
  .about-title-ring{
    display:inline-flex!important;
    max-width:100%;
    padding:12px 22px 11px;
  }
  .about-title-ring::before,
  .about-title-ring::after{
    border-color:rgba(255,255,255,.30);
  }
  .about-title-ring::before{
    inset:-10px -20px;
    animation:yoruAboutOvalA154 6.6s cubic-bezier(.42,0,.58,1) infinite alternate;
  }
  .about-title-ring::after{
    inset:-15px -27px;
    opacity:.54;
    animation:yoruAboutOvalB154 5.5s cubic-bezier(.42,0,.58,1) infinite alternate;
  }
}
@keyframes yoruAboutOvalA154{
  from{
    transform:translate3d(-5px,1.6px,0) rotate(-2.8deg) scaleX(.986) scaleY(1.036);
    border-radius:46% 54% 48% 52% / 53% 46% 54% 47%;
  }
  to{
    transform:translate3d(5px,-1.6px,0) rotate(2.5deg) scaleX(1.026) scaleY(.978);
    border-radius:54% 46% 52% 48% / 46% 55% 45% 54%;
  }
}
@keyframes yoruAboutOvalB154{
  from{
    transform:translate3d(5.6px,-1.8px,0) rotate(3deg) scaleX(1.024) scaleY(.978);
    border-radius:53% 47% 55% 45% / 47% 56% 44% 53%;
  }
  to{
    transform:translate3d(-5.6px,1.8px,0) rotate(-2.8deg) scaleX(.98) scaleY(1.024);
    border-radius:45% 55% 46% 54% / 55% 45% 56% 44%;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-title-ring::before,
  .about-title-ring::after{
    animation:none!important;
  }
}


/* v157 — logo replacement + slightly narrower mobile oval ring + taller mobile about popup */
@media(max-width:900px){
  .about-panel{
    width:min(560px,94vw)!important;
    min-height:min(76svh,720px)!important;
    max-height:88svh!important;
    padding:46px 25px 38px!important;
  }
  .about-title-ring{
    padding:12px 18px 11px!important;
  }
  .about-title-ring::before{
    inset:-10px -12px!important;
  }
  .about-title-ring::after{
    inset:-15px -18px!important;
  }
}
@media(max-width:520px){
  .about-panel{
    min-height:74svh!important;
    padding-top:48px!important;
    padding-bottom:40px!important;
  }
  .about-title-ring{
    padding:11px 16px 10px!important;
  }
  .about-title-ring::before{
    inset:-9px -10px!important;
  }
  .about-title-ring::after{
    inset:-13px -15px!important;
  }
}


/* v158 — smaller YORU. logo */
.yoru-logo{
  width:190px!important;
  max-width:min(58vw,190px)!important;
}
@media(max-width:900px){
  .yoru-logo{
    width:135px!important;
    max-width:48vw!important;
  }
}


/* v179 — smaller YORU logo + mobile mood drawer */
.yoru-logo{
  width:165px!important;
  max-width:min(52vw,165px)!important;
}
.mobile-mood-toggle{
  display:none;
}
@media(max-width:900px){
  .yoru-logo{
    width:110px!important;
    max-width:42vw!important;
  }
  .browser-tabs{
    padding:8px 0 11px!important;
  }
  .mobile-mood-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:max-content;
    min-width:138px;
    margin:0 auto;
    padding:9px 17px 9px 19px;
    border:1px solid rgba(218,199,151,.34);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055));
    color:rgba(255,255,255,.9);
    font:500 12px/1.2 ui-sans-serif,system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
    letter-spacing:.08em;
    box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
  }
  .mobile-mood-toggle i{
    position:relative;
    width:12px;
    height:12px;
    flex:0 0 12px;
    transition:transform .52s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-mood-toggle i::before,
  .mobile-mood-toggle i::after{
    content:"";
    position:absolute;
    left:1px;
    top:5px;
    width:10px;
    height:1px;
    background:rgba(229,210,162,.9);
    border-radius:99px;
  }
  .mobile-mood-toggle i::after{transform:rotate(90deg)}
  .mobile-mood-toggle:active{transform:scale(.97)}
  .browser-tabs.is-mood-open .mobile-mood-toggle{
    border-color:rgba(218,199,151,.58);
    background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.075));
    box-shadow:0 10px 25px rgba(0,0,0,.2),0 0 22px rgba(190,165,107,.08);
  }
  .browser-tabs.is-mood-open .mobile-mood-toggle i{transform:rotate(135deg)}

  .browser-tabs .moods{
    overflow:hidden!important;
    max-height:0!important;
    margin-top:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    opacity:0;
    transform:translate3d(0,-18px,0) scale(.965,.72);
    transform-origin:50% 0;
    filter:blur(5px);
    clip-path:inset(0 0 100% 0 round 12px);
    pointer-events:none;
    transition:
      max-height .62s cubic-bezier(.16,1,.3,1),
      margin-top .52s cubic-bezier(.16,1,.3,1),
      opacity .32s ease,
      transform .62s cubic-bezier(.16,1,.3,1),
      filter .52s ease,
      clip-path .62s cubic-bezier(.16,1,.3,1);
    will-change:max-height,transform,opacity,filter,clip-path;
  }
  .browser-tabs.is-mood-open .moods{
    max-height:240px!important;
    margin-top:10px!important;
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
    clip-path:inset(0 0 0 0 round 12px);
    pointer-events:auto;
  }
  .browser-tabs .mood{
    transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .36s ease!important;
  }
  .browser-tabs:not(.is-mood-open) .mood{
    opacity:.15;
  }
}
@media(max-width:390px){
  .mobile-mood-toggle{
    min-width:132px;
    padding:8px 15px 8px 17px;
    font-size:11.5px;
  }
  .browser-tabs.is-mood-open .moods{max-height:232px!important}
}
@media(prefers-reduced-motion:reduce){
  .browser-tabs .moods,
  .mobile-mood-toggle,
  .mobile-mood-toggle i{
    transition-duration:.01ms!important;
  }
}


/* v180 — smaller logo + mobile mood picker hides trigger while choices are open */
.yoru-logo{
  width:140px!important;
  max-width:min(46vw,140px)!important;
}
@media(max-width:900px){
  .yoru-logo{
    width:88px!important;
    max-width:34vw!important;
  }
  .browser-tabs.is-mood-open .mobile-mood-toggle{
    display:none!important;
  }
}

/* v181 — mobile mood drawer: do not clip the outer corners of first/last tags */
@media(max-width:900px){
  .browser-tabs .moods{
    clip-path:inset(0 0 100% 0)!important;
  }
  .browser-tabs.is-mood-open .moods{
    clip-path:inset(0 0 0 0)!important;
  }
}

/* v182 — mobile vertical rhythm: more room above mood trigger, tighter gap to works */
@media(max-width:900px){
  .chooser{
    padding-bottom:12px!important;
  }
  .browser-frame{
    margin-top:-4px!important;
  }
  .browser-tabs{
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
  .gallery-shell{
    padding-top:10px!important;
  }
  .gallery,
  .gallery.is-filtered{
    padding-top:14px!important;
  }
}

/* v183 — slightly larger YORU logo on mobile only */
@media(max-width:900px){
  .yoru-logo{
    width:100px!important;
    max-width:38vw!important;
  }
}