.d-page {
  --d-ink: #25312e;
  --d-muted: #60706a;
  --d-line: #cdd5cf;
  --d-paper: #f5f4ee;
  color: var(--d-ink);
  background: var(--d-paper);
  min-height: 100vh;
  padding: 100px clamp(24px, 4.7vw, 88px) 0;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  overflow: clip;
}
.d-page *, .d-page *::before, .d-page *::after { box-sizing: border-box; }
.d-page button { font: inherit; color: inherit; cursor: pointer; }
.d-page button:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 7px; }
.d-page img { display: block; max-width: 100%; }
.d-page figure, .d-page p, .d-page h1, .d-page h2, .d-page dl, .d-page dd { margin: 0; }
.d-top, .d-header, .d-hero, .d-story, .d-image-section, .d-source-note, .d-next-section, .d-footer { max-width: 1512px; margin-inline: auto; }
.d-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 104px; border-bottom: 1px solid var(--d-line); }
.d-back { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; padding: 12px 0; font-size: 15px; }
.d-back span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #9fac9f; border-radius: 50%; font-size: 23px; transition: background .25s, color .25s, transform .25s; }
.d-back:hover span { background: var(--d-ink); color: var(--d-paper); transform: translate(-2px, -2px); }
.d-counter { font-size: 12px; letter-spacing: .075em; }
.d-header { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 7vw; padding-block: clamp(44px, 6vw, 96px) 52px; }
.d-eyebrow { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 24px !important; }
.d-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-accent); }
.d-title { max-width: 13ch; font-size: clamp(37px, 5.1vw, 82px); font-weight: 500; line-height: 1.18; letter-spacing: -.055em; text-wrap: balance; outline: none; }
.d-description { max-width: 28em; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.7; letter-spacing: -.015em; }
.d-tags { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 28px; }
.d-tags span { font-size: 13px; padding-block: 7px; border-bottom: 1px solid var(--d-accent); }
.d-hero-frame { background: #e5e8df; padding: clamp(18px, 3vw, 48px); overflow: hidden; }
.d-hero-image { width: 100%; height: clamp(320px, 49vw, 690px); object-fit: contain; }
.d-project-snacks .d-hero-frame { background: #ead9c7; }
.d-project-family .d-hero-frame { background: #e9dfcc; }
.d-project-skill .d-hero-frame { background: #dfe8d8; }
.d-project-flowers .d-hero-frame { background: #eee1e2; }
.d-project-life .d-hero-frame { background: #e6e1d0; }
.d-project-campus .d-hero-frame { background: #dbe4df; }
.d-figure-caption { display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; color: var(--d-muted); font-size: 12px; }
.d-story { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8vw; padding-block: clamp(64px, 9vw, 144px); }
.d-label { display: block; font-size: 12px; letter-spacing: .1em; color: var(--d-muted); margin-bottom: 27px; }
.d-story-title h2 { font-size: clamp(27px, 3vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1.45; }
.d-body { font-size: clamp(18px, 1.75vw, 25px); line-height: 1.95; letter-spacing: -.01em; }
.d-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 42px; }
.d-facts > div { border-top: 1px solid var(--d-line); padding-top: 16px; }
.d-facts dt { font-size: 12px; color: var(--d-muted); margin-bottom: 10px; }
.d-facts dd { font-size: 15px; line-height: 1.8; }
.d-result-note { padding: 26px 0 0; margin-top: 28px !important; border-top: 1px solid var(--d-line); font-size: 14px; color: #4e5c55; line-height: 1.9; }
.d-note-label { display: block; color: var(--d-ink); margin-bottom: 8px; }
.d-section-label { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; font-size: 13px; }
.d-secondary { padding: clamp(20px, 4vw, 64px); background: #e4e6de; }
.d-secondary img { width: 100%; max-height: 800px; object-fit: contain; }
.d-secondary figcaption { padding-top: 25px; font-size: 13px; color: #526057; }
.d-source-note { padding-block: 16px; color: var(--d-muted); font-size: 13px; }
.d-next-section { display: grid; grid-template-columns: .66fr 1.34fr; gap: 8vw; padding-block: clamp(80px, 10vw, 160px); align-items: start; }
.d-next-intro { padding-top: 8px; }
.d-next-intro h2 { font-size: clamp(20px, 2vw, 30px); font-weight: 400; line-height: 1.65; letter-spacing: -.025em; }
.d-next { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.d-next-visual { display: block; height: clamp(230px, 27vw, 415px); background: #e2e7dd; overflow: hidden; }
.d-next-visual > img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: filter .35s; }
.d-next:hover .d-next-visual > img { filter: saturate(1.13); }
.d-next-copy { display: block; position: relative; padding: 20px 50px 24px 0; border-bottom: 1px solid var(--d-line); }
.d-next-label { display: block; color: var(--d-muted); font-size: 12px; margin-bottom: 10px; }
.d-next-project-title { display: block; font-size: clamp(22px, 2.5vw, 37px); font-weight: 400; letter-spacing: -.035em; }
.d-next-arrow { position: absolute; right: 0; top: 28px; font-size: 33px; transition: transform .3s; }
.d-next:hover .d-next-arrow { transform: translate(4px, -4px); }
.d-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--d-line); min-height: 110px; }
.d-footer > span { font-size: 11px; color: var(--d-muted); letter-spacing: .08em; }
.d-hero-abstract { padding: 0; }
.d-abstract { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: clamp(330px, 44vw, 650px); gap: 26px; isolation: isolate; overflow: hidden; background: #d8e8de; }
.d-abstract-snow { background: #e0ebee; }
.d-abstract-kicker, .d-abstract-caption { position: relative; z-index: 1; font-size: 11px; letter-spacing: .12em; }
.d-abstract-word { position: relative; z-index: 1; font-size: clamp(66px, 12vw, 190px); letter-spacing: -.075em; line-height: 1.1; font-weight: 400; }
.d-abstract-snow .d-abstract-word { font-size: clamp(48px, 9vw, 145px); letter-spacing: -.07em; }
.d-abstract-caption { color: #526a62; letter-spacing: .035em; }
.d-abstract-lines { position: absolute; inset: 0; z-index: -1; }
.d-abstract-lines i { position: absolute; width: 52%; aspect-ratio: 1; border: 1px solid #8aa99b; transform: rotate(32deg); left: -25%; top: -25%; }
.d-abstract-lines i:nth-child(2) { left: auto; right: -23%; top: auto; bottom: -22%; transform: rotate(32deg); }
.d-abstract-lines i:nth-child(3) { left: -26%; top: -22%; transform: rotate(42deg); }
.d-abstract-lines i:nth-child(4) { left: auto; right: -20%; top: auto; bottom: -24%; transform: rotate(42deg); }
.d-abstract-snow .d-abstract-lines i { border-radius: 50%; border-color: #a4bbc2; width: 66%; }
.d-abstract-small { min-height: 100%; height: 100%; gap: 18px; }
.d-abstract-small .d-abstract-word { font-size: clamp(40px, 7vw, 100px); }
.d-abstract-small .d-abstract-kicker { font-size: 10px; }

@media (min-width: 1800px) {
  .d-header { gap: 130px; }
  .d-story, .d-next-section { gap: 140px; }
}
@media (max-width: 900px) {
  .d-header { gap: 40px; grid-template-columns: 1.1fr .9fr; }
  .d-story { gap: 40px; grid-template-columns: .8fr 1.2fr; }
  .d-facts { grid-template-columns: 1fr; gap: 20px; }
  .d-facts > div { display: grid; grid-template-columns: 115px 1fr; gap: 12px; }
  .d-facts dt { margin: 0; }
  .d-next-section { gap: 40px; }
}
@media (max-width: 640px) {
  .d-page { padding-inline: 22px; }
  .d-top { min-height: 85px; gap: 16px; }
  .d-counter { font-size: 10px; letter-spacing: .01em; text-align: right; max-width: 100px; }
  .d-back { font-size: 13px; gap: 9px; }
  .d-back span { width: 31px; height: 31px; font-size: 20px; }
  .d-header { grid-template-columns: 1fr; gap: 26px; padding-block: 42px 32px; }
  .d-eyebrow { font-size: 12px; margin-bottom: 18px !important; }
  .d-title { font-size: clamp(33px, 9.5vw, 55px); max-width: 100%; letter-spacing: -.045em; }
  .d-description { font-size: 17px; max-width: none; }
  .d-tags { margin-top: 17px; gap: 8px 15px; }
  .d-tags span { font-size: 12px; }
  .d-hero-frame { margin-inline: -22px; padding: 20px; }
  .d-hero-image { height: auto; max-height: 68vh; min-height: 180px; }
  .d-figure-caption { font-size: 11px; gap: 12px; }
  .d-figure-caption span:last-child { text-align: right; }
  .d-story { grid-template-columns: 1fr; gap: 28px; padding-block: 55px; }
  .d-label { margin-bottom: 15px; font-size: 11px; }
  .d-story-title h2 { font-size: 29px; }
  .d-body { font-size: 18px; line-height: 1.95; }
  .d-facts { padding-top: 28px; gap: 18px; }
  .d-facts > div { grid-template-columns: 106px 1fr; }
  .d-facts dd { font-size: 14px; }
  .d-section-label { font-size: 12px; align-items: end; }
  .d-section-label span:last-child { max-width: 55%; text-align: right; }
  .d-secondary { margin-inline: -22px !important; padding: 22px; }
  .d-secondary img { max-height: 80vh; }
  .d-source-note { line-height: 1.8; font-size: 12px; }
  .d-next-section { grid-template-columns: 1fr; gap: 28px; padding-block: 66px; }
  .d-next-intro h2 { font-size: 24px; }
  .d-next-visual { height: 255px; }
  .d-next-project-title { font-size: 25px; }
  .d-next-arrow { font-size: 29px; }
  .d-footer { min-height: 100px; }
  .d-footer > span { font-size: 9px; max-width: 100px; text-align: right; }
  .d-hero-abstract { padding: 0; }
  .d-abstract { min-height: 330px; gap: 24px; }
  .d-abstract-word { font-size: clamp(64px, 19vw, 110px); }
  .d-abstract-snow .d-abstract-word { font-size: clamp(46px, 13vw, 80px); }
  .d-abstract-small { min-height: 255px; gap: 20px; }
  .d-abstract-small .d-abstract-word { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .d-page *, .d-page *::before, .d-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
body.no-motion .d-page *, body.no-motion .d-page *::before, body.no-motion .d-page *::after { transition: none !important; animation: none !important; }
.simple-detail{min-height:100svh;box-sizing:border-box;padding:85px 5vw 40px;color:#303446;background:radial-gradient(ellipse at 80% 20%,#efd9e9,transparent 60%),linear-gradient(135deg,#f7f1f5,#e6e0f3 65%,#e4ecf8)}
.simple-detail button{font-size:13px;color:#56677b;padding:10px 0}.detail-columns{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:5vw;align-items:center;min-height:calc(100svh - 170px)}.detail-columns h1{font-size:clamp(26px,3vw,48px);font-weight:400;line-height:1.25;margin:14px 0 26px}.detail-columns>section>p:first-child{font-size:12px;color:#68728b}.simple-detail .d-hero-frame{width:100%;border-radius:14px;overflow:hidden;aspect-ratio:auto;height:auto}.simple-detail img{width:100%;height:auto;display:block}.detail-copy small{color:#68728b;letter-spacing:.12em}.detail-copy h2{font-size:24px;font-weight:400;margin:14px 0 18px}.detail-copy h3{font-size:19px;font-weight:400;line-height:1.65;margin-bottom:18px}.detail-copy p{font-size:14px;line-height:1.9;color:#596078}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.detail-tags span{font-size:11px;border:1px solid #b8acc64d;border-radius:30px;padding:7px 12px}.detail-copy dl{margin:20px 0}.detail-copy dl>div{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid #b8acc633;font-size:12px}.detail-copy dd{margin:0}.detail-copy dt{color:#788097}.detail-copy a{display:block;margin-top:20px;padding:14px 0;border-bottom:1px solid #9292ac;font-size:14px}@media(max-width:900px){.simple-detail{padding:80px 24px 36px}.detail-columns{grid-template-columns:1fr;gap:30px;min-height:0}.detail-columns h1{font-size:30px}}

.simple-detail .d-hero-frame{padding:0;background:transparent;border:0}.simple-detail [data-detail-title]:focus{outline:none}

.simple-detail{position:relative;padding-bottom:80px}.simple-detail .detail-next{position:absolute;right:5vw;bottom:28px;padding:12px 0;border-bottom:1px solid #aaa1b9;max-width:85%;text-align:right}.simple-detail .d-hero-frame img{max-height:58svh;object-fit:contain}@media(max-width:900px){.simple-detail .detail-next{right:24px}.simple-detail .d-hero-frame img{max-height:55svh}}
body.in-detail .motion-toggle{display:none}
.simple-detail{padding-top:55px}
.simple-detail .detail-columns{min-height:calc(100svh - 210px)}
.simple-detail .detail-prev{position:absolute;left:5vw;bottom:28px;padding:12px 0;border-bottom:1px solid #aaa1b9;max-width:43%;text-align:left}
.simple-detail .detail-next{max-width:43%}
.detail-copy a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.detail-link-url{font-size:12px;overflow-wrap:anywhere}
.detail-copy .detail-features{font-size:12px;color:#68728b;margin-top:16px}
@media(max-width:900px){.simple-detail{padding-top:55px}.simple-detail .detail-prev{left:24px}.simple-detail .detail-columns{min-height:0}.simple-detail .detail-prev,.simple-detail .detail-next{font-size:11px;max-width:42%}}

.simple-detail .detail-prev,.simple-detail .detail-next{border-bottom:0}
.simple-detail[data-project="snacks"] .detail-tags span{background:#d6c2e8;border-color:#b49bc9;color:#342646}