:root {
  --dn-red: #d9071a;
  --dn-ink: #171717;
  --dn-paper: #f3f0e8;
  --dn-line: rgba(23, 23, 23, 0.16);
  --dn-blue: #2450e6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--dn-paper); color: var(--dn-ink); }
img { max-width: 100%; }
a { color: inherit; }
.keep-line { white-space: nowrap; }
.mobile-title-break { display:inline; }

.review-notice {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem clamp(1rem, 3vw, 2.5rem);
  background: var(--dn-blue);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-notice span:last-child { opacity: .72; }

.dana-page .site-header { background: rgba(243,240,232,.94); }
.article-head { padding-bottom: clamp(3.5rem, 7vw, 7rem); }
.article-head .project-name { color: var(--dn-red); }
.article-head h1 { max-width: 12ch; }
.website-project-page .article-head h1 { max-width: none; }
.article-summary { max-width: 48rem; }
.back-link { display: inline-block; margin-bottom: 2rem; text-decoration: none; }

.package-hero {
  position: relative;
  overflow: hidden;
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 86rem);
  margin-inline: auto;
  background: #efece3;
  border-block: 1px solid var(--dn-line);
}
.package-hero__photo { display:block; width:100%; }
.package-logo { position:absolute; z-index:2; object-fit:contain; }
.package-logo--bag { left:25.5%; top:24%; width:11%; }
.package-logo--pouch { left:11%; top:52%; width:10%; filter:brightness(0) invert(1); }
.package-logo--gift { left:61.5%; top:45%; width:12%; filter:brightness(0) invert(1); }
.package-logo--box-front { left:48.5%; top:72%; width:11%; }
.package-logo--sleeve { left:88.2%; top:59%; width:4.5%; filter:brightness(0) invert(1); }
.package-hero__note {
  position: absolute;
  top: 5%;
  left: 4%;
  z-index: 3;
  padding: .6rem .75rem;
  background: rgba(255,255,255,.76);
  max-width: 20rem;
  font-size: .66rem;
  letter-spacing: .14em;
  line-height: 1.7;
  text-transform: uppercase;
}

.project-context-note {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;
  padding: 1.3rem 0;
  border-block: 1px solid var(--dn-line);
}
.project-context-note strong { font-size: .7rem; letter-spacing: .14em; }

.statement-block {
  margin: clamp(4rem, 9vw, 8rem) 0;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--dn-ink);
  color: #fff;
}
.identity-project-page .statement-block { margin: clamp(2rem, 4vw, 3.25rem) 0; padding: clamp(1.6rem, 3vw, 2.5rem); }
.identity-project-page .statement-block h2 { max-width:none; margin-top:.5rem; font-size:clamp(1.8rem,3.3vw,3.2rem); }
.section-title-one-line { max-width:none !important; white-space:nowrap; font-size:clamp(1.75rem,3.4vw,3.1rem) !important; }
.wide-line-title { max-width:none !important; white-space:nowrap; font-size:clamp(1.4rem,1.9vw,1.9rem) !important; }
.key-experience-title { font-size:clamp(1.45rem,2.2vw,2rem) !important; }
.statement-block .eyebrow { color: #ff8a92; }
.statement-block h2 { max-width: 14ch; font-size: clamp(2rem, 5vw, 4.8rem); line-height: 1.08; }
.statement-block p:last-child { max-width: 42rem; color: rgba(255,255,255,.68); }

.network-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--dn-line);
  background: #fff;
}
.network-diagram__group { display: grid; gap: .7rem; }
.network-diagram__group span {
  padding: .8rem 1rem;
  border: 1px solid var(--dn-line);
  font-size: .8rem;
  text-align: center;
}
.network-diagram__arrow { color: var(--dn-red); font-size: 2rem; text-align: center; }
.network-diagram__symbol { display: grid; place-items: center; }
.network-diagram__symbol img { width: min(13rem, 100%); }
.network-diagram__symbol small { margin-top: 1rem; letter-spacing: .12em; }

.process-grid,
.system-grid,
.audience-grid,
.architecture-grid,
.screen-grid {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  background: var(--dn-line);
  border: 1px solid var(--dn-line);
}
.process-grid { grid-template-columns: repeat(4, 1fr); }
.process-grid article,
.system-grid article,
.audience-grid article,
.architecture-grid article {
  min-height: 11rem;
  padding: 1.5rem;
  background: var(--dn-paper);
}
.process-grid b { display: block; margin-bottom: 3.5rem; color: var(--dn-red); font-weight: 500; }
.process-grid strong,
.system-grid strong { font-size: 1.1rem; }
.process-grid p,
.system-grid p,
.audience-grid p,
.architecture-grid p { color: #666; font-size: .86rem; line-height: 1.7; }

.system-grid { grid-template-columns: 1.2fr 1.2fr 1fr; }
.system-grid article { display:grid; min-height:17rem; grid-template-rows:10.5rem auto 1fr; align-items:start; gap:1rem; }
.system-visual { display:grid; height:10.5rem; margin:0; place-items:center; }
.system-visual > img { display:block; width:70%; max-height:8rem; margin:0 auto; object-fit:contain; }
.color-swatches { display:grid; grid-template-columns:repeat(3,1fr); width:100%; height:8rem; margin:0; }
.color-swatches span:nth-child(1) { background:#d9071a; }
.color-swatches span:nth-child(2) { background:#1e1d1d; }
.color-swatches span:nth-child(3) { background:#fff; border: 1px solid #ddd; }

.live-device-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), 86rem);
  min-height: min(57vw, 47rem);
  margin-inline:auto;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 6vw, 6rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), transparent 48%),
    linear-gradient(145deg, #e9e5dd 0%, #d2ccc2 100%);
}
.desktop-mockup {
  position: relative;
  z-index: 1;
  width: min(87%, 69rem);
  margin: 0;
  overflow: visible;
  border-radius: .7rem .7rem .2rem .2rem;
  background: #181818;
  box-shadow: 0 2.2rem 5rem rgba(38,31,25,.28);
}
.desktop-mockup__bar {
  display: flex;
  align-items: center;
  gap: .42rem;
  height: 2.35rem;
  padding: 0 .9rem;
  border-radius: .7rem .7rem 0 0;
  background: #171717;
  color: rgba(255,255,255,.56);
  font-size: .62rem;
  letter-spacing: .06em;
}
.desktop-mockup__bar span {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #777;
}
.desktop-mockup__bar b {
  margin-left: .55rem;
  font-weight: 400;
}
.desktop-mockup__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #202020;
}
.desktop-mockup__screen img,
.phone-mockup__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desktop-mockup__base {
  position: absolute;
  left: -2.2%;
  right: -2.2%;
  bottom: -1rem;
  height: 1rem;
  border-radius: 0 0 1.4rem 1.4rem;
  background: linear-gradient(180deg, #f5f5f3 0%, #a5a3a0 100%);
  box-shadow: 0 .5rem 1.1rem rgba(0,0,0,.16);
}
.phone-mockup {
  position: absolute;
  right: 3.8%;
  bottom: 5.5%;
  z-index: 2;
  width: clamp(7.8rem, 14.5vw, 12.5rem);
  aspect-ratio: 430 / 932;
  margin: 0;
  padding: .55rem;
  border: 1px solid #393939;
  border-radius: 1.85rem;
  background: #141414;
  box-shadow: 0 1.6rem 3.6rem rgba(25,20,16,.36);
}
.phone-mockup__speaker {
  position: absolute;
  top: .32rem;
  left: 50%;
  z-index: 2;
  width: 27%;
  height: .22rem;
  border-radius: 999px;
  background: #333;
  transform: translateX(-50%);
}
.phone-mockup__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.3rem;
  background: #151515;
}
.browser-screen__viewport { position: relative; overflow: hidden; width: 100%; height: 100%; background: #fff; }
.device-meta { display:flex; width:min(calc(100% - clamp(2rem,8vw,8rem)),86rem); justify-content:space-between; gap:1rem; margin-inline:auto; padding:1rem 0; font-size:.7rem; letter-spacing:.11em; }

.audience-grid { grid-template-columns: repeat(4, 1fr); }
.audience-grid article { min-height: 12rem; }
.audience-grid b { display:block; margin-bottom:3rem; color:var(--dn-red); }
.architecture-grid { grid-template-columns: repeat(4, 1fr); }
.architecture-grid article { min-height: 9rem; }
.architecture-grid b { display:block; margin-bottom:1.8rem; color:#888; }

.project-screens { padding-top:clamp(1rem,2vw,2rem); }
.project-screens > h2 { margin-bottom:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--dn-line); font-size:clamp(2rem,3.7vw,3.3rem); }
.screen-grid { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:clamp(1.5rem,3vw,2.5rem) 1.5rem; margin-inline:auto; border:0; background:transparent; }
.browser-screen { overflow:hidden; border:1px solid var(--dn-line); background:#fff; }
.browser-screen__bar { display:flex; align-items:center; gap:.35rem; height:2rem; padding:0 .8rem; background:#171717; color:#aaa; font-size:.62rem; }
.browser-screen__bar i { width:.38rem; height:.38rem; border-radius:50%; background:#777; }
.browser-screen__viewport {
  height:auto;
  aspect-ratio:16/10;
}
.browser-screen__viewport iframe { width:1440px; height:900px; transform:scale(.485); }
.screen-preview { position:relative; width:100%; height:100%; overflow:hidden; background:#f8f5ee; color:#171717; }
.screen-preview__nav { display:flex; align-items:center; gap:1rem; height:3.3rem; padding:0 1.4rem; border-bottom:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.92); font-size:.46rem; }
.screen-preview__nav img { position:static !important; width:4.8rem !important; height:auto !important; max-height:1.45rem; object-fit:contain; }
.screen-preview__nav span { flex:1; text-align:right; opacity:.62; }
.screen-preview__nav--light { position:relative; z-index:1; border-color:rgba(255,255,255,.2); background:transparent; color:#fff; }
.screen-preview__head { padding:1.5rem 1.5rem 1.1rem; }
.screen-preview__head small,.proposal-preview small,.store-preview__head small { color:var(--dn-red); font-size:.5rem; letter-spacing:.17em; }
.screen-preview__head strong,.proposal-preview strong,.store-preview__head strong { display:block; margin:.4rem 0 .8rem; font-size:1.35rem; line-height:1.2; }
.screen-preview__head div { font-size:.52rem; color:#777; }
.product-preview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; padding:0 1.5rem; }
.product-preview-grid i { position:relative; aspect-ratio:1; border-radius:.8rem; background:#fff; box-shadow:0 .25rem 1rem rgba(0,0,0,.06); }
.product-preview-grid i::before { position:absolute; inset:18%; border-radius:.45rem; background:linear-gradient(145deg,#d9071a,#f4b4aa); content:""; }
.product-preview-grid i:nth-child(2)::before { background:linear-gradient(145deg,#171717,#8a8a8a); }
.product-preview-grid i:nth-child(3)::before { background:linear-gradient(145deg,#e9c27a,#fff2ca); }
.product-preview-grid i:nth-child(4)::before { background:linear-gradient(145deg,#7b924e,#d9e2b8); }
.proposal-preview { display:grid; grid-template-columns:.9fr 1.1fr; gap:1.5rem; padding:2.2rem 2rem; }
.proposal-preview p { max-width:17rem; color:#777; font-size:.62rem; line-height:1.7; }
.proposal-preview__form { display:grid; gap:.55rem; padding:1.2rem; border-radius:.8rem; background:#fff; box-shadow:0 .4rem 1.5rem rgba(0,0,0,.08); }
.proposal-preview__form i { padding:.65rem .7rem; border-bottom:1px solid rgba(0,0,0,.1); color:#777; font-size:.55rem; font-style:normal; }
.proposal-preview__form b { padding:.7rem; background:var(--dn-red); color:#fff; font-size:.58rem; text-align:center; }
.screen-preview--stores { background:#171717 url('https://images.unsplash.com/photo-1569154941061-e231b4725ef1?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; color:#fff; }
.screen-preview--stores::before { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.72)); content:""; }
.store-preview__head { position:relative; z-index:1; padding:2rem 1.6rem 1.2rem; }
.store-preview-grid { position:absolute; z-index:1; right:1.5rem; bottom:1.2rem; left:1.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.store-preview-grid i { display:flex; min-height:5rem; flex-direction:column; justify-content:end; padding:.8rem; border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.26); font-style:normal; }
.store-preview-grid b { font-size:.58rem; letter-spacing:.12em; }
.store-preview-grid span { margin-top:.3rem; font-size:.48rem; opacity:.72; }
.story-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; padding:0 1.5rem; }
.story-preview-grid i { aspect-ratio:4/3; border-radius:.6rem; background:url('https://images.unsplash.com/photo-1498654896293-37aacf113fd9?auto=format&fit=crop&w=700&q=80') center/cover; }
.story-preview-grid i:nth-child(2) { background-image:url('https://images.unsplash.com/photo-1579169326371-ccb4e63f7889?auto=format&fit=crop&w=700&q=80'); }
.story-preview-grid i:nth-child(3) { background-image:url('https://images.unsplash.com/photo-1579169825453-8d4b4653cc2c?auto=format&fit=crop&w=700&q=80'); }
.browser-screen figcaption { display:grid; gap:.35rem; min-height:5.8rem; padding:1rem 1.2rem 1.3rem; border-top:1px solid var(--dn-line); }
.browser-screen figcaption span { color:#777; font-size:.82rem; }

.result-block {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3.25rem);
  border-block: 1px solid var(--dn-line);
  background: #fff;
  color: var(--dn-ink);
}
.result-block::before { display:block; width:2.8rem; height:.25rem; margin-bottom:2rem; background:var(--dn-red); content:""; }
.result-block h2 { max-width:none; font-size:clamp(1.9rem,3.7vw,3.4rem); line-height:1.12; }
.result-intro { max-width:42rem; color:#666; }
.result-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2rem; background:var(--dn-line); }
.result-list span { display:flex; min-height:8.5rem; flex-direction:column; padding:1.5rem; background:#f7f5ef; }
.result-list b { margin-bottom:auto; color:var(--dn-red); font-weight:500; }
.result-list strong { margin-bottom:.45rem; font-size:.92rem; line-height:1.4; }
.result-list small { color:#777; line-height:1.55; }

.symbol-process-visual { display:grid; grid-template-columns:1fr; gap:1px; margin:2rem 0; background:var(--dn-line); border:1px solid var(--dn-line); }
.symbol-process-visual figure { margin:0; background:#fff; }
.symbol-process-visual figure > img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.symbol-process-final { display:grid; min-height:19rem; grid-template-rows:1fr auto; }
.symbol-process-final > img { width:min(18rem,42%) !important; margin:auto; object-fit:contain !important; }
.symbol-process-visual figcaption { padding:1rem 1.2rem; color:#666; font-size:.78rem; }

.preview-index { min-height:100vh; padding:clamp(1.5rem,4vw,4rem); background:#e9e7e1; }
.preview-index__head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin:5rem 0 3rem; padding-bottom:2rem; border-bottom:1px solid var(--dn-line); }
.preview-index__head h1 { margin:0; font-size:clamp(2.6rem,7vw,7rem); line-height:.95; letter-spacing:-.06em; }
.preview-index__head p { max-width:28rem; color:#666; }
.preview-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.preview-card { display:grid; min-height:34rem; overflow:hidden; background:#fff; text-decoration:none; }
.preview-card__visual { display:grid; min-height:23rem; place-items:center; background:#f3f0e8; }
.preview-card__visual--red { background:#d9071a; }
.preview-card__visual img { width:42%; max-height:14rem; object-fit:contain; }
.preview-card__visual--red img { filter:brightness(0) invert(1); }
.preview-card__copy { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1.5rem; border-top:1px solid var(--dn-line); }
.preview-card__copy small { grid-column:1/-1; letter-spacing:.12em; }
.preview-card__copy h2 { margin:0; font-size:1.7rem; }
.preview-card__copy span { color:var(--dn-red); }

@media (max-width: 900px) {
  .process-grid, .audience-grid, .architecture-grid { grid-template-columns: repeat(2,1fr); }
  .system-grid { grid-template-columns:1fr; }
  .desktop-mockup { width:92%; }
  .preview-cards { grid-template-columns:1fr; }
  .section-title-one-line, .wide-line-title { white-space:normal; }
  .browser-screen__viewport iframe { transform:scale(.39); }
}

@media (max-width: 640px) {
  .review-notice span:last-child { display:none; }
  .keep-line { white-space:normal; }
  .website-project-page .article-head h1 {
    max-width:100%;
    font-size:clamp(2.05rem,10.2vw,2.65rem);
    overflow-wrap:anywhere;
    word-break:keep-all;
  }
  .website-project-page .article-head .keep-line { display:block; max-width:100%; }
  .website-project-page .mobile-title-break { display:block; }
  .package-hero { width:calc(100% - 2rem); }
  .package-logo--box-front { width:13%; }
  .project-context-note { grid-template-columns:1fr; gap:.7rem; }
  .network-diagram { grid-template-columns:1fr; }
  .network-diagram__arrow { transform:rotate(90deg); }
  .process-grid, .audience-grid, .architecture-grid { grid-template-columns:1fr; }
  .live-device-stage {
    grid-template-rows:auto auto;
    gap:1.5rem;
    width:calc(100% - 2rem);
    min-height:0;
    padding:1.5rem 1rem 2rem;
  }
  .desktop-mockup { width:100%; }
  .desktop-mockup__bar { height:1.65rem; padding:0 .55rem; font-size:.48rem; }
  .desktop-mockup__bar span { width:.3rem; height:.3rem; }
  .desktop-mockup__base { bottom:-.55rem; height:.58rem; }
  .phone-mockup {
    position:relative;
    right:auto;
    bottom:auto;
    width:min(42vw,9.8rem);
    margin:.25rem auto 0;
  }
  .screen-grid { grid-template-columns:1fr; gap:1.25rem; }
  .project-screens > h2 { margin-bottom:1.5rem; padding-bottom:1.25rem; }
  .browser-screen__viewport iframe { transform:scale(.28); }
  .screen-preview__nav span { display:none; }
  .screen-preview__head { padding:1.1rem; }
  .product-preview-grid,.story-preview-grid { gap:.35rem; padding:0 1rem; }
  .proposal-preview { grid-template-columns:1fr; gap:.75rem; padding:1.1rem; }
  .proposal-preview p { display:none; }
  .proposal-preview__form { gap:.25rem; padding:.6rem; }
  .proposal-preview__form i { padding:.35rem; }
  .store-preview__head { padding:1.2rem 1rem; }
  .store-preview-grid { right:1rem; bottom:.8rem; left:1rem; }
  .result-block { padding:1.5rem; }
  .result-list { grid-template-columns:1fr; }
  .result-list span { min-height:7.5rem; }
  .device-meta { flex-direction:column; }
  .preview-index__head { align-items:start; flex-direction:column; }
  .symbol-process-visual { grid-template-columns:1fr; }
}