/* =========================================================================
   SOLAE BENTO — microsoft.com-inspired structure on the Atelier material.
   v4.0.0. Card grids, chevron affordances, quick-links strip and live tiles
   per the Codex sensory system: ivory, oxblood, champagne, hairlines, warm
   shadow — "a private editorial institution, not a decorated technology
   vendor". Additive layer: loads after atelier-images.css.
   ========================================================================= */

body.skin-atelier{
  --bn-radius:8px;
  --bn-shadow:0 1px 2px rgba(23,22,20,.05),0 6px 18px rgba(23,22,20,.07);
  --bn-shadow-h:0 2px 6px rgba(23,22,20,.07),0 18px 34px rgba(23,22,20,.11);
  --bn-gap:clamp(12px,1.4vw,20px);
}

/* ---- quick-links strip (the microsoft.com pattern, atelier voice) ---- */
.bn-quick{border-bottom:1px solid var(--at-hair);background:var(--at-paper)}
.bn-quick-in{max-width:var(--at-max);margin:0 auto;padding:0 var(--at-gut);
  display:flex;justify-content:center;gap:clamp(18px,4vw,56px);flex-wrap:wrap}
.bn-quick a{display:flex;align-items:center;gap:9px;min-height:52px;
  font-family:var(--at-sans);font-size:13.5px;font-weight:600;color:var(--at-ink-soft);
  text-decoration:none;letter-spacing:.01em}
.bn-quick a::after{content:"\203A";color:var(--at-champagne-text);font-weight:700;
  transition:transform .25s ease}
.bn-quick a:hover{color:var(--at-oxblood)}
.bn-quick a:hover::after{transform:translateX(3px)}

/* ---- bento grid + tiles ---- */
.bn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--bn-gap);margin-top:clamp(22px,2.6vw,34px)}
.bn-6{grid-column:span 6}
.bn-4{grid-column:span 4}
.bn-3{grid-column:span 3}
.bn-8{grid-column:span 8}
.bn-12{grid-column:span 12}
.bn-tall{grid-row:span 2}

.bn-tile{position:relative;display:flex;flex-direction:column;min-height:150px;
  background:var(--at-paper);border:1px solid var(--at-hair);border-radius:var(--bn-radius);
  box-shadow:var(--bn-shadow);padding:clamp(18px,2vw,28px);
  transition:transform .25s ease,box-shadow .25s ease;overflow:hidden}
a.bn-tile{text-decoration:none;color:inherit}
a.bn-tile:hover,.bn-tile:has(a:hover){transform:translateY(-3px);box-shadow:var(--bn-shadow-h)}
.bn-k{font-family:var(--at-sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--at-oxblood);margin:0 0 10px}
.bn-tile h3,.bn-tile .bn-h{margin:0 0 8px;font-family:var(--at-sans);font-weight:640;
  font-size:clamp(16px,1.55vw,19px);line-height:1.25;letter-spacing:-.015em;color:var(--at-ink)}
.bn-tile p{margin:0;font-size:13.5px;line-height:1.55;color:var(--at-ink-soft)}
.bn-go{margin-top:auto;padding-top:14px;font-family:var(--at-sans);font-size:13px;
  font-weight:650;color:var(--at-oxblood)}
.bn-go::after{content:"\203A";margin-left:.4em;font-weight:700;display:inline-block;
  transition:transform .25s ease}
a.bn-tile:hover .bn-go::after{transform:translateX(3px)}
.bn-n{font-family:var(--at-sans);font-size:clamp(22px,2.2vw,30px);font-weight:300;
  letter-spacing:.04em;color:var(--at-champagne-text);margin:0 0 8px}

/* photo tile — the image is the subject; label sits on a warm scrim */
.bn-tile.bn-photo{padding:0;min-height:220px;background-size:cover;background-position:center;
  border:1px solid var(--at-hair);justify-content:flex-end}
.bn-photo .bn-cap{margin:0;padding:44px 20px 16px;width:100%;
  background:linear-gradient(transparent,rgba(23,22,20,.55));
  font-family:var(--at-sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--at-ivory)}

/* ink tile — proof and figures on the dark ground */
.bn-tile.bn-ink{background:var(--at-ink);border-color:rgba(199,172,120,.28)}
.bn-ink .bn-k{color:var(--at-champagne)}
.bn-ink .bn-fig{font-family:var(--at-sans);font-weight:300;font-size:clamp(30px,3.2vw,44px);
  letter-spacing:-.01em;color:var(--at-ivory);margin:2px 0 6px;font-variant-numeric:tabular-nums}
.bn-ink p{color:rgba(244,236,221,.78)}

/* ---- live tile (Metro): items cycle with a vertical slide ---- */
.bn-live{position:relative}
.bn-live-track{position:relative;flex:1;min-height:96px}
.bn-live-item{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-start;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.bn-live-item.is-on{opacity:1;transform:none;pointer-events:auto}
.bn-live-item.is-off{opacity:0;transform:translateY(-14px)}
.bn-live-dots{display:flex;gap:6px;margin-top:14px}
.bn-live-dots i{width:5px;height:5px;border-radius:50%;background:var(--at-hair);transition:background .3s}
.bn-live-dots i.is-on{background:var(--at-champagne-text)}
.bn-ink .bn-live-dots i{background:rgba(244,236,221,.25)}
.bn-ink .bn-live-dots i.is-on{background:var(--at-champagne)}
@media (prefers-reduced-motion: reduce){
  .bn-live-item{transition:opacity .3s ease;transform:none}
  .bn-tile{transition:none}
}

/* the belief line inside a live tile reads editorial */
.bn-belief{font-family:var(--at-edit);font-style:italic;font-size:clamp(17px,1.8vw,22px);
  line-height:1.4;color:var(--at-ink);margin:0}
.bn-ink .bn-belief{color:var(--at-ivory)}

/* ---- responsive collapse ---- */
@media (max-width:1000px){
  .bn-6,.bn-8{grid-column:span 12}
  .bn-4{grid-column:span 6}
  .bn-3{grid-column:span 6}
}
@media (max-width:620px){
  .bn-grid{grid-template-columns:1fr;gap:12px}
  .bn-6,.bn-4,.bn-3,.bn-8,.bn-12{grid-column:auto}
  .bn-tall{grid-row:auto}
  .bn-tile.bn-photo{min-height:180px}
}

/* ---- the tile voice applied to existing card components, site-wide ----
   The same radius/shadow/lift so the whole site reads as one bento system. */
body.skin-atelier .at-arch .at-mod,
body.skin-atelier .pc-grid .pc-card,
body.skin-atelier .jr-card,
body.skin-atelier .ev-formats article,
body.skin-atelier .pr-modules .pr-module{
  border-radius:var(--bn-radius);
  transition:transform .25s ease,box-shadow .25s ease}
body.skin-atelier .at-arch a.at-mod:hover,
body.skin-atelier .pc-grid a.pc-card:hover,
body.skin-atelier .jr-card:hover{
  transform:translateY(-3px);box-shadow:var(--bn-shadow-h)}
body.skin-atelier .at-arch .at-mod,
body.skin-atelier .pc-grid .pc-card{
  border:1px solid var(--at-hair);background:var(--at-paper);box-shadow:var(--bn-shadow);
  padding:clamp(18px,2vw,28px)}

/* bento band header row: label left, chevron link right (microsoft.com) */
.bn-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.bn-head .at-link{white-space:nowrap}

/* photo tiles from the v4 library */
.bn-ph-hero{background-image:url(../img/bento/bento_hero.jpg)}
.bn-ph-craft{background-image:url(../img/bento/bento_craft.jpg)}
.bn-ph-material{background-image:url(../img/bento/bento_material.jpg)}
.bn-ph-review{background-image:url(../img/bento/bento_review.jpg)}
.bn-ph-colonnade{background-image:url(../img/bento/bento_colonnade.jpg)}
.bn-ph-desk{background-image:url(../img/bento/bento_desk.jpg)}
.bn-ph-fabric{background-image:url(../img/bento/bento_fabric.jpg)}
.bn-ph-gallery{background-image:url(../img/bento/bento_gallery.jpg)}
.bn-ph-courtyard{background-image:url(../img/bento/bento_courtyard.jpg)}
.bn-ph-archive{background-image:url(../img/bento/bento_archive.jpg)}

/* v4 page heroes from the bento photo library (pages that had none) */
body.skin-atelier.sg-philosophy .page-hero::after{background-image:url(../img/bento/bento_gallery.jpg)}
body.skin-atelier.sg-method .page-hero::after{background-image:url(../img/bento/bento_colonnade.jpg)}
body.skin-atelier.sg-about .page-hero::after{background-image:url(../img/bento/bento_hero.jpg)}
body.skin-atelier.sg-vault .page-hero::after{background-image:url(../img/bento/bento_archive.jpg)}
body.skin-atelier.sg-events .page-hero::after{background-image:url(../img/bento/bento_courtyard.jpg)}
body.skin-atelier.sg-thinking .page-hero::after{background-image:url(../img/bento/bento_desk.jpg)}