/* =============================================================================
   Celas Artwall — full surface stylesheet (design-handoff port).

   Rebuilt from design_handoff_celas/src/CelasArtwall.dc.html to match the
   screenshots pixel-for-pixel. A self-contained design system under the `aw-`
   prefix: it deliberately does NOT inherit the marketing site's green accent —
   the Artwall accent is ORANGE (#FB6A34). Tokens live on .awbody below.
   Every class the artwall views render is defined here.
   ========================================================================== */

.awbody {
  --aw-accent:   #00D677;
  --aw-accent-2: #00b866;
  --aw-bg:       #FAFAFB;
  --aw-ink:      #17171B;
  --aw-ink-2:    #3A3A42;
  --aw-muted:    #6E6E78;
  --aw-muted-2:  #9A9AA3;
  --aw-line:     #ECECEF;
  --aw-line-2:   #E7E7EB;
  --aw-surface:  #fff;
  --aw-fill:     #F0F0F3;
  --aw-fill-2:   #F5F5F7;
  --aw-rad:      16px;
  --aw-wrap:     1360px;

  background: var(--aw-bg);
  color: var(--aw-ink);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.awbody ::selection { background: rgba(0,214,119,.22); }
.awbody ::selection { background: color-mix(in srgb, var(--aw-accent) 24%, transparent); }
/* Sticky footer. With little content on a tall screen the footer used to stop
   wherever the flow ended and leave a field of empty page below it — on a phone,
   floating between the last card and the tab bar. The shell is a column that is
   at least a screen tall, main takes the slack, so the footer always lands at the
   bottom: under the content when there is a lot, at the foot of the screen when
   there is not. 100dvh, because 100vh on a phone means "screen minus nothing",
   including the browser chrome that is actually covering it. */
.awbody { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* main takes the slack — which is what lands the footer at the bottom. Doing it
   with `margin-top: auto` on the footer would have been undone by the 48px margin
   the footer already carries further down this file, and would have eaten that
   spacing on long pages anyway. */
.awmain { flex: 1 0 auto; }

.aw-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--aw-muted); font: inherit; font-size: 14px; font-weight: 600;
  padding: 6px 0; margin-bottom: 8px; text-decoration: none;
}
.aw-back:hover { color: var(--aw-ink); }

/* --------------------------------------------------------------- app bar */
.aw-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,250,251,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--aw-line);
}
.aw-head__inner {
  --bar-x: 26px;                       /* the nav strip bleeds to exactly this */
  max-width: var(--aw-wrap); margin: 0 auto; height: 66px; padding: 0 var(--bar-x);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.aw-head__left  { display: flex; align-items: center; gap: 24px; flex: none; }
.aw-brand { display: inline-flex; align-items: center; flex: none; }
.aw-brand img { height: 20px; width: auto; display: block; }
.aw-mainnav { display: flex; align-items: center; gap: 2px; }
.aw-nav {
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--aw-muted);
  padding: 8px 12px; border-radius: 9px;
}
.aw-nav:hover { color: var(--aw-ink); background: var(--aw-fill); }
.aw-nav.is-on { color: var(--aw-ink); background: var(--aw-fill); }

.aw-head__right {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0; justify-content: flex-end;
}
.aw-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--aw-line-2); border-radius: 999px;
  padding: 8px 14px; flex: 0 1 240px; min-width: 150px;   /* never collapse to a circle */
}
.aw-head__left { min-width: 0; }   /* let the left group yield instead of forcing overflow */
.aw-search svg { flex: none; }
.aw-search input {
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--aw-ink); width: 100%; min-width: 0;
}
.aw-upbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--aw-accent); color: #fff; border: none; border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 18px -9px var(--aw-accent);
}
.aw-upbtn:hover { background: var(--aw-accent-2); }

.aw-iconbtn {
  position: relative; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--aw-line-2); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: #54545C; text-decoration: none;
}
.aw-iconbtn:hover { background: var(--aw-fill-2); }
.aw-notifdot {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--aw-accent); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; border: 2px solid var(--aw-bg);
}
.aw-me {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; text-decoration: none; flex: none;
  background-size: cover; background-position: center;
}
.aw-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-signin {
  font-size: 14px; font-weight: 600; color: var(--aw-ink); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--aw-line-2);
}
.aw-signin:hover { background: var(--aw-fill); }

/* notification dropdown */
.aw-notifwrap { position: relative; flex: none; }
.aw-notifpanel {
  position: absolute; top: 48px; right: 0; z-index: 49;
  width: min(360px, 90vw); max-height: 440px; overflow-y: auto; overflow-x: hidden;
  background: #fff; border: 1px solid var(--aw-line); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(20,22,30,.4);
}
.aw-notifpanel[hidden] { display: none; }
.aw-notifpanel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--aw-fill);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.aw-notifpanel__title { font-size: 15px; font-weight: 800; color: var(--aw-ink); }
.aw-markread {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--aw-accent); padding: 0;
}
.aw-notifpanel__body { padding: 5px 7px 8px; }
.aw-notifpanel__empty { padding: 36px 20px; text-align: center; color: var(--aw-muted-2); font-size: 13.5px; }
.aw-notifpanel__foot { padding: 6px 8px 10px; }
.aw-notifpanel__foot a {
  display: block; text-align: center; padding: 9px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--aw-accent); text-decoration: none;
}
.aw-notifpanel__foot a:hover { background: var(--aw-fill-2); }

.aw-notifrow {
  display: flex; align-items: flex-start; gap: 11px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 9px 8px; width: 100%; font: inherit; border-radius: 12px; text-decoration: none; color: inherit;
}
.aw-notifrow:hover { background: var(--aw-fill-2); }
.aw-notifrow__av { position: relative; flex: none; }
.aw-avatar {
  border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; background-size: cover; background-position: center;
  overflow: hidden; flex: none;
}
/* An uploaded picture fills the disc; without one the box keeps its initial. */
.aw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-notifrow__av .aw-avatar { width: 38px; height: 38px; font-size: 14px; }
.aw-notifbadge {
  position: absolute; bottom: -2px; right: -2px; width: 17px; height: 17px;
  border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
}
.aw-notifbadge--like    { background: #FF4D6D; }
.aw-notifbadge--follow  { background: var(--aw-accent); }
.aw-notifbadge--comment { background: #2E7DF6; }
.aw-notifbadge--award   { background: #F59E0B; }
.aw-notifbadge--system  { background: #6b7280; }
.aw-notifrow__text { flex: 1; min-width: 0; }
.aw-notifrow__text b { font-weight: 700; }
.aw-notifrow__msg { font-size: 13px; color: var(--aw-ink); line-height: 1.35; }
.aw-notifrow__when { font-size: 11.5px; color: var(--aw-muted-2); margin-top: 1px; }
.aw-notifrow__thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; overflow: hidden; background: var(--aw-fill); }
.aw-notifrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-notifrow__unread { width: 8px; height: 8px; border-radius: 50%; background: var(--aw-accent); flex: none; margin-top: 14px; }

/* ================================================================ feed */
.aw-page { max-width: var(--aw-wrap); margin: 0 auto; padding: 26px 26px 72px; }
/* Kept for anything that genuinely wants a narrower column. The artwork,
   profile and collections pages do NOT: they sat 200px narrower than the app bar
   directly above them, which reads as the page being misaligned with the site. */
.aw-page--narrow { max-width: 1160px; }

.aw-feedhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.aw-h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--aw-ink); }
.aw-sub { font-size: 13.5px; color: var(--aw-muted); margin-top: 3px; }
.aw-feedhead__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.aw-seg-group {
  display: inline-flex; background: #fff; border: 1px solid var(--aw-line-2);
  border-radius: 999px; padding: 3px;
}
.aw-seg {
  background: none; border: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--aw-muted);
  padding: 6px 13px; border-radius: 999px;
}
.aw-seg:hover { color: var(--aw-ink); }
.aw-seg.is-on { background: var(--aw-accent); color: #fff; }

/* hero — work of the week */
.aw-hero {
  position: relative; display: block; border-radius: calc(var(--aw-rad) + 6px);
  overflow: hidden; margin-bottom: 26px; cursor: pointer; text-decoration: none;
  box-shadow: 0 22px 54px -30px rgba(20,22,30,.45);
}
/* Taller than the 300px band it started as: the right half holds a whole
   artwork now, and 300px made every piece a postage stamp beside a headline. */
.aw-hero__cover { position: relative; width: 100%; height: 380px; background: #1d2230; overflow: hidden; }
/* The band: the same picture, blurred past recognition. Inset negatively and
   scaled so the blur has pixels to bleed from instead of a soft edge. */
.aw-hero__blur {
  position: absolute; inset: -10%; width: 120%; height: 120%;
  object-fit: cover; filter: blur(34px) saturate(1.15); opacity: .9;
}
/* The work fills its half, edge to edge. `contain` was the honest choice while
   the banner was 4.5:1 and cropping meant losing most of a drawing — but it
   ALWAYS leaves a gap on one axis, and a gap here reads as padding nobody
   removed. The panel is now about 1.6:1, close enough to the shape of most
   artwork that covering it costs a trim rather than a slice, and the piece is
   one click away whole. */
.aw-hero__art {
  position: absolute; top: 0; bottom: 0; right: 0; width: 46%; height: 100%;
  object-fit: cover; object-position: center;
}
.aw-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,12,.78), rgba(8,8,12,.44) 38%, rgba(8,8,12,.08) 56%, transparent 68%);
}
.aw-hero__inner {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 40px 44px; max-width: 54%;
}
.aw-hero__badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--aw-accent); color: #fff; border-radius: 999px; padding: 6px 13px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.aw-hero__title { margin: 0; font-size: 40px; line-height: 1.04; font-weight: 800; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.aw-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aw-hero__meta .aw-avatar { width: 30px; height: 30px; font-size: 12px; }
.aw-hero__by { color: #fff; font-size: 14.5px; font-weight: 600; }
.aw-hero__stat { color: rgba(255,255,255,.72); font-size: 13px; }

/* category chips */
.aw-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.aw-chip {
  background: #fff; border: 1px solid var(--aw-line-2); cursor: pointer; text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 600; color: #4A4A52;
  padding: 8px 14px; border-radius: 999px;
}
.aw-chip:hover { border-color: #c9c9d0; }
.aw-chip.is-on { background: var(--aw-ink); color: #fff; border-color: var(--aw-ink); }

/* challenge card */
.aw-challenge {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #17171B, #2A2140);
  border-radius: calc(var(--aw-rad) + 4px); padding: 22px 24px; margin-bottom: 22px;
}
.aw-challenge__main { flex: 1; min-width: 220px; }
.aw-challenge__badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--aw-accent); color: #fff;
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.aw-challenge__theme { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 11px 0 6px; }
.aw-challenge__desc { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.5; max-width: 520px; }
.aw-challenge__meta { margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.aw-challenge__join {
  flex: none; background: #fff; color: var(--aw-ink); border: none; border-radius: 999px;
  padding: 12px 22px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none;
}

/* empty state */
.aw-empty { text-align: center; padding: 72px 20px; color: var(--aw-muted); }
.aw-empty__title { font-size: 17px; font-weight: 700; color: var(--aw-ink); margin-bottom: 6px; }
.aw-empty__text { font-size: 14px; }
.aw-empty__text a { color: var(--aw-accent); font-weight: 700; text-decoration: none; }

/* masonry grid — CSS multi-column */
/* GRID, not column-count. CSS multi-column balances by HEIGHT: with four cards
   of similar height across three columns it decides two columns of two are the
   shortest arrangement and leaves the third EMPTY — which is exactly what the
   feed looked like. A grid fills left to right, so every column is used and a
   card can never land somewhere the eye does not expect. */
.aw-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.aw-grid--editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.aw-grid--tight     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Masonry, switched on by JS.

   The grid above lays cards out in rows, so a short card next to a tall one
   leaves a hole under it: exactly what the feed looked like with four pieces of
   different heights. Real masonry needs each card to span as many rows as its
   own height, and only the browser knows that height, so `is-masonry` is added
   by script and the spans are written per card.

   `row-gap` has to go to zero in this mode. A gap applies between EVERY implicit
   row, so a card spanning 40 rows would collect thirty-nine gaps. The spacing is
   folded into the span instead, which is why the JS adds one gap to the measured
   height before dividing. Without JS the plain grid above still stands. */
.aw-grid.is-masonry { grid-auto-rows: 8px; row-gap: 0; }
.aw-grid.is-masonry > * { grid-row-end: span 40; }
@media (max-width: 1200px) { .aw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  {
  .aw-grid, .aw-grid--editorial, .aw-grid--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px)  {
  .aw-grid, .aw-grid--editorial, .aw-grid--tight { grid-template-columns: minmax(0, 1fr); }
}

.aw-card {
  display: block; width: 100%; position: relative;
  border-radius: var(--aw-rad); background: #fff;
  box-shadow: 0 1px 2px rgba(20,22,30,.05), 0 14px 32px -20px rgba(20,22,30,.28);
  cursor: pointer; overflow: hidden; text-decoration: none;
  margin: 0; transition: transform .18s ease, box-shadow .18s ease;
}
.aw-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(20,22,30,.4); }
.aw-card__media { position: relative; width: 100%; overflow: hidden; background: #2f5064; display: block; }
.aw-card__media img, .aw-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.aw-card__medialink { position: absolute; inset: 0; z-index: 1; display: block; }
.aw-loop, .aw-award { z-index: 3; }
.aw-card__sheen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 24%, rgba(0,0,0,.06)); }
.aw-loop {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10,10,14,.5); color: #fff; border-radius: 999px; padding: 4px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; backdrop-filter: blur(4px);
}
.aw-award {
  position: absolute; top: 10px; right: 10px; background: var(--aw-accent); color: #fff;
  border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 800;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,.5);
}
/* The hover overlay and the Gallery layout that used it are gone. The overlay
   carried a second copy of the title, the artist and the actions, which meant
   the same facts existed twice in the markup and reached a touch screen not at
   all. Editorial is the only layout now, so the card foot is the one place they
   live. `.aw-mini` stays: the hero still uses it. */

/* The hover preview sits exactly where the poster is and fades in over it, so
   the card does not jump when a video appears. It is only ever created on a
   pointer device, so no rule here needs a touch guard. */
.aw-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .18s ease; z-index: 1; pointer-events: none;
}
.aw-card.is-previewing .aw-preview { opacity: 1; }
.aw-mini {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--aw-ink); padding: 0;
}
.aw-mini.is-on { color: var(--aw-accent); }
.aw-mini.is-on svg { fill: var(--aw-accent); stroke: var(--aw-accent); }

/* Two rows, not one. Title and actions used to be siblings in a single flex
   row, so a long title simply ran under the like and save buttons. Now the
   title owns its line and the artist row carries the actions, which means the
   title can wrap without ever colliding with anything. */
.aw-card__foot { padding: 11px 13px 12px; }
.aw-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--aw-ink); text-decoration: none;
}
.aw-card__title:hover { color: var(--aw-accent); }

.aw-card__by { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.aw-card__by .aw-avatar { width: 26px; height: 26px; font-size: 11px; flex: none; text-decoration: none; }
.aw-card__artist {
  min-width: 0; flex: 1; font-size: 12.5px; color: var(--aw-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-card__artist:hover { color: var(--aw-ink); }
.aw-card__meta { display: flex; align-items: center; gap: 10px; flex: none; color: var(--aw-muted); }
.aw-footbtn {
  background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; text-decoration: none;
}
.aw-footbtn.is-on { color: var(--aw-accent); }
.aw-footbtn.is-on svg { fill: var(--aw-accent); stroke: var(--aw-accent); }
.aw-actform { margin: 0; display: inline-flex; }

/* ============================================================ artwork detail */
/* The page ran at 1160px while the app bar above it runs at --aw-wrap (1360),
   so the artwork sat in a narrower column than the site it belongs to. The extra
   width goes to the MEDIA: the info card only holds a title, two buttons and
   three numbers, and stretching that just spreads it thin. */
.aw-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
@media (max-width: 1100px) { .aw-detail { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } }
/* The stage used a hardcoded near-black. A WebP or PNG with transparency then
   showed that black through its own transparent pixels — worst of all in the
   rounded corners, where it read as dirt on the frame. It now sits on the mat,
   which for a transparent work means the page background: the artwork appears to
   float rather than to be pasted on a black card. */
.aw-stage {
  position: relative; width: 100%; border-radius: calc(var(--aw-rad) + 4px); overflow: hidden;
  background: var(--mat, var(--aw-surface)); box-shadow: 0 26px 62px -32px rgba(20,22,30,.55);
  min-height: 280px; display: grid; place-items: center;
}
.aw-stage__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(42px) brightness(.5); transform: scale(1.3); }
/* With a real mat colour the blurred copy is not needed: a flat, slightly
   graded field reads as a mount around the work instead of a smear of itself. */
.aw-stage--mat { background: var(--mat, #1b1e26); }
.aw-stage--mat .aw-stage__bg {
  filter: none; transform: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), transparent 70%), var(--mat, #1b1e26);
}
/* The player sits on the same mat rather than on hard black. */
.aw-stage--mat .vp, .aw-stage--mat .vp__video { background: var(--mat, #1b1e26); }
.aw-stage img { position: relative; width: 100%; height: auto; max-height: 74vh; object-fit: contain; display: block; }
.aw-stage__ph { position: relative; width: 100%; aspect-ratio: 4/3; }
.aw-stage .aw-loop { top: 14px; left: 14px; padding: 5px 11px; font-size: 11px; }

.aw-desc { margin: 26px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--aw-ink-2); text-wrap: pretty; }
.aw-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.aw-tagchip {
  background: var(--aw-fill); border: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #4A4A52; padding: 7px 13px; border-radius: 999px;
}
.aw-tagchip:hover { background: #e6e6ea; }

/* info card */
.aw-side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 16px; }
.aw-infocard {
  background: #fff; border: 1px solid #EFEFF2; border-radius: var(--aw-rad); padding: 22px;
  box-shadow: 0 16px 36px -24px rgba(20,22,30,.3);
}
.aw-infocard__title { margin: 0 0 4px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--aw-ink); text-wrap: balance; }
.aw-infocard__type { font-size: 13px; color: var(--aw-muted); }
.aw-artistrow { display: flex; align-items: center; gap: 11px; margin: 18px 0; text-decoration: none; }
.aw-artistrow .aw-avatar { width: 42px; height: 42px; font-size: 16px; flex: none; }
.aw-artistrow__meta { flex: 1; min-width: 0; }
.aw-artistrow__name { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--aw-ink); }
.aw-verified { display: inline-flex; color: var(--aw-accent); }
.aw-artistrow__handle { font-size: 12.5px; color: var(--aw-muted-2); }

.aw-followbtn {
  background: var(--aw-accent); color: #fff; border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.aw-followbtn.is-following { background: var(--aw-fill); color: var(--aw-ink); }

.aw-bigacts { display: flex; gap: 10px; }
.aw-bigbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--aw-fill-2); border: 1px solid var(--aw-line); border-radius: 12px; padding: 11px;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--aw-ink); cursor: pointer; text-decoration: none;
}
.aw-bigbtn.is-on { color: var(--aw-accent); }
.aw-bigbtn.is-on svg { fill: var(--aw-accent); stroke: var(--aw-accent); }

.aw-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; text-align: center; }
.aw-statgrid__n { font-size: 18px; font-weight: 800; color: var(--aw-ink); }
.aw-statgrid__l { font-size: 11.5px; color: var(--aw-muted-2); }

.aw-sharerow { display: flex; gap: 10px; margin-top: 14px; border-top: 1px solid var(--aw-fill); padding-top: 14px; }
.aw-sharebtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--aw-muted); padding: 6px; text-decoration: none;
}
.aw-sharebtn:hover { color: var(--aw-ink); }

/* comments */
.aw-comments { margin-top: 36px; max-width: 760px; }
.aw-comments__h { margin: 0 0 18px; font-size: 17px; font-weight: 800; color: var(--aw-ink); }
.aw-comments__new { display: flex; gap: 11px; margin-bottom: 24px; }
.aw-comments__new .aw-avatar { width: 36px; height: 36px; font-size: 14px; flex: none; }
.aw-comments__field { flex: 1; display: flex; gap: 8px; }
.aw-input {
  width: 100%; border: 1px solid var(--aw-line-2); border-radius: 12px; padding: 11px 13px;
  font: inherit; font-size: 14px; outline: none; background: #fff; color: var(--aw-ink);
}
.aw-input:focus { border-color: var(--aw-accent); }
.aw-input::placeholder { color: var(--aw-muted-2); }
.aw-post {
  background: var(--aw-accent); color: #fff; border: none; border-radius: 12px; padding: 0 18px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.aw-signin-note { color: var(--aw-muted); font-size: 14px; margin: 0 0 22px; }
.aw-signin-note a { color: var(--aw-accent); font-weight: 700; text-decoration: none; }

.aw-cm { display: flex; gap: 11px; margin-bottom: 18px; }
.aw-cm .aw-avatar { width: 36px; height: 36px; font-size: 14px; flex: none; text-decoration: none; }
.aw-cm__body { min-width: 0; flex: 1; }
.aw-cm__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.aw-cm__name { font-size: 14px; font-weight: 700; color: var(--aw-ink); text-decoration: none; }
.aw-cm__handle { font-size: 12px; color: var(--aw-muted-2); }
.aw-cm__when { font-size: 12px; color: #B4B4BB; }
.aw-cm__text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--aw-ink-2); text-wrap: pretty; }
.aw-cm__actions { display: flex; align-items: center; gap: 16px; margin-top: 7px; }
.aw-cm__like {
  background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--aw-muted-2); padding: 0;
}
.aw-cm__like.is-on { color: var(--aw-accent); }
.aw-cm__like.is-on svg { fill: var(--aw-accent); stroke: var(--aw-accent); }
.aw-cm__replybtn { background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--aw-muted-2); padding: 0; }
.aw-cm__replies { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid var(--aw-fill); padding-left: 14px; }
.aw-cm__reply { display: flex; gap: 9px; }
.aw-cm__reply .aw-avatar { width: 28px; height: 28px; font-size: 12px; }
.aw-cm__replyform { display: flex; gap: 8px; margin: 11px 0 0; }
.aw-cm__replyform .aw-avatar { width: 28px; height: 28px; font-size: 12px; flex: none; }
.aw-cm__replyin { flex: 1; border: 1px solid var(--aw-line-2); border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 13.5px; outline: none; color: var(--aw-ink); min-width: 0; }
.aw-cm__replysend { background: var(--aw-accent); color: #fff; border: none; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

.aw-more { margin-top: 48px; }
.aw-more__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.aw-more__h { margin: 0; font-size: 18px; font-weight: 800; color: var(--aw-ink); }
.aw-more__link { background: none; border: none; cursor: pointer; color: var(--aw-accent); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }

/* ============================================================ artist profile */
.aw-procover { height: 210px; background-size: cover; background-position: center; }
.aw-prohead { display: flex; gap: 20px; align-items: flex-end; margin-top: -40px; flex-wrap: wrap; }
.aw-proavatar {
  width: 104px; height: 104px; border-radius: 28px; background-size: cover; background-position: center;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800;
  border: 4px solid var(--aw-bg); flex: none; box-shadow: 0 14px 32px -16px rgba(0,0,0,.45); overflow: hidden;
}
.aw-proavatar img { width: 100%; height: 100%; object-fit: cover; }
.aw-prohead__meta { flex: 1; min-width: 220px; padding-bottom: 6px; }
.aw-prohead__namerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.aw-prohead__name { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.aw-teamtag { background: #00D677; color: #04140b; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.aw-prohead__handle { font-size: 14px; color: var(--aw-muted); margin-top: 3px; }
.aw-prohead__actions { display: flex; gap: 10px; padding-bottom: 6px; }
.aw-ghost {
  background: #fff; border: 1px solid #E1E1E6; color: var(--aw-ink); border-radius: 999px; padding: 9px 18px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.aw-probio { margin: 20px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--aw-ink-2); max-width: 640px; text-wrap: pretty; }
.aw-prostats { display: flex; gap: 30px; margin-top: 20px; flex-wrap: wrap; }
.aw-prostats__n { font-size: 19px; font-weight: 800; color: var(--aw-ink); }
.aw-prostats__l { font-size: 13.5px; color: var(--aw-muted); }
.aw-probadges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.aw-probadge { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--aw-line-2); color: #4A4A52; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }

.aw-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--aw-line); margin-top: 26px; flex-wrap: wrap; }
.aw-tab {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--aw-muted); padding: 11px 4px; margin-bottom: -1px; text-decoration: none;
}
.aw-tab.is-on { color: var(--aw-ink); font-weight: 700; border-bottom-color: var(--aw-accent); }
.aw-tabpanel { margin-top: 24px; }

.aw-removed-badge { position: absolute; top: 10px; right: 10px; background: rgba(210,40,40,.85); color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; }
.aw-card--removed { opacity: .6; }
/* A draft is not a lesser piece, it is an unfinished decision — so it is marked
   rather than dimmed, and marked in the accent instead of the takedown red. */
.aw-draft-badge {
  position: absolute; top: 10px; right: 10px; background: var(--aw-accent);
  color: #04150c; border-radius: 999px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 800;
}
.aw-card--draft .aw-card__media { outline: 2px dashed color-mix(in srgb, var(--aw-accent) 55%, transparent); outline-offset: -2px; }

/* ============================================================ collections */
.aw-colhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.aw-newboard {
  flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--aw-accent); color: #fff;
  border: none; border-radius: 999px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; box-shadow: 0 8px 18px -9px var(--aw-accent);
}
/* Four across on a full-width page: three left the boards stretched wide and
   short, which is the wrong shape for a mosaic of covers. */
.aw-boards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1200px) { .aw-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .aw-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .aw-boards { grid-template-columns: minmax(0, 1fr); } }
.aw-board { display: block; text-decoration: none; color: inherit; }
.aw-board__mosaic {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px;
  height: 190px; border-radius: var(--aw-rad); overflow: hidden; background: #eceef1;
  transition: transform .18s ease, box-shadow .18s ease;
}
.aw-board:hover .aw-board__mosaic { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(20,22,30,.4); }
.aw-board__cell { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.aw-board__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-board__cell--main { grid-row: 1 / span 2; }
.aw-board__cell--empty { background: repeating-linear-gradient(45deg, #eceef1, #eceef1 8px, #e4e7eb 8px, #e4e7eb 16px); }
/* The rename panel hangs off this box, so it inherits the card's width no matter
   how long the board name is. */
.aw-board__foot { margin-top: 11px; position: relative; }
.aw-board__namerow { display: inline-flex; align-items: center; gap: 6px; }
.aw-board__name { font-size: 16px; font-weight: 700; color: var(--aw-ink); }
.aw-board__pencil { display: inline-flex; background: none; border: none; cursor: pointer; padding: 0; color: #B4B4BB; }
.aw-board__pencil:hover { color: var(--aw-ink); }
.aw-board__lock { display: inline-flex; color: var(--aw-muted-2); }
.aw-board__meta { font-size: 13px; color: var(--aw-muted); margin-top: 2px; }
.aw-board__edit { display: inline-flex; position: static; }
.aw-board__edit > summary { list-style: none; cursor: pointer; display: inline-flex; }
.aw-board__edit > summary::-webkit-details-marker { display: none; }
.aw-board__edit[open] > summary { color: var(--aw-ink); }

/* Anchored to the card, over the piece count — which nobody is reading while
   they rename. The pencil stays uncovered, so it still closes the panel. */
.aw-board__renameform {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% - 2px);
  background: #fff; border: 1px solid var(--aw-line); border-radius: 14px; padding: 12px;
  box-shadow: 0 20px 44px -22px rgba(20,22,30,.42);
}
.aw-board__renamelabel {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--aw-muted-2); margin-bottom: 7px;
}
.aw-board__renamerow { display: flex; gap: 8px; align-items: center; }
.aw-board__renamein {
  flex: 1; min-width: 0; border: 1px solid var(--aw-line-2); border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--aw-ink); outline: none; background: #fff;
}
.aw-board__renamein:focus { border-color: var(--aw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-accent) 18%, transparent); }
.aw-board__renamesave {
  flex: none; background: var(--aw-accent); color: #fff; border: none; border-radius: 10px;
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.aw-board__renamesave:hover { background: var(--aw-accent-2); }
.aw-newboard-wrap { position: relative; }
.aw-newboard-wrap > summary { list-style: none; cursor: pointer; display: inline-flex; }
.aw-newboard-wrap > summary::-webkit-details-marker { display: none; }
.aw-newboard-form {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 280px;
  background: #fff; border: 1px solid var(--aw-line-2); border-radius: 14px; padding: 14px;
  box-shadow: 0 18px 44px rgba(20,22,15,.18); display: flex; flex-direction: column; gap: 10px;
}
.aw-newboard-form .aw-savenew__create { padding: 10px 14px; border-radius: 10px; }
.aw-newboard-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aw-muted); }
.aw-newboard-check input { width: 15px; height: 15px; accent-color: var(--aw-accent); }
.aw-colerror { color: #d94a5a; font-size: 12.5px; font-weight: 600; margin: 6px 0 0; }

/* single collection board */
.aw-colbadge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--aw-fill); color: var(--aw-muted); font-size: 12.5px; font-weight: 700; margin-left: 10px; }

/* ---- board header ------------------------------------------------------- *
   The board's own covers run edge to edge behind a white plate. A board page
   used to open with the same left-aligned h1 as every other list on the site,
   so nothing about it said "this is the shelf you built" — and the plate is
   what makes the name legible over artwork nobody chose for its contrast. */
.aw-boardhead {
  position: relative; border-radius: calc(var(--aw-rad) + 6px); overflow: hidden;
  background: var(--aw-fill); margin: 6px 0 26px; isolation: isolate;
}
.aw-boardhead__strip { position: absolute; inset: 0; display: flex; }
.aw-boardhead__slice { position: relative; flex: 1; min-width: 0; overflow: hidden; background-size: cover; background-position: center; }
.aw-boardhead__slice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-boardhead__slice--empty { background: repeating-linear-gradient(45deg, #eceef1, #eceef1 8px, #e4e7eb 8px, #e4e7eb 16px); }
/* Softened, not decoration: the covers are context, the plate is the content. */
.aw-boardhead__strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.94) 34%, rgba(255,255,255,.62) 62%, rgba(255,255,255,.34)); }
.aw-boardhead__plate { position: relative; padding: 30px 32px 28px; max-width: 640px; }
.aw-boardhead__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.aw-boardhead__name { margin: 0; font-size: 34px; line-height: 1.06; font-weight: 800; letter-spacing: -.022em; color: var(--aw-ink); text-wrap: balance; }
.aw-boardhead__stats { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13.5px; color: var(--aw-muted); }
.aw-boardhead__stats b { color: var(--aw-ink); font-weight: 700; }
.aw-boardhead__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--aw-muted-2); }
.aw-boardhead__acts { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.aw-boardhead__btn {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--aw-ink);
  border: 1px solid var(--aw-line-2); border-radius: 999px; padding: 9px 15px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  list-style: none; white-space: nowrap;
}
.aw-boardhead__btn::-webkit-details-marker { display: none; }
.aw-boardhead__btn:hover { border-color: var(--aw-ink); }
.aw-boardhead__btn--go { background: var(--aw-ink); color: #fff; border-color: var(--aw-ink); }
.aw-boardhead__btn--go:hover { background: #000; }
/* The rename panel is the collections page's, anchored to this button instead. */
.aw-boardhead__rename { position: relative; }
.aw-boardhead__rename .aw-board__renameform { left: 0; right: auto; width: 300px; top: calc(100% + 8px); }

@media (max-width: 620px) {
  .aw-boardhead__plate { padding: 24px 20px 22px; }
  .aw-boardhead__name { font-size: 26px; }
  .aw-boardhead__strip::after { background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96) 45%); }
}

/* ---- board grid --------------------------------------------------------- *
   Even tiles with the caption ON the work, so a board does not read as another
   copy of the feed. The feed keeps each piece's own shape because there the
   shape is part of the pitch; here everything was already chosen. */
.aw-boardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
@media (max-width: 620px) { .aw-boardgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }
.aw-tile {
  position: relative; border-radius: var(--aw-rad); overflow: hidden; background: var(--aw-fill);
  transition: transform .18s ease, box-shadow .18s ease;
}
.aw-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -24px rgba(20,22,30,.45); }
.aw-tile__media { position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
.aw-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* display:block would beat the browser's [hidden] rule, and the frozen-frame
   swap in artwall.js hides the <img> by exactly that attribute. */
.aw-tile__img[hidden] { display: none; }
.aw-tile__hit { position: absolute; inset: 0; z-index: 2; }
.aw-tile__veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10,11,16,.16) 34%, rgba(10,11,16,.82));
}
.aw-tile__loop { z-index: 4; }
.aw-tile__cap { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 4; pointer-events: none; }
.aw-tile__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.aw-tile__artist {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; pointer-events: auto;
  text-decoration: none; max-width: 100%;
}
.aw-tile__av { width: 22px; height: 22px; font-size: 10px; flex: none; }
.aw-tile__artistname {
  min-width: 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.aw-tile__artist:hover .aw-tile__artistname { color: #fff; }
/* Removing is deliberate, so the control waits for the pointer — but it is
   always there for a keyboard, which never hovers anything. */
.aw-tile__remove { position: absolute; top: 9px; right: 9px; z-index: 5; margin: 0; }
.aw-tile__removebtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; border: none; cursor: pointer; color: #fff; background: rgba(16,17,22,.58);
  backdrop-filter: blur(4px); padding: 0; opacity: 0; transition: opacity .16s ease, background .16s ease;
}
.aw-tile:hover .aw-tile__removebtn, .aw-tile__removebtn:focus-visible { opacity: 1; }
.aw-tile__removebtn:hover { background: #E0335A; }
@media (hover: none) { .aw-tile__removebtn { opacity: 1; } }

/* ============================================================ upload */
.aw-uploadgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 820px) { .aw-uploadgrid { grid-template-columns: 1fr; } }
.aw-up__preview { position: relative; border-radius: calc(var(--aw-rad) + 4px); overflow: hidden; box-shadow: 0 22px 52px -30px rgba(20,22,30,.4); }
.aw-up__cover { position: relative; width: 100%; padding-top: 78%; overflow: hidden; background-size: cover; background-position: center; }
.aw-up__cover-sheen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 26%, rgba(0,0,0,.05)); }
.aw-up__drop {
  position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: rgba(255,255,255,.94); border: 2px dashed rgba(255,255,255,.55); border-radius: var(--aw-rad);
  text-align: center; padding: 16px;
}
.aw-up__droplabel { font-size: 13.5px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.18); padding: 8px 16px; border-radius: 999px; }
.aw-up__drophint { font-size: 11.5px; opacity: .85; max-width: 230px; }
.aw-up__file { display: none; }
.aw-up__group { margin-top: 18px; }
.aw-up__grouplabel { font-size: 12px; font-weight: 700; color: var(--aw-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; }
.aw-swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.aw-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #E0E0E6; cursor: pointer; padding: 0; }
.aw-swatch.is-on { box-shadow: 0 0 0 2px var(--aw-accent); }

.aw-up__fields { display: flex; flex-direction: column; gap: 16px; }
.aw-up__field label, .aw-up__field .aw-up__lbl { display: block; font-size: 12px; font-weight: 700; color: var(--aw-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.aw-up__opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--aw-muted-2); font-size: 11.5px; }
.aw-textarea { resize: vertical; line-height: 1.55; min-height: 110px; }
.aw-up__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--aw-muted-2); }
.aw-up__err { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #d94a5a; }
.aw-input--err { border-color: #d94a5a; }

/* type radio segment */
.aw-radioseg { display: inline-flex; background: #fff; border: 1px solid var(--aw-line-2); border-radius: 999px; padding: 3px; }
.aw-radioseg label { position: relative; margin: 0; }
.aw-radioseg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.aw-radioseg span { display: block; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--aw-muted); }
.aw-radioseg input:checked + span { background: var(--aw-accent); color: #fff; }

/* tag chips input */
.aw-tagsbox { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.aw-tagpill { display: inline-flex; align-items: center; gap: 6px; background: var(--aw-fill); color: #4A4A52; font-size: 12.5px; font-weight: 600; padding: 6px 8px 6px 12px; border-radius: 999px; }
.aw-tagpill button { background: none; border: none; cursor: pointer; color: var(--aw-muted-2); font-size: 15px; line-height: 1; padding: 0; }
/* The form footer is a BUTTON PAIR: same height, same radius, same type scale.
   Cancel used to be bare text glued to the primary, which read as a stray word
   rather than the other half of a choice. */
.aw-up__submit {
  background: var(--aw-accent); color: #fff; border: 1px solid transparent; border-radius: 12px;
  padding: 13px 26px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer; box-shadow: 0 12px 26px -14px var(--aw-accent);
}
.aw-up__submit:hover { background: var(--aw-accent-2); }
.aw-up__cancel {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--aw-line-2); border-radius: 12px;
  padding: 13px 22px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--aw-muted); text-decoration: none; cursor: pointer;
}
.aw-up__cancel:hover { border-color: var(--aw-muted-2); color: var(--aw-ink); }

/* upload / edit: the form page shell, the media preview and the read-only kind row */
.aw-page--form { max-width: 1080px; }
.aw-h1--form { margin: 10px 0 22px; }
.aw-up__field--row { flex-direction: row; align-items: stretch; gap: 10px; margin-top: 6px; }
@media (max-width: 520px) {
  /* Thumb-width targets rather than two half-buttons squeezed side by side. */
  .aw-up__field--row { flex-direction: column; align-items: stretch; }
}
/* Fills the cover box: an <img> for a still or animation, a <video> for a video.
   object-fit keeps the aspect ratio inside the fixed-ratio box. */
.aw-up__previewmedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.aw-up__previewmedia[hidden] { display: none; }
.aw-up__kind { font-size: 14px; font-weight: 700; color: var(--aw-ink); }

/* Editing an existing work: the media is the thing being edited, so it must be
   VISIBLE. The picker turns into a scrim at the foot of the frame with one pill
   on it, instead of a dashed box parked over the artwork. */
.aw-up__drop--replace {
  inset: 0; border: 0; gap: 0; justify-content: flex-end; padding: 16px;
  background: linear-gradient(to top, rgba(10,12,18,.66), rgba(10,12,18,0) 46%);
}
.aw-up__drop--replace > svg { display: none; }
.aw-up__drop--replace .aw-up__droplabel { background: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.aw-up__preview:hover .aw-up__drop--replace .aw-up__droplabel { background: rgba(255,255,255,.32); }

/* edit page: delete, kept away from everything else on the page */
.aw-danger { margin-top: 34px; border-top: 1px solid var(--aw-line-2); padding-top: 22px; max-width: 560px; }
.aw-danger__h { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--aw-ink); }
.aw-danger__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--aw-muted); }
.aw-danger__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(192,38,38,.35); color: #c02626;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.aw-danger__btn:hover { background: rgba(192,38,38,.06); }

/* artwork stage: a video fills the same box a still would */
.aw-video { position: relative; width: 100%; max-height: 74vh; display: block; background: #000; object-fit: contain; }

/* ---- grid performance ----------------------------------------------------
   NO content-visibility here, deliberately. The feed is a CSS multi-column
   masonry (column-count on .aw-grid), and containment makes each card an atomic
   box measured by contain-intrinsic-size instead of its real height. The column
   balancer then works from wrong numbers: cards pile into the first columns, the
   last column comes out empty, and the grid spills down the page. The animation
   freeze below is what actually cost the frames — this only cost the layout. */

/* An animated thumbnail is parked as a still frame until the card is hovered —
   see data-freeze in artwall_helpers.php. */
.aw-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.aw-card__frame[hidden] { display: none; }

/* The animation, laid over its own thumbnail. It fades in only once the file has
   actually arrived, so a slow connection shows the still frame rather than a
   flash of nothing. */
.aw-card__anim {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2; opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.aw-card__anim.is-ready { opacity: 1; }
.aw-card__img[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* Never start them at all. */
  .aw-card__img[data-freeze] { display: none !important; }
}

/* ---- share menu ----------------------------------------------------------
   A tile grid, not a list. Seven stacked rows opened UPWARDS and reached past the
   sticky app bar, so the top of the menu slid underneath it. Four tiles across is
   two short rows that open DOWNWARD from the button and stay inside the card. */
.aw-sharewrap { position: relative; flex: 1; display: flex; }
.aw-sharewrap .aw-sharebtn { width: 100%; }
.aw-sharemenu {
  position: absolute; z-index: 45;            /* the app bar is 40 */
  top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 268px; max-width: calc(100vw - 32px); padding: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: #fff; border: 1px solid var(--aw-line); border-radius: 16px;
  box-shadow: 0 24px 56px -24px rgba(20,22,30,.5);
}
.aw-sharemenu[hidden] { display: none; }

.aw-sharetile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 8px; border: 0; border-radius: 11px; background: none;
  font: inherit; font-size: 10.5px; font-weight: 600; color: var(--aw-muted);
  text-decoration: none; cursor: pointer; min-width: 0;
}
.aw-sharetile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-sharetile:hover { background: var(--aw-fill-2); color: var(--aw-ink); }
.aw-sharetile svg { width: 26px; height: 26px; padding: 4px; border-radius: 9px; color: #fff; flex: none; }
.aw-sharetile--whatsapp  svg { background: #25D366; }
.aw-sharetile--x         svg { background: #0f1419; }
.aw-sharetile--facebook  svg { background: #1877F2; }
.aw-sharetile--pinterest svg { background: #E60023; }
.aw-sharetile--telegram  svg { background: #229ED9; }
.aw-sharetile--reddit    svg { background: #FF4500; }
.aw-sharetile--copy      svg { background: var(--aw-fill); color: var(--aw-muted); }

/* ---- active filter --------------------------------------------------------
   Says what the grid is currently narrowed to, and gives it back. A filtered feed
   that looks exactly like an unfiltered one is how people conclude the site is
   empty. */
.aw-filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: -6px 0 16px; }
.aw-filterbar__label { font-size: 13px; color: var(--aw-muted-2); }
.aw-filterpill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 13px;
  border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--aw-ink);
  background: color-mix(in srgb, var(--aw-accent) 13%, transparent);
}
.aw-filterpill__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; text-decoration: none;
  background: rgba(20,22,30,.10); color: var(--aw-muted); font-size: 14px; line-height: 1;
}
.aw-filterpill__x:hover { background: rgba(20,22,30,.18); color: var(--aw-ink); }
.aw-filterbar__clear { font-size: 12.5px; font-weight: 600; color: var(--aw-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================ challenges page */
.aw-chal { margin-bottom: 40px; }
.aw-chal__section { margin: 46px 0 18px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--aw-muted); }
.aw-chal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 16px; flex-wrap: wrap; }
.aw-chal__state {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px;
}
.aw-chal__state--live { background: color-mix(in srgb, var(--aw-accent) 16%, transparent); color: var(--aw-accent-2); }
.aw-chal__state--soon { background: rgba(46,125,246,.14); color: #2E7DF6; }
.aw-chal__state--past { background: var(--aw-fill); color: var(--aw-muted); }
.aw-chal__title { margin: 0 0 6px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--aw-ink); }
.aw-chal__text { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--aw-muted); max-width: 720px; text-wrap: pretty; }
.aw-chal__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--aw-muted-2); }
.aw-chal__join {
  flex: none; background: var(--aw-accent); color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: 0 12px 26px -14px var(--aw-accent);
}
.aw-chal__empty { font-size: 13.5px; color: var(--aw-muted-2); padding: 18px 0; }
.aw-challenge__all { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The video player lives in css/player.css. The home page reel is the same
   component, and could not be while these rules sat inside this file. */


/* ============================================================ notifications page */
.aw-page--notif { max-width: 680px; }
.aw-notiflist { display: flex; flex-direction: column; }
.aw-notiflist .aw-notifrow { border-radius: 12px; padding: 13px 6px; gap: 13px; }
.aw-notiflist .aw-notifrow__av .aw-avatar { width: 42px; height: 42px; font-size: 16px; }
.aw-notiflist .aw-notifbadge { width: 19px; height: 19px; }
.aw-notiflist .aw-notifrow__thumb { width: 42px; height: 42px; border-radius: 10px; }
.aw-notiflist .aw-notifrow__msg { font-size: 14px; line-height: 1.4; }
.aw-notiflist .aw-notifrow__when { font-size: 12px; }
.aw-notifquote { display: block; font-size: 13.5px; color: var(--aw-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

/* ============================================================ modals */
.aw-modal { position: fixed; inset: 0; z-index: 62; background: rgba(15,15,20,.42); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.aw-modal[hidden] { display: none; }
.aw-modal__box { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); max-height: 88vh; overflow-y: auto; overflow-x: hidden; }
.aw-modal__box--wide { max-width: 440px; }
.aw-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.aw-modal__title { margin: 0; font-size: 18px; font-weight: 800; }
.aw-modal__x { background: none; border: none; cursor: pointer; padding: 4px; color: var(--aw-muted); display: inline-flex; }
.aw-modal__desc { margin: 0 0 16px; font-size: 13.5px; color: var(--aw-muted); }

.aw-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.aw-reason {
  display: flex; align-items: center; gap: 11px; background: var(--aw-fill-2); border: 1.5px solid #EEEEF1;
  border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--aw-ink);
}
.aw-reason input { position: absolute; opacity: 0; width: 0; height: 0; }
.aw-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9C9D0; flex: none; position: relative; }
.aw-reason:has(input:checked) { border-color: var(--aw-accent); background: #fff; }
.aw-reason:has(input:checked) .aw-radio { border-color: var(--aw-accent); }
.aw-reason:has(input:checked) .aw-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--aw-accent); }
.aw-modal__actions { display: flex; gap: 10px; }
.aw-modal__cancel { flex: 1; background: var(--aw-fill); border: none; border-radius: 12px; padding: 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--aw-ink); cursor: pointer; }
.aw-modal__submit { flex: 1; border: none; border-radius: 12px; padding: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--aw-accent); color: #fff; }
.aw-modal__submit:disabled { opacity: .5; cursor: not-allowed; }

.aw-savelist { display: flex; flex-direction: column; gap: 8px; max-height: 290px; overflow: auto; }
.aw-saverow { display: flex; align-items: center; gap: 12px; background: var(--aw-fill-2); border: 1px solid #EEEEF1; border-radius: 14px; padding: 10px; cursor: pointer; text-align: left; width: 100%; font: inherit; transition: border-color .14s ease, background .14s ease; }
.aw-saverow:hover { background: var(--aw-fill); }
/* The row a piece is already in reads as chosen at a glance, so the modal is a
   list of states rather than a list of buttons that all look the same. */
.aw-saverow.is-on { border-color: var(--aw-accent); background: color-mix(in srgb, var(--aw-accent) 7%, #fff); }
.aw-saverow__cover { width: 46px; height: 46px; border-radius: 10px; flex: none; background-size: cover; background-position: center; overflow: hidden; }
.aw-saverow__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-saverow__meta { flex: 1; min-width: 0; }
/* Both are <span>s: without this the name and the count share one line. */
.aw-saverow__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--aw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-saverow__count { display: block; font-size: 12.5px; color: var(--aw-muted-2); }
/* display:inline-flex BEATS the browser's `[hidden] { display: none }`, so the
   tick used to show on every board whether the piece was in it or not — the
   modal looked like it had saved everywhere and like clicking changed nothing.
   Same guard .aw-modal[hidden] already carries. */
.aw-saverow__check { color: var(--aw-accent); display: inline-flex; flex: none; }
.aw-saverow__check[hidden] { display: none; }
.aw-savenew { display: flex; gap: 8px; margin-top: 14px; }
.aw-savenew__create { background: var(--aw-ink); color: #fff; border: none; border-radius: 12px; padding: 0 18px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

.aw-editrow { margin-bottom: 16px; }
.aw-editrow label { display: block; font-size: 12px; font-weight: 700; color: var(--aw-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.aw-accents { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.aw-accsw { width: 34px; height: 34px; border-radius: 50%; border: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; padding: 0; transition: transform .12s ease; }
.aw-accsw:hover { transform: scale(1.08); }
.aw-accsw.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14161F; }
.aw-editaccent-hidden { position: absolute; opacity: 0; width: 0; height: 0; }
.aw-modal__done { width: 100%; background: var(--aw-accent); color: #fff; border: none; border-radius: 12px; padding: 13px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px -12px var(--aw-accent); }

/* profile picture pickers — the whole tile is the <label> for a hidden file input.
   The clip lives on each VARIANT, never on .aw-picker itself: the avatar's camera
   badge sits on the rim of the circle, and a clip here would cut it in half. */
.aw-picker { position: relative; display: block; cursor: pointer; background-size: cover; background-position: center; }
.aw-picker__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.aw-picker__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aw-picker__img[hidden] { display: none; }
.aw-picker--cover { height: 96px; border-radius: 12px; overflow: hidden; }
.aw-picker__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; padding: 8px;
  background: rgba(12,14,20,.42); opacity: 0; transition: opacity .15s;
}
.aw-picker--cover:hover .aw-picker__hint, .aw-picker--cover:focus-within .aw-picker__hint { opacity: 1; }
.aw-picker--avatar {
  width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--aw-line-2);
}
/* The picture is rounded on the <img> itself, so the label can stay unclipped. */
.aw-picker--avatar .aw-picker__img { border-radius: 50%; }
.aw-picker__cam {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--aw-accent); color: #fff; box-shadow: 0 0 0 2px #fff;
}

/* toast */
.aw-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 70;
  background: var(--aw-ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 16px 40px -14px rgba(0,0,0,.5);
  animation: aw-toastin .2s ease;
}
@keyframes aw-toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* A confirmation, in the BRAND green — not var(--aw-accent). The accent is the
   user's own colour and a profile page overrides it, which used to leave green
   text on an orange tint. A "done" message reads the same everywhere. */
.aw-flash {
  margin-bottom: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(0,214,119,.13); color: #0a7245; font-weight: 600; font-size: 14px;
}
.aw-flash--pro { margin-top: 20px; }

/* ============================================================ artwall footer */
.aw-foot { border-top: 1px solid var(--aw-line); background: #fff; margin-top: 48px; }
.aw-foot__inner {
  max-width: var(--aw-wrap); margin: 0 auto; padding: 34px 26px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.aw-foot__brand { max-width: 380px; }
.aw-foot__brand img { height: 18px; width: auto; display: block; margin-bottom: 12px; }
.aw-foot__tagline { font-size: 13px; color: var(--aw-muted); line-height: 1.55; }
.aw-foot__socials { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.aw-foot__social {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--aw-muted); background: rgba(0, 0, 0, .05); transition: background .15s, color .15s;
}
.aw-foot__social svg { width: 15px; height: 15px; }
.aw-foot__social:hover { color: var(--aw-accent, #00D677); background: rgba(0, 0, 0, .09); }
.aw-foot__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.aw-foot__coltitle { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--aw-ink); margin-bottom: 12px; }
.aw-foot__links { display: flex; flex-direction: column; gap: 8px; }
.aw-foot__links a { font-size: 13.5px; color: var(--aw-muted); text-decoration: none; }
.aw-foot__links a:hover { color: var(--aw-ink); }
.aw-foot__bottom {
  max-width: var(--aw-wrap); margin: 0 auto; padding: 16px 26px 40px;
  border-top: 1px solid var(--aw-line); display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--aw-muted-2);
}
.aw-foot__bottom a { color: var(--aw-muted); text-decoration: none; }
.aw-foot__bottom a:hover { color: var(--aw-ink); }
.aw-foot__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.aw-langpick { position: relative; }
.aw-langpick__toggle {
  display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--aw-line-2);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--aw-muted); cursor: pointer;
}
.aw-langpick__menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; min-width: 200px; max-height: 50vh; overflow: auto;
  background: #fff; border: 1px solid var(--aw-line-2); border-radius: 12px; box-shadow: 0 18px 44px rgba(20,22,15,.18); padding: 6px;
}
.aw-langpick__menu[hidden] { display: none; }
.aw-langpick__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 8px; font-size: 14px; color: var(--aw-ink); text-decoration: none; }
.aw-langpick__item:hover { background: var(--aw-fill); }
/* The active row follows the visitor's OWN accent. It was hardcoded to the
   default orange, so a green or blue profile got a peach highlight — the one
   colour on the page that belonged to nobody. color-mix keeps the tint at 12%
   of whatever --aw-accent currently is; the plain fill in front of it is what
   a browser without color-mix falls back to. */
.aw-langpick__item.is-on { background: var(--aw-fill); }
.aw-langpick__item.is-on { background: color-mix(in srgb, var(--aw-accent) 12%, transparent); }
.aw-langpick__item.is-on .aw-langpick__short { color: var(--aw-accent); }
.aw-langpick__short { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--aw-muted-2); }

/* ============================================================ legal pages */
.aw-legal { max-width: 760px; margin: 0 auto; padding: 34px 26px 80px; }
.aw-legal__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--aw-accent); margin-bottom: 10px; }
.aw-legal__title { margin: 0 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--aw-ink); }
.aw-legal__updated { font-size: 13px; color: var(--aw-muted-2); margin-bottom: 28px; }
.aw-legal__lede { font-size: 16px; line-height: 1.7; color: var(--aw-ink-2); margin: 0 0 28px; }
.aw-legal h2 { font-size: 19px; font-weight: 800; color: var(--aw-ink); margin: 32px 0 10px; letter-spacing: -.01em; }
.aw-legal p { font-size: 15px; line-height: 1.75; color: var(--aw-ink-2); margin: 0 0 14px; }
.aw-legal ul { margin: 0 0 14px; padding-left: 20px; }
.aw-legal li { font-size: 15px; line-height: 1.7; color: var(--aw-ink-2); margin-bottom: 7px; }
.aw-legal a { color: var(--aw-accent); text-decoration: none; }
.aw-legal a:hover { text-decoration: underline; }

/* responsive */
@media (max-width: 900px) {
  .aw-detail { grid-template-columns: 1fr; }
  .aw-side { position: static; }
}
/* The main nav labels are long (especially in Turkish), so retire them before
   they crowd the search box into a collapsed circle. They remain in the footer. */
/* Narrow: the nav does NOT disappear, it moves under the bar and scrolls.
   Hiding it left Following, Collections and Challenges reachable only from the
   footer — three of the site's five destinations, at the bottom of the page. The
   bottom tab bar cannot hold them either: it is already logo-search-upload-bell-
   profile, and a six-item tab bar is a row of unreadable icons. */
@media (max-width: 940px) {
  /* Two rows: identity + actions, then the nav. The height is no longer fixed —
     a 66px box holding two rows is what clipped the logo against the top edge. */
  .aw-head__inner {
    height: auto; min-height: 0; flex-wrap: wrap; align-items: center;
    padding: 12px var(--bar-x) 0; gap: 12px 14px;
  }
  /* The nav is nested inside .aw-head__left and cannot be re-ordered from there;
     display:contents lifts the brand and the nav into the bar's own flex line,
     which is what lets the nav drop to a second row while the actions stay up. */
  .aw-head__left  { display: contents; }
  .aw-brand       { order: 1; }
  .aw-head__right { order: 2; }
  .aw-brand img   { height: 19px; }

  .aw-mainnav {
    order: 3; width: 100%; gap: 4px;
    /* Bleed to the bar's edges: the strip scrolls edge to edge, but the first and
       last pill still line up with everything else when it is not scrolled. */
    margin: 0 calc(var(--bar-x) * -1); padding: 2px var(--bar-x) 9px;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .aw-mainnav::-webkit-scrollbar { display: none; }
  .aw-nav { flex: none; white-space: nowrap; scroll-snap-align: start; font-size: 14px; padding: 7px 12px; }
}

/* Phones: the logo and the actions get the row to themselves. */
@media (max-width: 640px) {
  .aw-head__inner { --bar-x: 16px; padding-top: 10px; }
  .aw-brand img   { height: 18px; }
}
@media (max-width: 820px) { .aw-search { flex-basis: 200px; } }
@media (max-width: 640px) {
  .aw-page { padding-left: 16px; padding-right: 16px; }
  .aw-upword { display: none; }
  .aw-upbtn { padding: 9px 11px; }
  .aw-hero__cover { height: 220px; }
  .aw-hero__inner { max-width: none; padding: 26px 24px; }
  /* Too narrow for two columns. The blurred band and the title carry it, and
     the piece itself is one tap away — better than showing a crop of it. */
  .aw-hero__art { display: none; }
  .aw-hero__scrim { background: linear-gradient(90deg, rgba(8,8,12,.8), rgba(8,8,12,.55)); }
  .aw-hero__inner { padding: 22px; }
  .aw-hero__title { font-size: 25px; }
  .aw-foot__cols { gap: 44px; }
}
/* Phones: drop the inline search (upload + bell + avatar stay), tighten the bar. */
@media (max-width: 520px) {
  .aw-search { display: none; }
  /* Sides only. `padding: 0 16px` here is what reset the vertical padding the
     wrapped bar depends on, and the logo lost its top few pixels. */
  .aw-head__inner { gap: 10px 10px; --bar-x: 16px; }
}

/* ============================================================================
   Mobile app shell — fixed bottom tab bar + full-screen search screen.
   Artwall is a web-based social app; on phones it should look and feel native.
   All accent colour comes from --aw-accent, so it tracks the user's own accent.
   ========================================================================== */
.aw-tabbar { display: none; }
.aw-searchsheet { display: none; }
.aw-foot__toggle { display: none; }
body.aw-noscroll { overflow: hidden; }

@media (max-width: 760px) {
  /* Reserve space so the fixed tab bar never covers the footer or last content.
     Combined with the column shell above, the footer settles directly ON TOP of
     the tab bar instead of halfway up an empty screen. */
  .awbody { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* App top bar: every top-right action (search, upload, bell, profile) lives in
     the bottom tab bar, so the top row is just the brand — with the section nav
     under it. NOT a fixed height: 56px was sized for one row, and once the nav
     strip joined it the logo was clipped against the top edge. */
  .aw-head__inner { height: auto; justify-content: flex-start; padding-top: 11px; }
  .aw-brand { min-height: 34px; align-items: center; }
  .aw-head__right { display: none; }
  .aw-brand img { height: 19px; }
  .aw-mainnav { padding-bottom: 8px; }

  /* Collapsible footer: hidden by default (app-like), the toggle row opens it. */
  .aw-foot { margin-top: 22px; }
  .aw-foot__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 12px; padding: 15px 18px; background: none; border: 0; cursor: pointer;
    color: var(--aw-ink); font: inherit; -webkit-tap-highlight-color: transparent;
  }
  .aw-foot__toggle img { height: 16px; display: block; }
  .aw-foot__chev { color: var(--aw-muted); flex: none; transition: transform .2s ease; }
  .aw-foot.is-open .aw-foot__chev { transform: rotate(180deg); }
  .aw-foot__inner, .aw-foot__bottom { display: none; }
  .aw-foot.is-open .aw-foot__inner {
    display: flex; flex-direction: column; gap: 22px; padding: 4px 18px 20px;
  }
  .aw-foot.is-open .aw-foot__bottom {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 18px 24px;
  }
  .aw-foot__brand { max-width: none; }
  .aw-foot__brand img { display: none; }   /* the toggle row already shows the logo */

  .aw-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--aw-line);
  }
  .aw-tab {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--aw-muted); text-decoration: none; background: none; border: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, color .1s ease;
  }
  .aw-tab.is-on { color: var(--aw-accent); }
  .aw-tab:active { transform: scale(.9); }
  .aw-tab__ico { position: relative; display: inline-flex; }
  .aw-tab__dot {
    position: absolute; top: -3px; right: -4px; width: 9px; height: 9px;
    background: var(--aw-accent); border: 2px solid #fff; border-radius: 50%;
  }
  .aw-tab--up .aw-tab__plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 34px; border-radius: 12px; background: var(--aw-accent); color: #fff;
    box-shadow: 0 8px 18px -8px var(--aw-accent);
  }
  .aw-tab__av {
    width: 27px; height: 27px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 700;
  }
  .aw-tab__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .aw-tab.is-on .aw-tab__av { box-shadow: 0 0 0 2px var(--aw-accent); }

  /* Full-screen app-style search */
  .aw-searchsheet {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: var(--aw-bg, #fff); animation: aw-sheet-in .18s ease;
  }
  .aw-searchsheet[hidden] { display: none; }
  .aw-searchsheet__bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: #fff; border-bottom: 1px solid var(--aw-line);
  }
  .aw-searchsheet__back, .aw-searchsheet__go {
    flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--aw-ink); cursor: pointer;
  }
  .aw-searchsheet__in {
    flex: 1; min-width: 0; height: 42px; border: 1px solid var(--aw-line-2); border-radius: 999px;
    padding: 0 16px; font: inherit; font-size: 15px; color: var(--aw-ink); background: #fff; outline: none;
  }
  .aw-searchsheet__in:focus { border-color: var(--aw-accent); }
}
@keyframes aw-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }