/* Selected Work v3: a single, self-contained scrapbook layout.
   No inherited experimental overrides from earlier versions. */
#work.scrapbook-work {
  position:relative;
  isolation:isolate;
  padding-top:90px;
  padding-bottom:85px;
  color:#f1e8f5;
}
#work .section-label{margin-bottom:30px}
#work .work-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:16px 28px;
  margin:0 0 30px;
  min-height:0;
}
#work .work-heading-copy{padding:0;min-width:0}
#work .work-heading h2{
  color:#f6edee;
  font:700 clamp(2.65rem,4.15vw,4rem)/.98 "Space Grotesk",sans-serif;
  letter-spacing:-.058em;
  margin:0 0 13px;
}
#work .work-heading-copy>p{
  color:#d0b5e6;
  font:500 .72rem/1.4 "DM Mono",monospace;
  letter-spacing:.17em;
  margin:0;
}
#work .work-see-all{
  margin:0 0 3px;
  padding:8px 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#d9b8ed;
  border-bottom:1px solid #c0a4d6;
  text-decoration:none;
  font:500 .75rem "DM Mono",monospace;
  transition:color .18s,border-color .18s;
}
#work .work-see-all:hover{color:#fff;border-color:#fff}
#work .work-see-all:focus-visible,
#work .scrap-open:focus-visible,
#work .other-work a:focus-visible,
#work .work-process summary:focus-visible{
  outline:2px solid #e2c4ff;
  outline-offset:4px;
}

/* A real 3 + 2 grid, with BOTH lower cards the same width as the upper three. */
#work .scrapbook-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
  gap:24px;
  padding:12px 0 6px;
}
#work .scrap-card{
  --card-bg:#f5efe7;
  --card-fg:#27223b;
  --card-sub:#7e62a7;
  --card-muted:#5e536a;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  column-gap:8px;
  row-gap:12px;
  align-items:start;
  grid-column:span 2;
  min-width:0;
  width:100%;
  height:auto;
  min-height:330px;
  overflow:visible;
  padding:20px 20px 19px 23px;
  background:var(--card-bg);
  color:var(--card-fg);
  border:1px solid rgba(93,65,91,.20);
  border-radius:12px;
  box-shadow:0 17px 36px rgba(10,10,30,.22),0 2px 6px rgba(10,10,30,.07);
  transition:box-shadow .24s,translate .24s;
}
#work .scrap-card:nth-child(4){grid-column:2/span 2}
#work .scrap-card:nth-child(5){grid-column:4/span 2}
#work .scrap-card:hover{
  translate:0 -4px;
  border-color:rgba(195,163,218,.55);
  box-shadow:0 24px 45px rgba(10,10,30,.31);
}
#work .scrap-card::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background-image:radial-gradient(#8b7584 .45px,transparent .6px);
  background-size:7px 7px;
  opacity:.22;
  pointer-events:none;
}
#work .scrap-card::after{pointer-events:none}
#work .scrap-card > *{z-index:1}
#work .scrap-card .scrap-topline{
  grid-column:1/-1;
  grid-row:1;
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:29px;
  font:500 .58rem/1.35 "DM Mono",monospace;
  letter-spacing:.075em;
  color:var(--card-muted);
}
#work .scrap-card .scrap-index{
  display:grid;
  flex:0 0 34px;
  width:34px;
  height:29px;
  place-items:center;
  border:1px solid currentColor;
  border-radius:8px;
  font:400 .83rem "DM Mono",monospace;
}
#work .scrap-card .scrap-copy{
  grid-column:1;
  grid-row:2;
  align-self:start;
  min-width:0;
  position:relative;
  z-index:3;
  width:100%;
  max-width:none;
  padding:13px 0 0;
}
#work .scrap-card h3{
  margin:0 0 13px;
  color:var(--card-fg);
  font:700 clamp(1.50rem,2vw,2rem)/1.08 "Space Grotesk",sans-serif;
  letter-spacing:-.05em;
  overflow-wrap:break-word;
}
#work .scrap-card .scrap-tagline{
  margin:0 0 12px;
  color:var(--card-sub);
  font:600 clamp(.86rem,1.13vw,1rem)/1.3 "Space Grotesk",sans-serif;
}
#work .scrap-card .scrap-description{
  margin:0;
  max-width:190px;
  color:var(--card-muted);
  font:400 .73rem/1.45 Inter,sans-serif;
}
#work .scrap-card .scrap-art{
  grid-column:2;
  grid-row:2;
  position:relative;
  z-index:2;
  justify-self:center;
  align-self:center;
  min-width:0;
  right:auto;
  bottom:auto;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:196px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 7px 9px rgba(20,14,35,.09));
}
#work .scrap-card .scrap-open{
  grid-column:1/-1;
  grid-row:3;
  justify-self:start;
  align-self:end;
  position:relative;
  z-index:8;
  left:auto;
  bottom:auto;
  top:auto;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--card-fg);
  text-decoration:none;
  font:500 .67rem "DM Mono",monospace;
  white-space:nowrap;
}
#work .scrap-card .scrap-open span{
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:50%;
  background:#48386f;
  color:#fff;
  font:400 1.25rem Inter,sans-serif;
  transition:transform .2s,background .2s;
}
#work .scrap-card .scrap-open:hover span{transform:translateX(4px);background:#8060ad}

/* Tactile details, kept outside the main content and away from text. */
#work .scrap-tape{
  position:absolute;
  z-index:7;
  top:-13px;
  left:25px;
  width:73px;
  height:23px;
  transform:rotate(-11deg);
  background:repeating-linear-gradient(135deg,#aa91ca 0 6px,#c2b0d7 6px 12px);
  opacity:.88;
  clip-path:polygon(2% 2%,100% 0,98% 100%,0 94%);
}
#work .tape-blue{left:auto;right:40px;background:repeating-linear-gradient(135deg,#9ab3ce 0 6px,#bfd0e3 6px 12px);transform:rotate(9deg)}
#work .tape-sage{left:auto;right:43px;background:repeating-linear-gradient(135deg,#8bada0 0 6px,#c2cfba 6px 12px);transform:rotate(8deg)}
#work .paper-punch{
  position:absolute;
  z-index:6;
  left:-7px;
  top:60px;
  bottom:36px;
  width:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
#work .paper-punch i{width:13px;height:13px;background:#272237;border-radius:50%}
#work .scrap-clip{
  position:absolute;
  z-index:7;
  top:-11px;
  left:44px;
  height:52px;
  width:21px;
  border:3px solid #89818d;
  border-radius:12px;
  transform:rotate(13deg);
  pointer-events:none;
  box-shadow:2px 2px 3px #0002;
}
#work .scrap-doodle{position:absolute;z-index:4;right:25px;top:67px;color:#a98bc9;font-size:1.8rem;pointer-events:none}
#work .scrap-airmail{position:absolute;z-index:4;right:22%;bottom:30px;color:#a48cb7;font-size:1.6rem;pointer-events:none}
#work .scrap-comet-star{position:absolute;z-index:4;right:38px;top:60px;color:#e8c898;font-size:1.8rem;pointer-events:none}

/* Project-by-project treatment, no full-bleed artwork escaping the card. */
#work .scrap-bujhi{background:linear-gradient(133deg,#f8f2e9,#eee6dc)}
#work .scrap-health{background:linear-gradient(135deg,#f8f0e5,#ede7e8)}
#work .scrap-health .scrap-art{max-height:205px}
#work .scrap-comet{
  --card-bg:#1b2038;
  --card-fg:#f8ede7;
  --card-sub:#ceb6ef;
  --card-muted:#c5c2d7;
  background:linear-gradient(130deg,#18203c,#29223e);
  border-color:#544e6a;
}
#work .scrap-comet::before{background-image:radial-gradient(#f4d8b2 .65px,transparent .8px);background-size:17px 16px;opacity:.20}
#work .scrap-comet .scrap-art{max-height:196px}
#work .scrap-comet .scrap-open span{background:#ac8ad0;color:#20172e}
#work .scrap-owl{background:linear-gradient(130deg,#f8f4ea,#ece9e7)}
#work .scrap-owl::before{background-image:linear-gradient(#b4a8c12b 1px,transparent 1px),linear-gradient(90deg,#b4a8c12b 1px,transparent 1px);background-size:18px 18px;opacity:.6}
#work .scrap-owl .scrap-art{max-height:210px}
#work .scrap-lifehistory{
  --card-fg:#f7ebdf;
  --card-sub:#ceb5d9;
  --card-muted:#d0c3d5;
  background:linear-gradient(140deg,#1a2836,#28253a 82%);
  border-color:#62717d;
}
#work .scrap-lifehistory .scrap-art{max-height:205px}
#work .scrap-lifehistory .scrap-open span{background:#916eac}

/* Make the secondary projects a single tidy row. */
#work .work-after{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:15px 24px;
  margin:24px 0 0;
  padding:23px 0 0;
  border-top:1px solid rgba(232,218,248,.22);
}
#work .other-work{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;min-width:0}
#work .other-work-label{
  color:#c2abd9;
  font:500 .67rem "DM Mono",monospace;
  letter-spacing:.13em;
  margin-right:6px;
}
#work .other-work a{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border:1px solid rgba(227,210,247,.30);
  border-radius:999px;
  background:#2d2942;
  color:#faf0ff;
  text-decoration:none;
  font:600 .8rem Inter,sans-serif;
  transition:background .2s;
}
#work .other-work a:hover{background:#413a5c}
#work .other-work a small{display:none}
#work .work-process{
  justify-self:end;
  position:relative;
  font:500 .70rem "DM Mono",monospace;
  color:#d1bde2;
  min-width:0;
}
#work .work-process summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
#work .work-process ol{
  position:absolute;
  z-index:10;
  top:calc(100% + 12px);
  right:0;
  bottom:auto;
  width:min(300px,calc(100vw - 40px));
  margin:0;
  padding:18px 20px 18px 36px;
  border:1px solid #ccb6dd;
  border-radius:10px;
  background:#f1e8e4;
  box-shadow:0 18px 40px #0504167a;
  color:#322940;
  text-align:left;
}
#work .work-process li{margin:0 0 7px;line-height:1.5}

/* Phones and tablets; no overlaps and no horizontal overflow. */
@media(max-width:1120px){
  #work .scrapbook-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  #work .scrap-card,
  #work .scrap-card:nth-child(4),
  #work .scrap-card:nth-child(5){grid-column:auto;height:auto;min-height:338px}
  #work .scrap-card:nth-child(5){grid-column:1/-1;width:calc((100% - 22px)/2);justify-self:center}
  #work .work-after{grid-template-columns:1fr}
  #work .work-process{justify-self:start}
  #work .work-process ol{right:auto;left:0}
}
@media(max-width:700px){
  #work.scrapbook-work{padding-top:65px;padding-bottom:70px}
  #work .section-label{margin-bottom:24px}
  #work .work-heading{align-items:start;flex-direction:column;gap:18px;margin-bottom:26px}
  #work .work-heading h2{font-size:clamp(2.45rem,9vw,3.3rem)}
  #work .work-see-all{font-size:.7rem}
  #work .scrapbook-grid{grid-template-columns:minmax(0,1fr);gap:25px}
  #work .scrap-card,
  #work .scrap-card:nth-child(4),
  #work .scrap-card:nth-child(5){
    grid-column:1;
    width:100%;
    max-width:510px;
    justify-self:center;
    height:auto;
    min-height:330px;
  }
  #work .scrap-card .scrap-copy{padding-top:9px;width:100%}
  #work .scrap-card h3{font-size:clamp(1.5rem,6vw,2rem)}
  #work .scrap-card .scrap-tagline{font-size:.9rem}
  #work .scrap-card .scrap-description{
    font-size:.72rem;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  #work .other-work-label{flex-basis:100%;margin-bottom:1px}
}
@media(max-width:390px){
  #work .scrap-card,
  #work .scrap-card:nth-child(4),
  #work .scrap-card:nth-child(5){height:auto;min-height:312px;padding:18px}
  #work .scrap-card .scrap-copy{width:100%;padding-top:8px}
  #work .scrap-card h3{font-size:1.5rem}
  #work .scrap-card .scrap-tagline{font-size:.84rem}
  #work .scrap-card .scrap-description{-webkit-line-clamp:2;font-size:.68rem}
  #work .scrap-card .scrap-open{left:auto;bottom:auto}
  #work .scrap-card .scrap-art{width:100%;max-width:100%;max-height:155px}
}
@media(prefers-reduced-motion:reduce){
  #work .scrap-card,#work .scrap-open span,#work .other-work a{transition:none!important;animation:none!important}
  #work .scrap-card:hover{translate:0}
}