/* Quiet drafting details: a little depth in the paper, six meaningful pictograms. */
.design-icon{display:block;width:24px;height:24px;flex:0 0 auto;color:currentColor}
.album-hero{position:relative;background-image:radial-gradient(ellipse at 91% 7%,#b9a1e51c 0,transparent 48%)}
.album-hero>.wrap{position:relative;z-index:1}
/* Original brand artwork, kept behind the type as a quiet architectural mark. */
.album-hero::before{content:"";position:absolute;top:0;right:16%;width:min(36vw,580px);aspect-ratio:214/135;background:#b9a1e5;-webkit-mask:url('/assets/media/logo-large.png') center/contain no-repeat;mask:url('/assets/media/logo-large.png') center/contain no-repeat;opacity:.065;pointer-events:none;user-select:none}
@media(max-width:900px){.album-hero::before{top:8px;right:5%;width:55vw;opacity:.075}}
@media(max-width:600px){.album-hero::before{top:8px;right:3%;width:78vw;opacity:.09}}
.album-hero::after{content:"";position:absolute;top:28px;right:calc(var(--gutter)/2);width:18px;height:148px;pointer-events:none;border-top:1px solid #cdbbe329;border-right:1px solid #cdbbe329;background:linear-gradient(#cdbbe329,#cdbbe329) right bottom/8px 1px no-repeat}
.hero-heading .hero-eyebrow{display:flex;align-items:center;gap:12px;max-width:none}
.hero-eyebrow .design-icon{width:26px;height:26px;color:#b9a1e5}
.hero-eyebrow>span{max-width:34ch}
.hero-exhibit{position:relative}
.hero-exhibit::after{content:"";position:absolute;right:-10px;bottom:-10px;width:7px;height:7px;border-right:1px solid #cdbbe340;border-bottom:1px solid #cdbbe340;pointer-events:none}

/* No overflow or transform here: the project breakdown keeps its native sticky track. */
.album-process{background-image:radial-gradient(ellipse 70% 420px at 90% 0,#b9a1e51a,transparent 80%)}
.album-process>.wrap{position:relative}
.album-process>.wrap::before{content:"";position:absolute;left:calc(var(--gutter) + 74px);top:-28px;width:160px;height:7px;pointer-events:none;background:linear-gradient(#61427e24,#61427e24) left center/100% 1px no-repeat,linear-gradient(#61427e24,#61427e24) left center/1px 7px no-repeat,linear-gradient(#61427e24,#61427e24) right center/1px 7px no-repeat}
.album-process>.wrap::after{content:"";position:absolute;top:6px;left:calc(var(--gutter)/2 - 4px);width:9px;height:9px;pointer-events:none;background:linear-gradient(#61427e26,#61427e26) center/1px 9px no-repeat,linear-gradient(#61427e26,#61427e26) center/9px 1px no-repeat}

.craft-section{background-color:#d9cee8;background-image:radial-gradient(ellipse at 0 0,#f4efe77a,transparent 65%),linear-gradient(120deg,#e3d9ec80,transparent 65%)}
.material-sequence li{gap:13px}
.material-sequence .design-icon{color:#61427e}
.material-sequence strong{min-width:0}
.album-additional{background-image:radial-gradient(ellipse at 96% 90%,#b9a1e514,transparent 65%)}
.service-lines article{grid-template-columns:32px minmax(0,1fr)}
.service-number{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}
.service-number .design-icon{width:28px;height:28px}

@media(max-width:1100px){.material-sequence li{gap:10px}.material-sequence li+li{padding-inline-start:18px}.material-sequence .design-icon{width:22px;height:22px}}
@media(min-width:601px) and (max-width:900px){.material-sequence li{display:grid;grid-template-columns:auto 1fr auto;gap:12px 10px;align-items:center}.material-sequence .design-icon{grid-column:2;grid-row:1}.material-sequence strong{grid-column:1/3;grid-row:2;align-self:start}.material-sequence li>span:last-child{grid-column:3;grid-row:2;align-self:start}}
@media(max-width:800px){.album-process>.wrap::before{left:calc(var(--gutter) + 48px);width:112px}.hero-heading .hero-eyebrow{gap:10px}.hero-eyebrow>span{max-width:30ch}.hero-eyebrow .design-icon{width:24px;height:24px}}
@media(max-width:600px){.hero-eyebrow>span{max-width:34ch}.material-sequence li,.material-sequence li+li{gap:16px;padding-inline:0}.material-sequence .design-icon{width:24px;height:24px}.service-lines article{grid-template-columns:30px minmax(0,1fr);gap:14px}}

@media(max-width:760px){
  .album-hero{
    background-image:radial-gradient(ellipse 118% 430px at 106% 4%,#baa0ec54 0,#a88acd24 48%,transparent 78%),radial-gradient(ellipse 95% 460px at 0 58%,#9c83c322,transparent 80%);
  }
  .album-hero::after{
    top:36px;right:8px;width:8px;height:154px;
    border-color:#d2bdeb66;
    background:linear-gradient(#d2bdeb66,#d2bdeb66) right bottom/8px 1px no-repeat;
    pointer-events:none;
  }
  .hero-exhibit::after{
    right:0;bottom:-12px;width:12px;height:8px;
    border-color:#d2bdeb73;
    pointer-events:none;
  }
  .album-process{
    background-color:#f1eee8;
    background-image:radial-gradient(ellipse 100% 420px at 100% 0,#c7b5df66,transparent 85%),radial-gradient(ellipse 80% 300px at 0 80px,#fffaf0c2,transparent 90%),linear-gradient(180deg,transparent 300px,#f5f2ec 760px);
  }
  .album-process>.wrap::before{
    left:calc(var(--gutter) + 34px);top:-27px;width:110px;height:7px;opacity:1;
    background:linear-gradient(#6f548b66,#6f548b66) left center/100% 1px no-repeat,linear-gradient(#6f548b66,#6f548b66) left center/1px 7px no-repeat,linear-gradient(#6f548b66,#6f548b66) right center/1px 7px no-repeat;
    pointer-events:none;
  }
  .album-process>.wrap::after{
    top:-19px;left:auto;right:var(--gutter);
    background:linear-gradient(#6f548b59,#6f548b59) center/1px 9px no-repeat,linear-gradient(#6f548b59,#6f548b59) center/9px 1px no-repeat;
    pointer-events:none;
  }
  .craft-section{
    background:linear-gradient(#735a9259,#735a9259) right 9px top 36px/1px 126px no-repeat,linear-gradient(#735a9259,#735a9259) right 9px top 36px/8px 1px no-repeat,radial-gradient(ellipse 105% 500px at 0 0,#fbf3e6b3,transparent 78%),linear-gradient(145deg,#e6d9ed66,transparent 65%),#d3c3e4;
  }
  .album-additional{
    background:linear-gradient(#7d628f4d,#7d628f4d) left 9px top 38px/1px 82px no-repeat,linear-gradient(#7d628f4d,#7d628f4d) left 9px top 38px/7px 1px no-repeat,radial-gradient(ellipse 100% 450px at 105% 100%,#d2c2e775,transparent 82%),linear-gradient(180deg,#f8f5ef,transparent 68%),#eeece7;
  }
}
