/* ------------------------------------------------------------------
   aart100 — Category Lists
   Faithful rebuild of sqa100.com/aart-list, made responsive.
   Source measurements in ../aart-list_extract/components.md
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Fascinate";
  src:url("../fonts/Fascinate-Regular.ttf") format("truetype");
  font-display:block;
}

:root{
  --band:#f2f2f2;        /* header band                     */
  --ground:#525252;      /* grey page ground (Section 5)    */
  --panel:#666666;       /* lighter panel behind the grid   */
  --footer:#cccccc;      /* footer (Section 6)              */
  --bar:#050505;         /* copyright bar                   */
  --mark-grey:#999999;   /* wordmark                        */
  --mark-red:#e42020;
  --ink:#000000;
  --ink-2:#333333;
  --sans:Arial, Helvetica, sans-serif;
  --serif:"Neuton", Georgia, "Times New Roman", serif;
  --page:1024px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:15px/1.45 var(--sans);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:var(--page);margin:0 auto;padding:0 16px}

/* ---------- OBI texture strips ---------- */
.strip{
  background:url("../img/obi.jpg") center/cover no-repeat;
}
.strip--top{height:107px}
.strip--mid{height:47px}
.strip--low{height:81px}

/* ---------- header band ---------- */
.band{
  background:var(--band);
  text-align:center;
  padding:38px 16px 26px;
}

.wordmark{
  font-family:"Fascinate", Impact, var(--sans);
  line-height:1.2;
  letter-spacing:0;
  text-shadow:1px 1px 0 #000;
  white-space:nowrap;
  margin:0;
}
.wordmark .g{font-size:72px;color:var(--mark-grey)}
.wordmark .red{font-size:72px;color:var(--mark-red)}
.wordmark .t{font-size:60px;color:var(--mark-grey)}
.wordmark .num{font-family:var(--sans);font-size:48px;color:var(--ink)}

.tagline{margin:2px 0 0;font-size:14px;color:var(--ink)}

/* search pill — on the source page this is a link to the e-commerce login */
.search{
  display:flex;align-items:center;gap:10px;
  width:465px;max-width:100%;height:49px;
  margin:22px auto 0;padding:0 22px;
  background:#fff;border:1.5px solid #3a3a3a;border-radius:999px;
  color:#999;font-size:15px;text-decoration:none;
}
.search span{flex:1;text-align:left}
.search svg{flex:none;color:#555}
.search:hover{border-color:#000}

/* nav — the source page renders these as plain labels with no link
   targets; the ones with a destination are anchors, the rest are not. */
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 26px;margin:26px 0 0;padding:0;list-style:none;
  font-size:15px;
}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav [aria-current="page"]{font-weight:bold}
.nav .todo{color:var(--ink);cursor:default}

/* ---------- grey ground ---------- */
.ground{background:var(--ground);padding:46px 0 64px}
.page-title{
  margin:0 0 34px;text-align:center;
  font-size:30px;font-weight:normal;color:#fff;
}

.panel{
  background:var(--panel);
  padding:38px 28px 44px;
}
.group + .group{margin-top:52px}
.group h2{
  margin:0 0 26px;text-align:center;
  font-size:24px;font-weight:normal;color:#fff;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 14px;
  margin:0;padding:0;list-style:none;
}
/* the source JPGs are not all the same shape (0.966-0.983), which left the
   caption bands a few px out of line across a row — every tile is pinned to
   one ratio and the image fills it (at most 1.7% of stretch, not visible). */
.tiles > li{aspect-ratio:231 / 236}
.tiles a{
  display:block;height:100%;text-decoration:none;
  outline-offset:3px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tiles img{width:100%;height:100%;object-fit:fill}
.tiles a:hover,.tiles a:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}

/* ---------- footer ---------- */
.site-footer{background:var(--footer);padding:34px 0 46px}
.foot-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:30px;
  align-items:start;
}
.foot-brand img{width:221px}
.foot-brand p{
  margin:6px 0 0;font-family:var(--serif);font-size:15px;color:#000;
}
.foot-col{margin:0;padding:0;list-style:none;font-size:16px;color:var(--ink-2)}
.foot-col li{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.foot-col li::before{content:"■";color:#fff;font-size:13px;line-height:1}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline}

.copyright{
  background:var(--bar);color:#e8e8e8;
  text-align:center;font-size:14px;padding:16px;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .strip--top{height:64px}.strip--mid{height:28px}.strip--low{height:48px}
  .band{padding:26px 16px 20px}
  .wordmark .g,.wordmark .red{font-size:52px}
  .wordmark .t{font-size:43px}
  .wordmark .num{font-size:35px}
  .nav{gap:6px 16px;font-size:14px}
  .ground{padding:32px 0 44px}
  .page-title{font-size:24px;margin-bottom:24px}
  .panel{padding:26px 14px 30px}
  .group h2{font-size:20px;margin-bottom:18px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .foot-grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   Category sub-menus — the panel opens inside the tile, over the image
   ------------------------------------------------------------------ */
.tile.has-sub{position:relative}
.tile.has-sub .tile-link{display:block}

.submenu{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;
  padding:12px 14px 14px;
  background:rgba(12,12,12,.80);
  box-shadow:inset 0 0 40px rgba(0,0,0,.75);
  overflow:auto;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, visibility .15s;
}
.tile.has-sub.is-open .submenu{opacity:1;visibility:visible}

.submenu-title{
  flex:none;margin:0 0 8px;padding:0 0 7px;
  font-size:13px;font-weight:bold;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.submenu ul{margin:0;padding:0;list-style:none}
.submenu li{margin:0}
.submenu a{
  display:block;padding:4px 2px;
  font-size:13px;line-height:1.25;color:#eaeaea;text-decoration:none;
}
.submenu a:hover,.submenu a:focus-visible{color:#fff;text-decoration:underline}
.submenu a:focus-visible{outline:1px solid var(--mark-red);outline-offset:0}

/* lift the whole tile (image + overlay together), never the image alone */
.tile.has-sub .tile-link:hover,
.tile.has-sub .tile-link:focus-visible{transform:none;box-shadow:none}
.tile.has-sub{transition:transform .12s ease, box-shadow .12s ease}
.tile.has-sub:hover,
.tile.has-sub.is-open{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}

/* long lists (Craft Arts, Sculpture) tighten up rather than overflow */
.submenu:has(li:nth-child(7)) a{font-size:12px;padding:3px 2px}
.submenu:has(li:nth-child(9)) a{font-size:11.5px;padding:2px 2px;line-height:1.2}

@media (max-width:640px){
  /* tiles are short on a phone: let a long list grow past the box
     instead of hiding items behind a scrollbar */
  .submenu{
    bottom:auto;min-height:100%;overflow:visible;
    box-shadow:inset 0 0 40px rgba(0,0,0,.75), 0 10px 22px rgba(0,0,0,.45);
    padding:10px 11px 11px;
  }
  .submenu-title{font-size:12px;margin-bottom:6px;padding-bottom:5px}
  .submenu a{font-size:11.5px;padding:3px 2px}
  .submenu:has(li:nth-child(7)) a,
  .submenu:has(li:nth-child(9)) a{font-size:11px;padding:2px}
}