@charset "UTF-8";

.project-page { background:linear-gradient(145deg,#eaf7ff,#f4ecff 48%,#ffe8f3); }
.project-top { width:min(1380px,calc(100% - 80px)); margin:0 auto; padding:54px 0 60px; }
.project-topline { display:flex; justify-content:space-between; gap:20px; padding-bottom:15px; border-bottom:1px solid #94bfe1; color:#44688a; font-size:11px; letter-spacing:.1em; }
.project-topline a:hover { color:#a34780; }
.project-kicker { margin:54px 0 10px; color:#8e5a83; font-size:12px; letter-spacing:.12em; }
.project-top h1 { margin:0; color:#263e5e; font-size:clamp(55px,8vw,132px); line-height:1.1; letter-spacing:-.055em; overflow-wrap:anywhere; }
.project-subtitle { margin:16px 0 0; color:#52789c; font-size:15px; }
.project-cover { margin:0; padding:clamp(28px,4vw,70px) clamp(20px,6vw,100px) 24px; background:linear-gradient(135deg,#dceeff,#f7e5f6 60%,#ffd8e8); }
.project-cover a { display:block; width:min(1250px,100%); margin:0 auto; }
.project-cover img { display:block; width:100%; height:auto; max-height:80svh; margin:auto; object-fit:contain; filter:none; }
.project-cover figcaption { width:min(1250px,100%); margin:14px auto 0; color:#526f8e; font-size:11px; letter-spacing:.05em; }
.project-gallery-section { padding:90px clamp(20px,6vw,100px) 100px; background:linear-gradient(145deg,#eff9ff,#e3efff 58%,#fff0f8); }
.project-gallery-inner { width:min(1250px,100%); margin:0 auto; }
.project-gallery-heading { display:grid; grid-template-columns:1fr auto; gap:8px 30px; align-items:end; padding-top:15px; border-top:1px solid #95bfe0; }
.project-gallery-heading span { grid-column:1/-1; color:#557c9b; font-size:11px; letter-spacing:.14em; }
.project-gallery-heading h2 { margin:12px 0 30px; color:#284766; font-size:clamp(38px,5vw,70px); line-height:1.1; }
.project-gallery-heading p { margin:0 0 34px; color:#5e7792; font-size:12px; }
.project-gallery-group { margin-top:44px; }
.project-gallery-group-heading { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid #acc9df; }
.project-gallery-group-heading h3 { margin:0; color:#2b496a; font-size:clamp(20px,2.4vw,30px); font-weight:700; }
.project-gallery-group-heading span { flex:none; color:#6d83a0; font-size:12px; }
.project-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project-page[data-project="craft-beer"] .project-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-visual { margin:0; }
.project-visual a { display:grid; place-items:center; width:100%; min-height:210px; padding:12px; border:1px solid #d7e6f2; border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 14px 34px rgba(92,141,181,.09); overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.project-visual a:hover { transform:translateY(-4px); box-shadow:0 20px 38px rgba(92,141,181,.16); }
.project-visual img { display:block; width:100%; height:clamp(230px,27vw,400px); margin:auto; object-fit:contain; filter:none; }
.project-visual figcaption { padding:10px 4px 0; color:#4e7598; font-size:12px; overflow-wrap:anywhere; }
.project-information { display:grid; grid-template-columns:1fr 2fr; gap:30px; margin-top:100px; padding:30px 0; border-block:1px solid #97bddd; }
.project-information h2 { margin:0; color:#284766; font-size:32px; }
.project-information p { margin:6px 0 0; color:#5f7893; font-size:14px; }
.project-next { display:flex; justify-content:space-between; gap:25px; padding:35px 0 0; color:#355d81; font-size:13px; }
.project-next a:hover { color:#a34780; }

.coffee-top { padding-top:32px; padding-bottom:38px; }
.coffee-top .project-kicker { margin-top:26px; margin-bottom:8px; }
.coffee-top h1 { max-width:1200px; font-size:clamp(20px,3.6vw,48px); line-height:1.12; letter-spacing:-.062em; white-space:nowrap; }
.coffee-top .project-subtitle { margin-top:14px; color:#765a84; font-size:clamp(15px,1.3vw,18px); }
.coffee-information { padding:54px clamp(20px,6vw,100px) 72px; background:linear-gradient(135deg,#e0f2ff 0%,#f6edff 58%,#ffe9f3 100%); }
.coffee-information-inner,.coffee-design-inner { width:min(1250px,100%); margin:0 auto; }
.coffee-information-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.coffee-information-heading span,.coffee-design-heading span { color:#557c9b; font-size:11px; font-weight:700; letter-spacing:.15em; }
.coffee-title-stack h2 { margin:0; color:#284766; font-size:clamp(25px,2.7vw,36px); line-height:1.13; }
.coffee-title-stack small { display:block; margin-top:6px; color:#7288a1; font-size:clamp(10px,.95vw,12px); font-weight:400; letter-spacing:.11em; line-height:1.35; }
.coffee-information-heading > span { order:2; align-self:start; text-align:right; }
.coffee-information-heading .coffee-title-stack { order:1; text-align:left; }
.coffee-information-row { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,1fr); gap:40px; padding:27px 0 32px; border-top:1px solid #a9c7df; }
.coffee-information-row:last-child { border-bottom:1px solid #a9c7df; }
.coffee-information-label span { display:block; color:#99779d; font-size:11px; letter-spacing:.12em; }
.coffee-information-label h3 { margin:12px 0 5px; color:#2c4d70; font-size:clamp(23px,2.5vw,34px); line-height:1.15; }
.coffee-information-label small { color:#64819c; font-size:10px; letter-spacing:.13em; }
.coffee-information-row p { max-width:850px; margin:0; color:#385470; font-size:clamp(16px,1.3vw,18px); line-height:1.8; letter-spacing:.01em; }
.coffee-design-gallery { padding:105px clamp(20px,6vw,100px) 115px; background:linear-gradient(150deg,#f1faff,#e5f0ff 52%,#fff0f8); }
.coffee-design-heading { display:grid; grid-template-columns:1fr auto; gap:9px 30px; align-items:end; margin:0 calc(64px + clamp(10px,1.5vw,22px)) 30px; padding-top:16px; border-top:1px solid #9fc4e0; }
.coffee-design-heading span { grid-column:1/-1; text-align:right; }
.coffee-design-heading p { justify-self:end; margin:0 0 5px; color:#5e7792; font-size:13px; text-align:right; }
.coffee-carousel { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:clamp(10px,1.5vw,22px); position:relative; padding:0; border:0; background:transparent; }
.coffee-carousel-window { grid-column:2; grid-row:1; min-width:0; padding:0; overflow:hidden; border-radius:28px; background:linear-gradient(135deg,#c9e7ff,#eddef6 55%,#ffd0e7); box-shadow:0 26px 60px rgba(78,119,166,.15); }
.coffee-carousel-track { display:flex; transition:transform .55s cubic-bezier(.2,.75,.2,1); will-change:transform; }
.coffee-slide { flex:0 0 100%; min-width:0; height:clamp(440px,62vw,760px); margin:0; }
.coffee-slide a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-width:0; min-height:0; padding:0; background:transparent; }
.coffee-slide img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; filter:none; }
.coffee-carousel-arrow { position:relative; z-index:2; display:grid; place-items:center; justify-self:center; width:56px; height:56px; padding:0; border:1px solid #fff; border-radius:50%; background:linear-gradient(140deg,#f8fdff 8%,#d5ecff 54%,#f7d9ed 100%); box-shadow:inset 0 2px 4px #fff,0 8px 20px #7fa8cb38,0 3px 10px #db9ec526; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.coffee-carousel-arrow::before { content:""; position:absolute; inset:4px; border:1px solid #ffffffb8; border-radius:50%; pointer-events:none; }
.coffee-carousel-arrow svg { display:block; position:relative; width:29px; height:29px; fill:#365f8e; }
.coffee-carousel-prev svg { transform:rotate(180deg); }
.coffee-carousel-arrow:hover { transform:translateY(-3px); background:linear-gradient(140deg,#fff 5%,#c7e5ff 52%,#f6c8e3 100%); box-shadow:inset 0 2px 4px #fff,0 12px 24px #7fa8cb4a,0 5px 13px #db9ec530; }
.coffee-carousel-arrow:focus-visible { outline:3px solid #315f9a; outline-offset:3px; }
.coffee-carousel-prev { grid-column:1; grid-row:1; }
.coffee-carousel-next { grid-column:3; grid-row:1; }
.coffee-carousel-meta { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:17px 2px 26px; border-bottom:1px solid #a9c8de; color:#466b8a; font-size:13px; }
.coffee-carousel-count { color:#2b4e71; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.coffee-design-gallery .project-next { padding-top:27px; }
.coffee-motion { width:min(100%,1040px); margin:68px auto 24px; padding-top:23px; border-top:1px solid #a9c8de; }
.coffee-motion-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:22px; row-gap:7px; margin-bottom:21px; }
.coffee-motion-heading span { grid-column:1/-1; justify-self:end; color:#557c9b; font-size:11px; font-weight:700; letter-spacing:.15em; text-align:right; }
.coffee-motion-heading p { justify-self:end; margin:0 0 3px; color:#6b809b; font-size:12px; text-align:right; }
.coffee-motion-player { display:block; width:100%; aspect-ratio:16/9; border:1px solid #ffffffc9; border-radius:22px; background:#d8eaff; box-shadow:0 22px 48px #789fc038,0 5px 18px #d69fc12b; object-fit:contain; }
.project-film-pending { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:250px; border:1px solid #fff; border-radius:22px; background:linear-gradient(135deg,#d9efff,#f1e7fb 60%,#ffdeee); color:#587597; }
.project-film-pending > span { display:grid; place-items:center; width:58px; height:58px; border:1px solid #fff; border-radius:50%; background:#ffffff73; font-size:31px; }
.project-film-pending p { margin:0; font-size:16px; }
.project-film-pending small { font-size:11px; font-weight:400; letter-spacing:.08em; }

@media(prefers-reduced-motion:reduce) {
  .coffee-carousel-track,.coffee-carousel-arrow { transition:none; }
}

@media(max-width:700px) {
  .project-top { width:calc(100% - 40px); padding:35px 0 42px; }
  .project-topline span { max-width:48%; text-align:right; }
  .project-kicker { margin-top:40px; }
  .project-subtitle { font-size:13px; }
  .project-cover { padding:28px 15px 18px; }
  .project-cover img { max-height:none; }
  .project-gallery-section { padding:62px 18px 75px; }
  .project-gallery-heading { display:block; }
  .project-gallery-heading h2 { margin:16px 0; }
  .project-gallery-heading p { margin-bottom:25px; }
  .project-gallery-group { margin-top:32px; }
  .project-gallery-grid,.project-page[data-project="craft-beer"] .project-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .project-visual a { min-height:150px; padding:6px; border-radius:14px; }
  .project-visual img { height:clamp(155px,42vw,260px); }
  .project-visual figcaption { font-size:11px; }
  .project-information { display:block; margin-top:65px; }
  .project-information p { margin-top:12px; }
  .project-next { display:grid; gap:18px; }
  .coffee-top { padding-top:28px; padding-bottom:34px; }
  .coffee-top .project-kicker { margin-top:22px; }
  .coffee-information { padding:42px 20px 52px; }
  .coffee-information-heading { display:block; margin-bottom:18px; }
  .coffee-information-heading > span { display:block; text-align:right; }
  .coffee-information-heading .coffee-title-stack { margin-top:8px; text-align:left; }
  .coffee-information-row { display:block; padding:20px 0 26px; }
  .coffee-information-label { margin-bottom:15px; }
  .coffee-information-row p { font-size:15px; line-height:1.85; }
  .coffee-design-gallery { padding:70px 16px 78px; }
  .coffee-design-heading { display:block; margin-inline:46px; }
  .coffee-design-heading span { display:block; text-align:right; }
  .coffee-design-heading .coffee-title-stack { margin:11px 0; }
  .coffee-design-heading p { margin-bottom:16px; }
  .coffee-carousel { grid-template-columns:42px minmax(0,1fr) 42px; gap:4px; }
  .coffee-carousel-window { border-radius:18px; }
  .coffee-slide { height:clamp(170px,55vw,270px); }
  .coffee-slide a { padding:0; }
  .coffee-carousel-arrow { width:40px; height:40px; }
  .coffee-carousel-arrow svg { width:22px; height:22px; }
  .coffee-carousel-meta { font-size:12px; }
  .coffee-motion { margin-top:48px; padding-top:20px; }
  .coffee-motion-heading { margin-bottom:16px; }
  .coffee-motion-player { border-radius:16px; }
}

/* The coffee exhibit borrows the opening gallery's painter, bubbles and light. */
.coffee-top { position:relative; z-index:1; }
.coffee-top-band { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse 27% 75% at 83% 67%,#c4e2ffbd,transparent 85%),radial-gradient(ellipse 26% 75% at 100% 17%,#ffd4eac2,transparent 80%),radial-gradient(ellipse 35% 45% at 0 100%,#d8f0ff91,transparent 85%),linear-gradient(110deg,#eaf6ff,#ecefff 60%,#f9e4f3); }
.coffee-top > :not(.coffee-top-scenery):not(.coffee-guide) { position:relative; z-index:2; }
.coffee-top-scenery { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.coffee-orbit { position:absolute; right:5%; top:14%; width:340px; height:170px; border:1px solid #fffbd4; border-radius:50%; transform:rotate(-18deg); box-shadow:0 0 0 14px #ffffff19; }
.coffee-bubble { position:absolute; width:27px; height:27px; border:1px solid #fffe; border-radius:50%; background:radial-gradient(circle at 30% 26%,#fff 0 10%,#e7f5ffb0 29%,#9dc8ec8c 75%,#dba7d38c); box-shadow:inset -2px -3px 6px #fff8,0 8px 15px #7097c02b; animation:coffee-bob 7s ease-in-out infinite; }
.coffee-bubble-one { right:25%; top:25%; }
.coffee-bubble-two { right:3%; bottom:16%; width:19px; height:19px; animation-delay:-3s; }
.coffee-spark { position:absolute; width:18px; height:18px; background:linear-gradient(130deg,#fff8cb,#ffcc78); clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); filter:drop-shadow(0 2px 4px #f5bd744d); animation:coffee-twinkle 5s ease-in-out infinite; }
.coffee-spark-one { right:27%; bottom:16%; }
.coffee-spark-two { right:5%; top:17%; width:13px; height:13px; animation-delay:-2s; }
.coffee-top h1 { max-width:calc(100% - 245px); }
.coffee-guide { position:absolute; z-index:1; right:10px; top:36px; width:210px; height:210px; margin:0; pointer-events:none; }
.coffee-guide .ip-motion-poster,.coffee-guide .ip-motion-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.coffee-guide .ip-motion-poster,.coffee-guide .ip-motion-canvas { -webkit-mask-image:linear-gradient(#000 0 78%,transparent 100%); mask-image:linear-gradient(#000 0 78%,transparent 100%); }
.coffee-guide .ip-motion-canvas { opacity:0; transition:opacity .2s ease; }
.coffee-guide.is-ready .ip-motion-canvas { opacity:1; }
.coffee-guide.is-ready .ip-motion-poster { opacity:0; }
.coffee-guide .ip-motion-source,.coffee-guide .motion-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.coffee-guide figcaption { position:absolute; right:176px; top:63px; width:150px; padding:10px 12px; border:1px solid #fff; border-radius:18px 18px 5px 18px; background:linear-gradient(135deg,#ffffffed,#fff0f8ed); box-shadow:0 9px 23px #8a9fc129; color:#735171; font-size:11px; line-height:1.55; text-align:center; animation:coffee-note 9s ease-in-out infinite; }
.coffee-guide figcaption span { color:#e2a64f; margin-left:3px; }
.coffee-information { position:relative; isolation:isolate; overflow:hidden; }
.coffee-information::before { content:""; position:absolute; z-index:-1; left:-150px; top:30px; width:350px; height:350px; border:1px solid #ffffffc9; border-radius:50%; box-shadow:0 0 0 26px #ffffff20,0 0 0 58px #ffffff12; pointer-events:none; }
.coffee-information::after { content:"✦"; position:absolute; right:5%; top:36px; color:#efb768; font-size:31px; line-height:1; opacity:.8; pointer-events:none; }
.coffee-information-heading h2 { position:relative; }
.coffee-information-heading h2::after { content:""; position:absolute; right:-16px; bottom:0; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#ffc4df 55%,#e59dc2); }
.coffee-information-row { position:relative; z-index:1; margin-top:13px; padding:21px 26px 24px; border:1px solid #ffffffd9; border-radius:22px; background:linear-gradient(110deg,#f5fbffde,#ffffffb3 58%,#fff5fbe0); box-shadow:inset 0 2px 3px #ffffffc9,0 11px 24px #759ec21a; }
.coffee-information-row:nth-of-type(2) { background:linear-gradient(110deg,#fff4fbeb,#ffffffb8 58%,#e8f5ffde); }
.coffee-information-row:nth-of-type(3) { background:linear-gradient(110deg,#f3f2ffec,#ffffffb8 58%,#fff0f8de); }
.coffee-information-row:last-child { border:1px solid #ffffffd9; }
.coffee-information-label span { display:inline-block; padding:5px 9px; border-radius:999px; background:#dbeeff; color:#466c98; }
.coffee-information-row:nth-of-type(2) .coffee-information-label span { background:#ffe0ef; color:#a35680; }
.coffee-information-row:nth-of-type(3) .coffee-information-label span { background:#e9e6ff; color:#71659d; }
.coffee-design-gallery { position:relative; isolation:isolate; overflow:hidden; padding-top:72px; padding-bottom:90px; background:radial-gradient(ellipse at 6% 17%,#ffe2f1 0,transparent 37%),radial-gradient(ellipse at 95% 74%,#b9e1ff 0,transparent 41%),linear-gradient(150deg,#f1faff,#e5f0ff 52%,#fff0f8); }
.coffee-design-gallery::before { content:""; position:absolute; z-index:-1; right:-130px; top:170px; width:420px; height:420px; border:1px solid #ffffffb3; border-radius:50%; box-shadow:0 0 0 30px #ffffff1f; pointer-events:none; }
@media(max-width:560px) {
  .coffee-motion-heading { gap:6px 12px; }
  .coffee-motion-heading span { grid-column:1/-1; grid-row:1; }
  .coffee-motion-heading p { grid-column:1/-1; grid-row:3; margin:0; font-size:11px; }
  .coffee-motion-heading .coffee-title-stack { grid-column:1/-1; grid-row:2; }
}
@keyframes coffee-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes coffee-twinkle { 0%,100% { opacity:.55; transform:scale(.8); } 50% { opacity:1; transform:scale(1.12); } }
@keyframes coffee-note { 0%,5%,90%,100% { opacity:0; transform:translateY(7px); } 14%,82% { opacity:1; transform:translateY(0); } }
@media(max-width:700px) {
  .coffee-top h1 { max-width:none; }
  .coffee-top-scenery .coffee-orbit { right:-22px; top:28%; width:160px; height:105px; }
  .coffee-bubble-one { right:8%; top:20%; width:16px; height:16px; }
  .coffee-bubble-two { right:5%; bottom:12%; width:12px; height:12px; }
  .coffee-spark-one { right:31%; bottom:14%; width:12px; height:12px; }
  .coffee-spark-two { right:2%; top:9%; width:10px; height:10px; }
  .coffee-guide { right:-4px; top:43px; width:110px; height:110px; }
  .coffee-guide .ip-motion-poster,.coffee-guide .ip-motion-canvas { -webkit-mask-image:none; mask-image:none; }
  .coffee-guide figcaption { display:none; }
  .coffee-information::before { left:-175px; top:0; }
  .coffee-information::after { right:7%; top:20px; font-size:20px; }
  .coffee-information-row { margin-top:10px; padding:19px 18px 22px; border-radius:18px; }
  .coffee-design-gallery { padding-top:56px; padding-bottom:72px; }
}
@media(max-width:360px) {
  .coffee-guide { top:42px; width:70px; height:70px; }
}
@media(prefers-reduced-motion:reduce) {
  .coffee-bubble,.coffee-spark,.coffee-guide figcaption { animation:none; }
  .coffee-guide figcaption { opacity:1; transform:none; }
  .coffee-guide .ip-motion-canvas { transition:none; }
}

/* Portrait packaging stays complete in a narrower exhibit window. */
.project-page[data-project="lumirose-atoll"] .coffee-design-inner { width:min(760px,100%); }
@media(max-width:700px) { .project-page[data-project="lumirose-atoll"] .coffee-slide { height:clamp(280px,95vw,560px); } }