/* bentwall.com
   One stylesheet. Dark room, quiet chrome, the pictures do the talking. */

:root {
  --bw-bg:      #0b1517;
  --bw-bg-2:    #0f1c1f;
  --bw-ink:     #e8eeee;
  --bw-soft:    #b8c7c9;
  --bw-muted:   #6f8589;
  --bw-hair:    rgba(232, 238, 238, .10);
  --bw-accent:  #5bbac6;

  /* BentBox brand teal. Used literally for the rule under the wordmark and
     anywhere a solid mark is wanted. Note it measures 4.45:1 on this
     background — fine for a block or a rule, a shade under AA for text, which
     is why --bw-brand-text is a touch lighter for the same hue. */
  --bw-brand:      #228899;
  --bw-brand-text: #2ba6bb;   /* the same hue lifted for text on dark: 6.4:1 */
  --bw-brand-deep: #1a6f7d;   /* BentBox's teal-ink; white on it is 5.8:1 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bw-bg);
  color: var(--bw-ink);
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 4px; }

.bw-skip { position: absolute; left: -9999px; }
.bw-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--bw-ink); color: var(--bw-bg); padding: 10px 16px; border-radius: 999px; font-size: 13px; }

/* Header ------------------------------------------------------------------ */
.bw-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 4vw, 48px);
  padding: 26px clamp(16px, 4vw, 56px) 22px;
  max-width: 1600px; margin: 0 auto;
}
.bw-mark {
  font-size: 15px; font-weight: 500; letter-spacing: .42em;
  text-decoration: none; padding: 0 0 7px .42em; white-space: nowrap;
  border-bottom: 2px solid var(--bw-brand);      /* the BentBox teal, exactly */
}
.bw-mark em { font-style: normal; color: var(--bw-brand-text); }
.bw-mark:hover em { color: var(--bw-accent); }
.bw-filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.bw-f {
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bw-muted); background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 6px 0; cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s;
}
.bw-f:hover { color: var(--bw-ink); }
.bw-f[aria-pressed="true"] { color: var(--bw-ink); border-bottom-color: var(--bw-accent); }
.bw-post {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--bw-hair); border-radius: 999px;
  padding: 9px 16px; white-space: nowrap; transition: border-color .2s;
}
.bw-post:hover { border-color: var(--bw-accent); }

/* The wall ----------------------------------------------------------------
   BASE LAYOUT IS CSS COLUMNS, and that is deliberate. This has to be a real
   wall with JavaScript disabled, blocked, or simply failing to load — without
   it the old flex rule laid every work out in a single row running off the
   right of the page. */
.bw-wall { max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px) 96px; }

.bw-cols {
  display: block;
  columns: 3 300px;                       /* browser drops to 2 then 1 as it narrows */
  column-gap: clamp(20px, 3vw, 48px);
}
.bw-cols > .bw-work { break-inside: avoid; margin: 0 0 56px; }

/* Enhancement: once the script has distributed the works into columns itself,
   each one goes to the shortest column in turn, so reading order still runs
   newest to oldest across the top. CSS columns can't do that — they fill one
   column top to bottom before starting the next. */
.bw-cols.is-js { display: flex; columns: auto; align-items: flex-start; gap: clamp(20px, 3vw, 48px); }
.bw-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 56px; }

.bw-work { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; text-decoration: none; }
a.bw-work { cursor: pointer; }

/* The frame reserves the work's space before its image arrives: index.php
   sets aspect-ratio inline from the stored dimensions, 4 / 5 is only the
   fallback. The image then fills the frame absolutely, so a lazy image
   loading in never moves anything around it. */
.bw-frame { display: block; position: relative; overflow: hidden; background: var(--bw-bg-2); aspect-ratio: 4 / 5; }
.bw-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.94);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s, opacity .6s;
}
.bw-img:not([src]) { visibility: hidden; }     /* deferred: no alt text or broken-image icon */
.bw-img.is-loading { opacity: 0; }             /* fades in once it has arrived */
.bw-img.is-mono { filter: grayscale(1) contrast(1.08) brightness(.94); }
.bw-work:hover .bw-img, .bw-work:focus-visible .bw-img { transform: scale(1.015); filter: brightness(1); }
.bw-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.bw-cap-t { font-size: 14px; font-weight: 500; }
.bw-cap-by { font-size: 12px; letter-spacing: .06em; color: var(--bw-muted); white-space: nowrap; transition: color .2s; }
.bw-work:hover .bw-cap-by { color: var(--bw-accent); }

/* The veil ----------------------------------------------------------------
   Only on works a reviewer marked as containing nudity, and only until the
   visitor says they are 18 or over. Everything else is shown to everyone.

   A covered work has NO image in it: the server leaves the picture out until
   the age cookie is there (bw_render_works() in bw_data.php), so there is
   nothing here to blur. The frame keeps the work's shape and is drawn as a
   quiet panel; when the visitor answers, bw.js swaps in the real work. */
.bw-work.is-veiled .bw-frame {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(91, 186, 198, .07), transparent 60%),
    linear-gradient(160deg, #13262a, var(--bw-bg-2));
  box-shadow: inset 0 0 0 1px var(--bw-hair);
}
.bw-work.is-veiled:hover .bw-frame { box-shadow: inset 0 0 0 1px rgba(232, 238, 238, .22); }
.bw-work.is-revealing .bw-veil { opacity: .45; }       /* asked for; the real work is on its way */
.bw-veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px; pointer-events: none;
}
.bw-veil svg { width: 26px; height: 26px; stroke: var(--bw-soft); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bw-veil b { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.bw-veil span { font-size: 12px; color: var(--bw-soft); letter-spacing: .1em; text-transform: uppercase; }
/* There is no "body.bw-adult-ok hides the veil" rule any more. A work that is
   still covered has no picture behind the veil, so hiding the veil would leave
   an empty panel; it stays until the work itself has been swapped in. */

/* Age question ------------------------------------------------------------ */
.bw-age { border: 1px solid var(--bw-hair); border-radius: 12px; padding: 0; width: min(420px, calc(100vw - 32px)); background: #111e21; color: var(--bw-ink); font-family: inherit; }
.bw-age::backdrop { background: rgba(4, 9, 10, .82); }
.bw-age-in { padding: 26px 24px 22px; display: grid; gap: 14px; }
.bw-age h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.bw-age p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bw-soft); }
.bw-age-act { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.bw-age-act button { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 11px 18px; cursor: pointer; }
.bw-yes { background: var(--bw-ink); color: var(--bw-bg); border: 0; }
.bw-no  { background: none; color: var(--bw-soft); border: 1px solid var(--bw-hair); }

/* Lightbox ---------------------------------------------------------------- */
.bw-lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: #070d0f; color: var(--bw-ink); font-family: inherit; }
.bw-lb::backdrop { background: #070d0f; }
.bw-lb-in { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: calc(16px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) calc(20px + env(safe-area-inset-bottom,0px)); }
.bw-lb-top { display: flex; justify-content: space-between; align-items: center; }
.bw-lb-pos { font-size: 12px; letter-spacing: .2em; color: var(--bw-muted); font-variant-numeric: tabular-nums; }
.bw-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bw-hair); background: none; color: var(--bw-ink); display: grid; place-items: center; cursor: pointer; }
.bw-icon:hover { border-color: var(--bw-soft); }
.bw-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bw-lb-stage { display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; gap: 12px; min-height: 0; padding-block: 16px; }
.bw-lb-frame { display: grid; place-items: center; min-height: 0; height: 100%; }
.bw-lb-frame img { display: block; max-width: 100%; max-height: calc(100vh - 230px); width: auto; height: auto; }
.bw-lb-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 32px; align-items: end; max-width: 1200px; width: 100%; margin: 0 auto; border-top: 1px solid var(--bw-hair); padding-top: 18px; }
.bw-lb-t { margin: 0; font-size: 20px; font-weight: 500; }
.bw-lb-by { margin: 4px 0 0; font-size: 13px; color: var(--bw-soft); }
.bw-lb-by a { border-bottom: 1px solid var(--bw-hair); text-decoration: none; }
.bw-lb-by a:hover { border-bottom-color: var(--bw-accent); }
.bw-lb-meta { margin: 8px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--bw-muted); }
.bw-lb-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--bw-soft); max-width: 60ch; }
.bw-lb-act a { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--bw-accent); padding-bottom: 6px; }

/* Pages ------------------------------------------------------------------- */
.bw-page { max-width: 760px; margin: 0 auto; padding: 40px clamp(16px,4vw,56px) 96px; }
.bw-page h1 { font-size: clamp(30px,4.6vw,46px); font-weight: 300; letter-spacing: -.02em; margin: 0 0 8px; }
.bw-page .bw-lede { font-size: 18px; line-height: 1.6; color: var(--bw-soft); margin: 0 0 36px; }
.bw-page h2 { font-size: 18px; font-weight: 600; margin: 36px 0 10px; }
.bw-page p { font-size: 16px; line-height: 1.7; color: var(--bw-soft); margin: 0 0 14px; }
.bw-page a { color: var(--bw-accent); }
.bw-page ul { margin: 0 0 14px; padding-left: 20px; color: var(--bw-soft); font-size: 16px; line-height: 1.7; }
.bw-page li { margin-bottom: 6px; }

.bw-empty { text-align: center; color: var(--bw-muted); letter-spacing: .08em; padding: 100px 16px; }

/* Older works: a plain link without JS, and the infinite-scroll trigger with
   it. While the next page is being fetched it dims and ignores clicks. */
.bw-more { display: flex; justify-content: center; padding-bottom: 80px; }
.bw-more a { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--bw-soft); text-decoration: none; border-bottom: 1px solid var(--bw-hair); padding: 14px 4px; transition: opacity .2s; }
.bw-more a:hover { color: var(--bw-ink); border-bottom-color: var(--bw-accent); }
.bw-more[aria-busy="true"] a { opacity: .6; pointer-events: none; }

/* Footer ------------------------------------------------------------------ */
.bw-foot { border-top: 1px solid var(--bw-hair); max-width: 1600px; margin: 0 auto; padding: 40px clamp(16px,4vw,56px) 56px; display: grid; gap: 14px; }
.bw-foot-line { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bw-soft); max-width: 68ch; }
.bw-foot-line strong { color: var(--bw-ink); font-weight: 500; letter-spacing: .22em; }
.bw-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bw-foot-nav a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bw-muted); text-decoration: none; }
.bw-foot-nav a:hover { color: var(--bw-ink); }
.bw-foot-small { margin: 0; font-size: 12px; color: var(--bw-muted); }
.bw-foot-small a { color: var(--bw-soft); }

@media (max-width: 900px) {
  .bw-head { padding-block: 20px 16px; }
  .bw-filters { margin-left: 0; width: 100%; order: 3; }
  .bw-post { margin-left: auto; }
  .bw-col { gap: 40px; }
  .bw-cols > .bw-work { margin-bottom: 40px; }
  .bw-lb-stage { grid-template-columns: minmax(0,1fr); }
  .bw-lb-stage .bw-icon { display: none; }
  .bw-lb-bar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bw-img { transition: none; }
  .bw-work:hover .bw-img { transform: none; }
}

/* Header links -------------------------------------------------------------
   About sits beside the button rather than among the filters: it is a place to
   go, not a way to filter the wall, and mixing the two reads as a filter that
   does nothing. */
.bw-links { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.bw-link {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bw-muted); text-decoration: none; transition: color .2s;
}
.bw-link:hover { color: var(--bw-ink); }

/* Show your work ---------------------------------------------------------- */
.bw-page-wide { max-width: 980px; }

.bw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bw-brand-text); margin: 0 0 14px; }
.bw-hero { padding-bottom: 8px; }
.bw-hero h1 { margin-bottom: 14px; }

.bw-strip { margin: 8px 0 48px; }
.bw-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.bw-strip-item { margin: 0; }
.bw-strip-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bw-bg-2); }
.bw-strip-item figcaption { padding-top: 10px; font-size: 13px; color: var(--bw-ink); display: flex; justify-content: space-between; gap: 10px; }
.bw-strip-item figcaption span { color: var(--bw-muted); font-size: 12px; white-space: nowrap; }
.bw-strip-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--bw-muted); }

.bw-sec { padding-block: 8px 44px; border-top: 1px solid var(--bw-hair); margin-top: 44px; }
.bw-sec h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 300; letter-spacing: -.01em; margin: 28px 0 14px; }
.bw-sec h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--bw-ink); }

.bw-steps { list-style: none; counter-reset: bwstep; margin: 28px 0 0; padding: 0; display: grid; gap: 26px; }
.bw-steps li { counter-increment: bwstep; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; }
.bw-steps li::before {
  content: counter(bwstep); grid-row: span 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bw-brand); color: var(--bw-brand-text);
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.bw-steps p { margin: 0; }

.bw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 18px; }
.bw-card { border: 1px solid var(--bw-hair); border-radius: 10px; padding: 20px 22px; }
.bw-card h3 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bw-muted); margin-bottom: 12px; }
.bw-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--bw-soft); }
.bw-card li { padding-left: 18px; position: relative; }
.bw-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bw-brand); }
.bw-card.is-no li::before { background: transparent; border: 1px solid #a2626d; }

.bw-keeps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 24px; font-size: 15px; line-height: 1.6; color: var(--bw-soft); }
.bw-keeps b { color: var(--bw-ink); font-weight: 600; }

.bw-quiet { font-size: 14px; color: var(--bw-muted); }
.bw-quiet a { color: var(--bw-soft); }

.bw-cta { border-top: 1px solid var(--bw-hair); margin-top: 44px; padding-top: 40px; }
.bw-cta-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.bw-btn {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; padding: 14px 24px;
  /* Deep teal, not the brand teal: white on #228899 is 4.16:1, under AA at
     this size. #1a6f7d is BentBox's own teal-ink and gives 5.8:1. The brand
     teal comes back on hover, where a moment of lower contrast is fine. */
  background: var(--bw-brand-deep); color: #fff; border: 1px solid var(--bw-brand-deep);
  transition: background .2s, border-color .2s, color .2s;
}
.bw-btn:hover { background: var(--bw-brand); border-color: var(--bw-brand); }
.bw-btn.is-quiet { background: none; color: var(--bw-soft); border-color: var(--bw-hair); }
.bw-btn.is-quiet:hover { color: var(--bw-ink); border-color: var(--bw-soft); }

@media (max-width: 760px) {
  .bw-strip { grid-template-columns: 1fr 1fr; }
  .bw-strip-item:nth-child(3) { display: none; }
  .bw-two, .bw-keeps { grid-template-columns: 1fr; }
  .bw-links { gap: 14px; }
}

/* One work, its own page ---------------------------------------------------
   /w/{id}-{slug}. This is what a click on the wall actually goes to; the
   lightbox only intercepts it when the script is there to do so. */
.bw-work-page { max-width: 1400px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 56px) 96px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bw-work-stage { margin: 0; position: relative; background: var(--bw-bg-2); }
.bw-work-stage img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
/* Covered: no image (see the veil, above). The frame takes the picture's
   shape from an inline aspect-ratio and the whole of it is the link. */
.bw-work-stage.is-veiled {
  overflow: hidden; width: 100%; max-height: 80vh;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(91, 186, 198, .07), transparent 60%),
    linear-gradient(160deg, #13262a, var(--bw-bg-2));
  box-shadow: inset 0 0 0 1px var(--bw-hair);
}
/* .bw-veil ignores the pointer on the wall, where the tile around it is the
   link. Here the veil IS the link, so it has to take the click. */
.bw-work-stage .bw-veil { pointer-events: auto; color: inherit; text-decoration: none; }
.bw-work-stage .bw-veil:hover span { color: var(--bw-ink); }

.bw-work-meta h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 300; letter-spacing: -.01em; margin: 0 0 6px; }
.bw-work-by { margin: 0 0 18px; font-size: 14px; color: var(--bw-muted); }
.bw-work-by a { color: var(--bw-brand-text); text-decoration: none; border-bottom: 1px solid var(--bw-hair); }
.bw-work-by a:hover { border-bottom-color: var(--bw-brand-text); }
.bw-work-cap { font-size: 16px; line-height: 1.65; color: var(--bw-soft); margin: 0 0 22px; }
.bw-work-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0 0 22px; font-size: 14px; border-top: 1px solid var(--bw-hair); padding-top: 18px; }
.bw-work-facts dt { color: var(--bw-muted); }
.bw-work-facts dd { margin: 0; color: var(--bw-ink); }
.bw-work-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

@media (max-width: 860px) {
  .bw-work-page { grid-template-columns: 1fr; }
  .bw-work-stage img, .bw-work-stage.is-veiled { max-height: 62vh; }
}

/* =========================================================================
   Accounts and hanging work
   Sign in, sign up, choose a name, and /hang. Same room, same quiet chrome:
   forms sit on the dark ground with hairlines, not in white cards.
   ========================================================================= */

.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Auth layout: the why on the left, the form on the right. On a phone the
   copy stays first: on sign-up it is the "this is a BentBox account" notice,
   which should be read before the form, not after it. */
.bw-auth {
  max-width: 1080px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 56px) 96px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 6vw, 96px); align-items: start;
}
.bw-auth-copy { padding-top: 8px; }
.bw-auth-copy h1 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 300; letter-spacing: -.02em; margin: 0 0 12px; }
.bw-auth-copy .bw-lede { font-size: 18px; line-height: 1.6; color: var(--bw-soft); margin: 0 0 32px; max-width: 46ch; }
.bw-auth-copy .bw-quiet { max-width: 52ch; line-height: 1.6; }

/* "One account, two sites." */
.bw-one {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 12px;
  border: 1px solid var(--bw-hair); border-radius: 12px; padding: 20px 22px; margin: 0 0 24px; max-width: 520px;
}
.bw-one-site { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-ink); }
.bw-one-link { height: 1px; background: linear-gradient(90deg, var(--bw-brand), var(--bw-accent)); position: relative; }
.bw-one-link::before, .bw-one-link::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bw-brand); }
.bw-one-link::before { left: 0; }
.bw-one-link::after  { right: 0; background: var(--bw-accent); }
.bw-one p { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.6; color: var(--bw-soft); }
.bw-one strong { color: var(--bw-ink); font-weight: 600; }

/* Forms */
.bw-form { display: grid; gap: 20px; border-top: 2px solid var(--bw-brand); padding-top: 28px; }
.bw-fld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bw-fld > label, .bw-fld > legend {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bw-soft); padding: 0;
}
.bw-fld > legend { margin-bottom: 8px; }
.bw-fld small { font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--bw-muted); font-weight: 500; margin-left: 6px; }
.bw-fld input[type="text"], .bw-fld input[type="email"], .bw-fld input[type="password"], .bw-fld input[type="search"], .bw-fld textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--bw-ink);
  background: var(--bw-bg-2); border: 1px solid rgba(232, 238, 238, .16); border-radius: 8px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.bw-fld textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.bw-fld input::placeholder, .bw-fld textarea::placeholder { color: var(--bw-muted); }
.bw-fld input:focus, .bw-fld textarea:focus { outline: none; border-color: var(--bw-accent); box-shadow: 0 0 0 3px rgba(91, 186, 198, .18); }
.bw-fld input[aria-invalid="true"] { border-color: #d77b8a; }
.bw-fld-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bw-muted); }
.bw-fld-help a, .bw-fld-aside, .bw-form-foot a, .bw-form-legal a, .bw-note a, .bw-form-err a { color: var(--bw-accent); }
.bw-fld-aside { justify-self: end; font-size: 13px; text-decoration: none; }
.bw-fld-aside:hover { text-decoration: underline; }
.bw-fld-state { margin: 0; font-size: 13px; min-height: 1.4em; color: var(--bw-muted); }
.bw-fld-state.is-ok { color: #7fd1a6; }
.bw-fld-state.is-no { color: #e39aa6; }

.bw-pass { position: relative; }
.bw-pass input { padding-right: 68px; }
.bw-pass-t {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bw-soft); background: none; border: 0; padding: 8px 10px; cursor: pointer; border-radius: 6px;
}
.bw-pass-t:hover { color: var(--bw-ink); }

.bw-handle { display: flex; align-items: stretch; }
.bw-handle span {
  display: grid; place-items: center; padding: 0 12px; font-size: 16px; color: var(--bw-muted);
  background: var(--bw-bg-2); border: 1px solid rgba(232, 238, 238, .16); border-right: 0; border-radius: 8px 0 0 8px;
}
.bw-handle input { border-radius: 0 8px 8px 0 !important; }

/* Security code: the image stays white, as generated. */
.bw-code { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; }
.bw-code-img { display: block; border-radius: 6px; background: #fff; width: 80px; height: 40px; }
.bw-code-say { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bw-hair); background: none; color: var(--bw-soft); display: grid; place-items: center; cursor: pointer; }
.bw-code-say:hover { color: var(--bw-ink); border-color: var(--bw-soft); }
.bw-code-say svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bw-code input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.bw-btn { justify-content: center; cursor: pointer; font-family: inherit; }
.bw-btn[disabled] { opacity: .45; cursor: not-allowed; }
.bw-btn[disabled]:hover { background: var(--bw-brand-deep); border-color: var(--bw-brand-deep); }
.bw-btn-wide { width: 100%; }

.bw-form-err { margin: 0; font-size: 14px; line-height: 1.5; color: #f0b4bd; background: rgba(215, 123, 138, .1); border: 1px solid rgba(215, 123, 138, .35); border-radius: 8px; padding: 11px 14px; }
.bw-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bw-soft); border: 1px solid var(--bw-hair); border-radius: 8px; padding: 11px 14px; }
.bw-note.is-ok { color: #bfe8d2; border-color: rgba(127, 209, 166, .35); background: rgba(127, 209, 166, .07); }
.bw-form-foot { margin: 0; font-size: 14px; color: var(--bw-muted); text-align: center; }
.bw-form-legal { margin: 0; font-size: 12px; line-height: 1.6; color: var(--bw-muted); text-align: center; }

/* The credit preview under the username field: a frame and a caption, as on the wall. */
.bw-credit { display: grid; gap: 10px; max-width: 220px; }
.bw-credit-frame { display: block; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #1a3035, #0f1c1f 70%); border: 1px solid var(--bw-hair); }
.bw-credit-cap { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.bw-credit-cap span:last-child { color: var(--bw-accent); font-size: 12px; letter-spacing: .06em; }

@media (max-width: 860px) {
  .bw-auth { grid-template-columns: minmax(0, 1fr); padding-top: 12px; gap: 36px; }
  .bw-auth-copy .bw-lede { margin-bottom: 24px; font-size: 17px; }
  .bw-auth-copy .bw-one { margin-bottom: 16px; }
}

/* Header account link: keeps the About link's look. */
#bw-acct { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
#bw-acct.is-who { color: var(--bw-brand-text); text-transform: none; letter-spacing: .04em; font-size: 13px; }

/* /hang ------------------------------------------------------------------ */
.bw-hang { padding-top: 24px; }
.bw-hang-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 36px; }
.bw-hang-head h1 { margin-bottom: 10px; }
.bw-hang-who { margin: 0 !important; font-size: 14px !important; color: var(--bw-muted) !important; }
.bw-hang-who strong { color: var(--bw-ink); font-weight: 600; }
.bw-hang-who a { margin-left: 8px; font-size: 13px; }
.bw-signout { margin: 0; }
.bw-signout .bw-btn { padding: 10px 18px; font-size: 11px; }

.bw-verify { border: 1px solid var(--bw-hair); border-left: 2px solid var(--bw-brand); border-radius: 10px; padding: 26px 28px 10px; }
.bw-verify h2 { margin-top: 0 !important; font-size: 22px !important; font-weight: 300 !important; }

.bw-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.bw-up-media { position: sticky; top: 24px; display: grid; gap: 12px; }
.bw-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  aspect-ratio: 4 / 5; border: 1px dashed rgba(232, 238, 238, .24); border-radius: 12px; background: var(--bw-bg-2);
  cursor: pointer; padding: 24px; transition: border-color .2s, background .2s;
}
.bw-drop:hover, .bw-drop.is-over, .bw-drop:focus-within { border-color: var(--bw-accent); background: #112226; }
.bw-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bw-drop svg { width: 40px; height: 40px; stroke: var(--bw-soft); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.bw-drop b { font-size: 16px; font-weight: 500; }
.bw-drop span { font-size: 14px; color: var(--bw-soft); }
.bw-drop small { font-size: 12px; color: var(--bw-muted); margin-top: 10px; }
.bw-drop[hidden] { display: none; }
.bw-up-prev { margin: 0; position: relative; background: var(--bw-bg-2); border-radius: 12px; overflow: hidden; }
.bw-up-prev img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.bw-up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .4); }
.bw-up-bar span { display: block; height: 100%; width: 0; background: var(--bw-accent); transition: width .2s; }
.bw-up-replace {
  position: absolute; top: 12px; right: 12px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bw-ink); background: rgba(11, 21, 23, .72); border: 1px solid var(--bw-hair); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  backdrop-filter: blur(6px);
}
.bw-up-status { margin: 0 !important; font-size: 14px !important; min-height: 1.5em; color: var(--bw-soft) !important; }
.bw-up-status.is-ok { color: #7fd1a6 !important; }
.bw-up-status.is-error { color: #f0b4bd !important; }
.bw-up-fields { display: grid; gap: 22px; }
.bw-up-fields .bw-fld-help { font-size: 13px !important; margin: 0 !important; }

.bw-seg, .bw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-seg label, .bw-chips label { position: relative; cursor: pointer; }
.bw-seg input, .bw-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bw-seg span, .bw-chips span {
  display: inline-block; font-size: 14px; color: var(--bw-soft); border: 1px solid rgba(232, 238, 238, .16);
  border-radius: 999px; padding: 9px 16px; transition: border-color .2s, background .2s, color .2s;
}
.bw-seg label:hover span, .bw-chips label:hover span { border-color: var(--bw-soft); color: var(--bw-ink); }
.bw-seg input:checked + span, .bw-chips input:checked + span { background: rgba(91, 186, 198, .14); border-color: var(--bw-accent); color: var(--bw-ink); }
.bw-seg input:focus-visible + span, .bw-chips input:focus-visible + span { outline: 2px solid var(--bw-accent); outline-offset: 3px; }

.bw-cert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--bw-hair); border-radius: 10px; padding: 16px 18px; cursor: pointer; font-size: 14px; line-height: 1.6; color: var(--bw-ink); }
.bw-cert input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--bw-brand); }
.bw-cert:has(input:checked) { border-color: var(--bw-brand); background: rgba(34, 136, 153, .08); }

.bw-up-done { grid-column: 1 / -1; text-align: center; padding: 56px 16px 24px; border: 1px solid var(--bw-hair); border-radius: 12px; }
.bw-up-done svg { width: 48px; height: 48px; stroke: #7fd1a6; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bw-up-done h2 { font-size: 26px !important; font-weight: 300 !important; margin: 14px 0 10px !important; }
.bw-up-done h2:focus { outline: none; }
.bw-up-done p { max-width: 52ch; margin-left: auto !important; margin-right: auto !important; }
.bw-up-done .bw-cta-act { justify-content: center; }

/* Your work */
.bw-mine h2 { margin-bottom: 18px; }
.bw-mine-list { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; }
.bw-mine-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  border: 1px solid var(--bw-hair); border-radius: 10px; padding: 10px 16px 10px 10px; margin: 0 !important;
}
.bw-mine-img { display: block; width: 72px; height: 90px; background: var(--bw-bg-2); border-radius: 6px; overflow: hidden; }
.bw-mine-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bw-mine-body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.bw-mine-t { font-size: 15px; font-weight: 500; color: var(--bw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bw-mine-t a { color: inherit !important; text-decoration: none; border-bottom: 1px solid var(--bw-hair); }
.bw-mine-t a:hover { border-bottom-color: var(--bw-accent); }
.bw-mine-when { font-size: 12px; color: var(--bw-muted); letter-spacing: .04em; }
.bw-mine-why { font-size: 13px; line-height: 1.5; color: var(--bw-soft); max-width: 70ch; }
.bw-mine-x { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-muted); background: none; border: 1px solid var(--bw-hair); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.bw-mine-x:hover { color: #f0b4bd; border-color: rgba(215, 123, 138, .5); }

.bw-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; }
.bw-pill.is-pending  { background: rgba(230, 190, 110, .14); color: #e9c98a; }
.bw-pill.is-approved { background: rgba(127, 209, 166, .14); color: #8fdcb2; }
.bw-pill.is-declined { background: rgba(232, 238, 238, .08); color: var(--bw-soft); }
.bw-pill.is-removed  { background: rgba(215, 123, 138, .14); color: #f0b4bd; }

.bw-confirm .bw-form-err { font-size: 13px; }
.bw-yes.is-danger { background: #c8566a; color: #fff; }
.bw-yes[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 860px) {
  .bw-up { grid-template-columns: minmax(0, 1fr); }
  .bw-up-media { position: static; }
  .bw-drop { aspect-ratio: 4 / 3; }
  .bw-mine-item { grid-template-columns: 56px minmax(0, 1fr); }
  .bw-mine-img { width: 56px; height: 70px; }
  .bw-mine-x { grid-column: 2; justify-self: start; }
}

/* Inside .bw-page, `.bw-page a` and `.bw-page p` out-rank single classes.
   Without these, a link styled as a button turned teal-on-teal (it did on
   /show-your-work too) and the eyebrow lost its colour. */
.bw-page a.bw-btn { color: #fff; }
.bw-page a.bw-btn.is-quiet { color: var(--bw-soft); }
.bw-page a.bw-btn.is-quiet:hover { color: var(--bw-ink); }
.bw-page .bw-eyebrow { color: var(--bw-brand-text); font-size: 11px; line-height: 1.4; margin: 0 0 14px; }

/* A photographer's page ---------------------------------------------------
   /{handle}. A plain header over the same wall: the work is the profile.
   The mark is the handle's first letter, never the BentBox profile photo,
   which nobody reviews for the wall. */
.bw-who {
  max-width: 1600px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 56px) 44px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px clamp(18px, 3vw, 32px); align-items: center;
}
.bw-who-mark {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; font-weight: 300; color: var(--bw-ink);
  border: 1px solid var(--bw-brand); background: radial-gradient(circle at 30% 25%, #17343a, var(--bw-bg-2) 70%);
}
.bw-who-mark.has-photo { overflow: hidden; border-color: var(--bw-hair); background: var(--bw-bg-2); }   /* the approved SFW photo */
.bw-who-mark.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-who-text { min-width: 0; }
.bw-who .bw-eyebrow { margin-bottom: 6px; }
.bw-who h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); font-weight: 300; letter-spacing: -.02em; overflow-wrap: anywhere; }
.bw-who-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; letter-spacing: .04em; color: var(--bw-muted); }
.bw-who-facts span + span::before { content: "·"; margin: 0 10px; color: var(--bw-soft); }
.bw-who-act { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.bw-who-act .bw-btn { padding: 12px 20px; font-size: 11px; }
.bw-who-act [hidden] { display: none; }
.bw-hang-who a + a { margin-left: 12px; }

@media (max-width: 760px) {
  .bw-who { grid-template-columns: auto minmax(0, 1fr); padding-bottom: 32px; }
  .bw-who-mark { width: 56px; height: 56px; font-size: 22px; align-self: start; margin-top: 4px; }
  .bw-who-facts { flex-direction: column; gap: 3px; }
  .bw-who-facts span + span::before { content: none; }
  .bw-who-act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   About
   A full-bleed hero (a real work from the wall, or a drawn stand-in), then
   sections laid out as a label column and a text column.
   ========================================================================= */
.bw-about-hero {
  position: relative; overflow: hidden;
  min-height: clamp(420px, 78vh, 820px);
  display: flex; align-items: flex-end;
  margin: 0 0 clamp(40px, 6vw, 80px);
  background: var(--bw-bg-2);
}
.bw-about-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  filter: brightness(.82);
}
.bw-about-hero-img.is-mono { filter: grayscale(1) contrast(1.06) brightness(.8); }
.bw-about-hero::after {                       /* legibility for the text, darkest at the bottom left */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 21, 23, 0) 30%, rgba(11, 21, 23, .55) 68%, var(--bw-bg) 100%),
    linear-gradient(90deg, rgba(11, 21, 23, .55) 0%, rgba(11, 21, 23, 0) 60%);
}
.bw-about-hero-text {
  position: relative; z-index: 1; width: 100%; max-width: 1600px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px) clamp(36px, 6vw, 72px);
}
.bw-about-hero-text h1 {
  margin: 0 0 18px; max-width: 14ch;
  font-size: clamp(38px, 6.4vw, 84px); font-weight: 300; line-height: 1.02; letter-spacing: -.03em;
}
.bw-about-hero-text p:last-child { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--bw-soft); }
.bw-about-credit {
  position: absolute; z-index: 1; right: clamp(16px, 4vw, 56px); top: 20px;
  font-size: 12px; letter-spacing: .04em; color: var(--bw-ink); text-decoration: none;
  background: rgba(11, 21, 23, .55); backdrop-filter: blur(6px); border: 1px solid var(--bw-hair);
  border-radius: 999px; padding: 8px 14px;
}
.bw-about-credit span { color: var(--bw-muted); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; margin-right: 6px; }
.bw-about-credit:hover { border-color: var(--bw-accent); }

/* Drawn stand-in: three soft frames hung on a dark wall. */
.bw-about-hero.is-drawn { background: radial-gradient(ellipse at 70% 30%, #17343a 0%, var(--bw-bg-2) 55%, var(--bw-bg) 100%); }
.bw-about-hero-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2.4vw, 32px); padding-right: clamp(16px, 7vw, 120px); }
.bw-about-hero-art span { display: block; width: clamp(80px, 13vw, 200px); aspect-ratio: 4 / 5; border: 1px solid rgba(232, 238, 238, .14); background: linear-gradient(160deg, rgba(91, 186, 198, .22), rgba(11, 21, 23, .2)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.bw-about-hero-art span:nth-child(2) { aspect-ratio: 2 / 3; transform: translateY(-6%); background: linear-gradient(200deg, rgba(232, 238, 238, .16), rgba(34, 136, 153, .14)); }
.bw-about-hero-art span:nth-child(3) { aspect-ratio: 1 / 1; background: linear-gradient(120deg, rgba(34, 136, 153, .25), rgba(232, 238, 238, .06)); }

.bw-about { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px) 96px; }

.bw-about-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--bw-hair); border-bottom: 1px solid var(--bw-hair); }
.bw-about-principles > div { padding: 26px 24px 28px 0; }
.bw-about-principles > div + div { padding-left: 24px; border-left: 1px solid var(--bw-hair); }
.bw-about-principles b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.bw-about-principles p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bw-soft); }

.bw-about-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 5vw, 72px); padding: clamp(44px, 6vw, 72px) 0; border-bottom: 1px solid var(--bw-hair); scroll-margin-top: 24px; }
.bw-about-sec-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 300; letter-spacing: -.015em; line-height: 1.15; }
.bw-about-sec-head .bw-eyebrow { margin-bottom: 10px; }
.bw-about-sec-body > p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--bw-soft); max-width: 64ch; }
.bw-about-sec-body strong { color: var(--bw-ink); font-weight: 600; }
.bw-about-sec-body a { color: var(--bw-accent); }
.bw-about-lead { font-size: clamp(18px, 2vw, 21px) !important; line-height: 1.6 !important; color: var(--bw-ink) !important; }

.bw-about-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
.bw-about-lists > div { border: 1px solid var(--bw-hair); border-radius: 10px; padding: 20px 22px; }
.bw-about-lists h3 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bw-muted); }
.bw-about-lists ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--bw-soft); }
.bw-about-lists li { position: relative; padding-left: 18px; }
.bw-about-lists li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bw-brand); }
.bw-about-lists .is-no li::before { background: transparent; border: 1px solid #a2626d; }

.bw-about-note { border-left: 2px solid var(--bw-brand); padding: 4px 0 4px 18px; max-width: 64ch; }
.bw-about-note b { display: block; font-size: 15px; margin-bottom: 6px; }
.bw-about-note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bw-soft); }

.bw-about-who { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bw-about-who > div { background: var(--bw-bg-2); border-radius: 12px; padding: 24px; }
.bw-about-who h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.bw-about-who p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bw-soft); }

.bw-about-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: bwab; }
.bw-about-steps li { counter-increment: bwab; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; font-size: 15px; line-height: 1.65; color: var(--bw-soft); }
.bw-about-steps li::before { content: counter(bwab); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bw-brand); color: var(--bw-brand-text); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.bw-about-steps b { color: var(--bw-ink); font-weight: 600; }

.bw-about-cta { text-align: center; padding: clamp(56px, 8vw, 96px) 0 0; }
.bw-about-cta h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 44px); font-weight: 300; letter-spacing: -.02em; }
.bw-about-cta > p { color: var(--bw-soft); font-size: 16px; margin: 0; }
.bw-about-cta .bw-cta-act { justify-content: center; margin: 26px 0 30px; }
.bw-about-small { font-size: 13px !important; color: var(--bw-muted) !important; }
.bw-about-small a { color: var(--bw-soft); }

@media (max-width: 900px) {
  .bw-about-principles { grid-template-columns: 1fr 1fr; }
  .bw-about-principles > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .bw-about-principles > div:nth-child(n+3) { border-top: 1px solid var(--bw-hair); }
  .bw-about-sec { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bw-about-hero { min-height: 72vh; }
  .bw-about-hero-art { justify-content: center; padding: 0 0 30vh; }
  .bw-about-credit { left: 16px; right: auto; }
  .bw-about-principles { grid-template-columns: 1fr; }
  .bw-about-principles > div, .bw-about-principles > div + div { padding: 20px 0; border-left: 0; }
  .bw-about-principles > div + div { border-top: 1px solid var(--bw-hair); }
  .bw-about-lists, .bw-about-who { grid-template-columns: 1fr; }
}

/* =========================================================================
   Legal pages: /terms and /privacy
   ========================================================================= */
.bw-legal { max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 56px) 96px; }
.bw-legal-head { max-width: 760px; padding-bottom: 36px; border-bottom: 1px solid var(--bw-hair); margin-bottom: 40px; }
.bw-legal-head h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); font-weight: 300; letter-spacing: -.02em; }
.bw-legal-head .bw-lede { font-size: 18px; line-height: 1.6; color: var(--bw-soft); margin: 0 0 16px; }
.bw-legal-date { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-muted); }

.bw-legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.bw-legal-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
.bw-legal-toc summary { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bw-muted); cursor: pointer; list-style: none; padding: 4px 0 12px; }
.bw-legal-toc summary::-webkit-details-marker { display: none; }
.bw-legal-toc ol { list-style: none; margin: 0; padding: 0 0 0 1px; display: grid; gap: 2px; border-left: 1px solid var(--bw-hair); }
.bw-legal-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13px; line-height: 1.4; color: var(--bw-soft); text-decoration: none; }
.bw-legal-toc a:hover { color: var(--bw-ink); border-left-color: var(--bw-accent); }

.bw-legal-body { max-width: 760px; }
.bw-legal-body section { scroll-margin-top: 24px; padding-bottom: 12px; }
.bw-legal-body h2 { margin: 40px 0 14px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.bw-legal-body section:first-child h2 { margin-top: 0; }
.bw-legal-body h3 { margin: 26px 0 8px; font-size: 15px; font-weight: 600; color: var(--bw-ink); }
.bw-legal-body p, .bw-legal-body li, .bw-legal-body dd { font-size: 15.5px; line-height: 1.75; color: var(--bw-soft); }
.bw-legal-body p { margin: 0 0 14px; }
.bw-legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.bw-legal-body li { margin-bottom: 6px; }
.bw-legal-body b, .bw-legal-body strong { color: var(--bw-ink); font-weight: 600; }
.bw-legal-body a { color: var(--bw-accent); }
.bw-legal-body code { font-size: 13px; background: var(--bw-bg-2); border: 1px solid var(--bw-hair); border-radius: 4px; padding: 1px 5px; color: var(--bw-ink); }

.bw-legal-points { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.bw-legal-points li { background: var(--bw-bg-2); border-radius: 10px; padding: 14px 18px; margin: 0; }

.bw-legal-callout { border: 1px solid var(--bw-hair); border-left: 2px solid var(--bw-brand); border-radius: 10px; padding: 18px 22px; margin: 0 0 18px; }
.bw-legal-callout p:last-child { margin-bottom: 0; }
.bw-legal-callout.is-strong { border-left-color: #c8566a; background: rgba(200, 86, 106, .06); margin-bottom: 28px; }
.bw-legal-callout.is-strong h2 { margin-top: 0; font-size: 17px; }

.bw-legal-table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--bw-hair); border-radius: 10px; }
.bw-legal-table:focus-visible { outline: 2px solid var(--bw-accent); }
.bw-legal-table table { width: 100%; border-collapse: collapse; min-width: 520px; }
.bw-legal-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-muted); padding: 12px 16px; border-bottom: 1px solid var(--bw-hair); background: var(--bw-bg-2); }
.bw-legal-table td { padding: 14px 16px; vertical-align: top; font-size: 14.5px; line-height: 1.6; color: var(--bw-soft); border-bottom: 1px solid var(--bw-hair); }
.bw-legal-table tr:last-child td { border-bottom: 0; }
.bw-legal-table td:first-child { color: var(--bw-ink); font-weight: 500; width: 30%; }

.bw-legal-rights, .bw-legal-defs { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); gap: 10px 22px; margin: 0 0 18px; }
.bw-legal-rights dt, .bw-legal-defs dt { font-size: 15px; font-weight: 600; color: var(--bw-ink); line-height: 1.75; }
.bw-legal-rights dt span { font-size: 11px; font-weight: 500; color: var(--bw-muted); margin-left: 6px; letter-spacing: .04em; }
.bw-legal-rights dd, .bw-legal-defs dd { margin: 0; }

.bw-legal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 18px; }
.bw-legal-two > div { border: 1px solid var(--bw-hair); border-radius: 10px; padding: 4px 18px 6px; }
.bw-legal-two h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bw-muted); }

.bw-legal-end { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--bw-hair); font-size: 13px !important; color: var(--bw-muted) !important; }

@media (max-width: 900px) {
  .bw-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .bw-legal-toc { position: static; max-height: none; border: 1px solid var(--bw-hair); border-radius: 10px; padding: 12px 16px; }
  .bw-legal-toc summary { padding-bottom: 0; }
  .bw-legal-toc details[open] summary { padding-bottom: 12px; }
  .bw-legal-toc summary::after { content: " +"; }
  .bw-legal-toc details[open] summary::after { content: " –"; }
  .bw-legal-rights, .bw-legal-defs, .bw-legal-two { grid-template-columns: 1fr; }
  .bw-legal-rights dd, .bw-legal-defs dd { margin-bottom: 8px; }
}

/* Two-step sign-in code */
.bw-code-big { font-size: 26px !important; letter-spacing: .3em; text-align: center; padding: 14px !important; }

/* /hang, signed in but not ID-verified: the form is open to them, so the
   verification note is a side remark about nudity, not a gate. */
aside.bw-verify { margin: 0 0 36px; padding: 16px 22px 2px; }
aside.bw-verify h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px !important; }
aside.bw-verify p { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
aside.bw-verify .bw-cta-act { margin: 4px 0 12px; }
aside.bw-verify .bw-btn { padding: 10px 18px; font-size: 11px; }
#bw-up-needs-id { font-size: 13px; }
.bw-lb-act { display: flex; flex-wrap: wrap; gap: 14px 22px; }

/* =========================================================================
   Connections
   ========================================================================= */
.bw-connect-cta { margin: 18px 0 0; }
.bw-link-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--bw-brand-text); background: none; border: 1px dashed rgba(91, 186, 198, .45);
  border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .2s, color .2s;
}
.bw-link-btn:hover { color: var(--bw-ink); border-color: var(--bw-accent); border-style: solid; }
.bw-link-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* "Connected works" on a work's page */
.bw-connected { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px) 96px; }
.bw-links-head { border-top: 1px solid var(--bw-hair); padding-top: 32px; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.bw-links-head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 300; letter-spacing: -.01em; }
.bw-links-head p { margin: 0; font-size: 13px; color: var(--bw-muted); }
.bw-links-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px clamp(16px, 2.4vw, 32px); align-items: start; }
.bw-links-item { display: block; color: inherit; text-decoration: none; }
.bw-links-rel { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bw-brand-text); margin-bottom: 10px; }
.bw-links-frame { display: block; position: relative; overflow: hidden; background: var(--bw-bg-2); max-height: 380px; }
.bw-links-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); filter: brightness(.94); }
.bw-links-frame img.is-mono { filter: grayscale(1) contrast(1.06) brightness(.94); }
.bw-links-item:hover .bw-links-frame img { transform: scale(1.02); filter: brightness(1); }
.bw-links-item.is-veiled .bw-links-frame { background: linear-gradient(160deg, #13262a, var(--bw-bg-2)); box-shadow: inset 0 0 0 1px var(--bw-hair); }   /* covered: no image */
.bw-links-veil { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; letter-spacing: .08em; color: var(--bw-ink); }
.bw-links-item .bw-cap { padding-top: 10px; }

/* The Connect dialog */
.bw-cn { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.bw-cn .bw-age-in { padding: 30px 32px 26px; }
.bw-cn h2 { font-size: 20px; }
.bw-cn .bw-age-in { gap: 16px; }
.bw-cn-to { margin: -6px 0 0 !important; font-size: 14px !important; }
.bw-cn-to b { color: var(--bw-ink); font-weight: 600; }
.bw-cn .bw-fld > legend { margin-bottom: 10px; }
#bw-cn-body { display: grid; gap: 22px; }
#bw-cn-body[hidden] { display: none; }
.bw-cn-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; align-content: start; min-height: 120px; max-height: min(46vh, 440px); overflow: auto; padding: 2px 4px 2px 2px; overscroll-behavior: contain; }
.bw-cn-works[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.bw-cn-none { grid-column: 1 / -1; padding: 24px 0; text-align: center; }
.bw-cn-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 4px; }
.bw-cn-find[hidden] { display: none; }
.bw-cn-find input[type="search"] { font-size: 15px; padding: 10px 14px; }
.bw-cn-chosen { font-size: 13px; color: var(--bw-accent); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-cn-chosen:empty { display: none; }
.bw-cn-ask { display: grid; gap: 8px; border: 1px solid var(--bw-hair); border-radius: 10px; padding: 14px 16px; transition: border-color .15s, background-color .15s; }
.bw-cn-ask:has(input:checked) { border-color: var(--bw-brand); background: rgba(34, 136, 153, .08); }
.bw-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--bw-ink); }
.bw-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--bw-brand); cursor: pointer; }
.bw-cn-ask .bw-fld-help { padding-left: 30px; }
@media (max-width: 620px) {
  .bw-cn .bw-age-in { padding: 24px 18px 20px; }
  .bw-cn-works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; max-height: 34vh; }
  .bw-cn-find { grid-template-columns: 1fr; gap: 6px; }
  .bw-cn-chosen { max-width: none; }
}
.bw-cn-work { position: relative; display: grid; gap: 6px; cursor: pointer; }
.bw-cn-work input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bw-cn-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; border: 2px solid transparent; background: var(--bw-bg-2); transition: border-color .15s; }
.bw-cn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bw-cn-name { font-size: 12px; line-height: 1.35; color: var(--bw-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bw-cn-work input:checked ~ .bw-cn-thumb { border-color: var(--bw-accent); }
.bw-cn-work input:checked ~ .bw-cn-name { color: var(--bw-ink); }
.bw-cn-work input:focus-visible ~ .bw-cn-thumb { outline: 2px solid var(--bw-accent); outline-offset: 2px; }
.bw-cn-work.is-off { opacity: .45; cursor: not-allowed; }
.bw-cn .bw-seg span { font-size: 13px; padding: 8px 14px; }

/* /hang: the connections inbox */
.bw-cn-h { margin: 22px 0 10px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bw-muted) !important; }
.bw-cn-h span { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: rgba(91, 186, 198, .16); color: var(--bw-accent); letter-spacing: 0; text-align: center; }
.bw-cn-list { list-style: none; margin: 0 0 8px; padding: 0 !important; display: grid; gap: 10px; }
.bw-cn-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  border: 1px solid var(--bw-hair); border-radius: 10px; padding: 10px 16px 10px 10px; margin: 0 !important;
  transition: opacity .25s;
}
.bw-cn-item.is-gone { opacity: 0; }
.bw-cn-item.is-done { border-color: rgba(127, 209, 166, .35); }
.bw-cn-pair { display: flex; align-items: center; gap: 8px; }
.bw-cn-pair img { display: block; width: 56px; height: 70px; object-fit: cover; border-radius: 6px; background: var(--bw-bg-2); }
.bw-cn-arrow { width: 18px; height: 1px; background: var(--bw-brand); position: relative; }
.bw-cn-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--bw-brand); border-right: 1px solid var(--bw-brand); transform: rotate(45deg); }
.bw-cn-text { font-size: 14px; line-height: 1.55; color: var(--bw-soft); }
.bw-cn-text b, .bw-cn-text em { color: var(--bw-ink); font-style: normal; font-weight: 600; }
.bw-cn-text .bw-pill { margin-left: 6px; vertical-align: 1px; }
.bw-cn-by { color: var(--bw-muted); font-size: 12px; }
.bw-cn-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bw-cn-act .bw-btn { padding: 9px 16px; font-size: 11px; }
.bw-cn-err { grid-column: 1 / -1; font-size: 13px; color: #f0b4bd; }

@media (max-width: 760px) {
  .bw-cn-item { grid-template-columns: minmax(0, 1fr); }
  .bw-cn-act { justify-content: flex-start; }
  .bw-links-list { grid-template-columns: 1fr 1fr; }
}


/* =========================================================================
   Connections page (/connections). Shares About's sections; its own hero is
   the map drawn in SVG: frames joined by solid (shown) and dotted (one
   photographer's) lines.
   ========================================================================= */
.bw-cx-hero {
  max-width: 1200px; margin: 0 auto clamp(36px, 5vw, 64px);
  padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 56px) 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center;
}
.bw-cx-hero-text h1 { margin: 0 0 18px; max-width: 15ch; font-size: clamp(36px, 5.4vw, 68px); font-weight: 300; line-height: 1.04; letter-spacing: -.03em; }
.bw-cx-hero-text p:last-child { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--bw-soft); }
.bw-cx-map { margin: 0; }
.bw-cx-map svg { display: block; width: 100%; height: auto; }
.bw-cx-edges line { stroke: var(--bw-brand); stroke-width: 1.5; stroke-linecap: round; }
.bw-cx-edges line.is-noted { stroke: var(--bw-muted); stroke-dasharray: 2 6; }
.bw-cx-nodes rect { fill: var(--bw-bg-2); stroke: rgba(232, 238, 238, .22); stroke-width: 1; }
.bw-cx-nodes rect.is-lit { fill: rgba(34, 136, 153, .22); stroke: var(--bw-accent); }
.bw-cx-map figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 13px; color: var(--bw-muted); }
.bw-cx-map figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.bw-cx-map figcaption i { display: inline-block; width: 26px; border-top: 2px solid var(--bw-brand); }
.bw-cx-map figcaption i.is-noted { border-top: 2px dotted var(--bw-muted); }

.bw-cx-kinds { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bw-cx-kinds > div { border: 1px solid var(--bw-hair); border-radius: 10px; padding: 18px 20px; }
.bw-cx-kinds dt { font-size: 15px; font-weight: 600; color: var(--bw-ink); margin-bottom: 6px; }
.bw-cx-kinds dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--bw-soft); }

.bw-about-who.bw-cx-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.bw-cx-plain li::before { content: ""; width: 9px; height: 9px; margin: 8px 0 0 12px; border: 0; background: var(--bw-brand); }
.bw-cx-rules { margin-top: 0 !important; }

@media (max-width: 900px) {
  .bw-cx-hero { grid-template-columns: 1fr; }
  .bw-cx-map { max-width: 520px; }
  .bw-about-who.bw-cx-three { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bw-cx-kinds { grid-template-columns: 1fr; }
}

/* =========================================================================
   Wall intro: one line and the way in, above the wall on its first page.
   ========================================================================= */
.bw-intro {
  max-width: 1600px; margin: 0 auto; padding: clamp(22px, 3vw, 36px) clamp(16px, 4vw, 56px) clamp(18px, 2.4vw, 28px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
}
.bw-intro p { margin: 0; max-width: 70ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--bw-soft); }
.bw-intro p b { color: var(--bw-ink); font-weight: 500; }
.bw-intro .bw-btn { flex: none; }
/* Heading and sentence set as one paragraph: the <h1> is the first sentence. */
.bw-intro-text { max-width: 70ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--bw-soft); }
.bw-intro-text h1, .bw-intro-text p { display: inline; margin: 0; font: inherit; }
.bw-intro-text h1 { color: var(--bw-ink); font-weight: 500; }

/* Walls to come: two picture tiles between the intro and the wall. */
.bw-walls {
  max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px) clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px);
}
.bw-wallcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 16 / 6; overflow: hidden; padding: clamp(12px, 2vw, 26px);
  background: var(--bw-bg-2); border: 1px solid var(--bw-hair);
  color: var(--bw-ink); text-decoration: none; transition: border-color .2s;
}
a.bw-wallcard:hover { border-color: var(--bw-accent); }
.bw-wallcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Darkens the foot of the picture so the title reads on any image. */
.bw-wallcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 13, 15, .86), rgba(7, 13, 15, 0) 62%); }
.bw-wallcard h2, .bw-wallcard p, .bw-wallcard-soon { position: relative; z-index: 1; }
.bw-wallcard h2 { margin: 0; font-size: clamp(13px, 1.5vw, 21px); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.bw-wallcard p { margin: 6px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--bw-soft); }
.bw-wallcard-soon {
  position: absolute; top: clamp(10px, 1.6vw, 20px); left: clamp(10px, 1.6vw, 20px);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(11, 21, 23, .68); border: 1px solid var(--bw-hair); border-radius: 999px; padding: 6px 12px;
}
@media (max-width: 620px) {
  .bw-wallcard { aspect-ratio: 4 / 3; }
  .bw-wallcard h2 { letter-spacing: .16em; }
  .bw-wallcard p { display: none; }
  .bw-wallcard-soon { font-size: 9px; letter-spacing: .14em; padding: 5px 9px; }
}

.bw-cn-how { margin: -8px 0 0; font-size: 13px; }
.bw-cn-how a { color: var(--bw-accent); }

/* =========================================================================
   Love: the heart on every work. Hidden until bw.js's love part has set
   itself up (body.bw-can-love), so it never sits there doing nothing.
   ========================================================================= */
:root { --bw-love: #e8798a; }
.bw-cap { align-items: center; }
.bw-cap-t { margin-right: auto; }
.bw-love-t {
  display: none; flex: none; width: 30px; height: 30px; margin: -6px -6px -6px -4px; border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer; color: var(--bw-muted);
  transition: color .15s, background-color .15s;
}
.bw-can-love .bw-love-t { display: inline-flex; }
.bw-can-love .bw-work.is-veiled .bw-love-t { display: none; }               /* nothing to love until it's seen */
.bw-love-t svg, .bw-love svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.bw-love-t:hover { color: var(--bw-love); background: rgba(232, 121, 138, .1); }
.bw-love-t.is-loved, .bw-love.is-loved { color: var(--bw-love); }
.bw-love-t.is-loved svg, .bw-love.is-loved svg { fill: currentColor; }

.bw-love {
  display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bw-ink); cursor: pointer;
  background: none; border: 1px solid var(--bw-hair); border-radius: 999px; padding: 9px 16px 9px 13px;
  transition: border-color .15s, color .15s, background-color .15s;
}
.bw-love:hover { border-color: var(--bw-love); }
.bw-love.is-loved { border-color: rgba(232, 121, 138, .5); background: rgba(232, 121, 138, .08); }
.bw-love[hidden] { display: none; }
.bw-love.is-big { font-size: 12px; padding: 11px 20px 11px 16px; }
.bw-love.is-big svg { width: 20px; height: 20px; }
.bw-work-love { margin: 0 0 20px; }
.bw-lb-act { align-items: center; }

.is-burst svg { animation: bw-burst .42s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bw-burst { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .is-burst svg { animation: none; } }

.bw-loved-link { display: inline-flex; align-items: center; gap: 6px; color: var(--bw-love) !important; }
.bw-loved-link[hidden] { display: none; }
.bw-loved-link svg { width: 15px; height: 15px; fill: currentColor; }
.bw-loved-link span { font-size: 12px; letter-spacing: .04em; }

.bw-toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 12px;
  background: #13262a; border: 1px solid var(--bw-hair); color: var(--bw-ink); font-size: 14px; line-height: 1.5;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); transition: opacity .2s, transform .2s;
}
.bw-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bw-toast a { color: var(--bw-accent); }
.bw-who-mark.is-love { color: var(--bw-love); }
.bw-who-mark.is-love svg { width: 44%; height: 44%; fill: currentColor; }
.bw-who-facts a { color: var(--bw-accent); }
.bw-loved-empty { max-width: 560px; margin: 24px auto 80px; text-align: center; color: var(--bw-soft); font-size: 16px; line-height: 1.7; }
.bw-loved-empty .bw-btn { margin-top: 10px; }
.bw-mine-love-sum { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px; font-size: 14px; color: var(--bw-soft); }
.bw-mine-love-sum svg { width: 16px; height: 16px; fill: var(--bw-love); flex: none; }
.bw-mine-love-sum b { color: var(--bw-ink); }
.bw-mine-love { display: block; font-size: 13px; color: var(--bw-love); }
.bw-mine-love a { color: var(--bw-soft); text-decoration: none; }
.bw-mine-love a:hover { color: var(--bw-ink); }

/* Settings -----------------------------------------------------------------
   /settings: the photo, then name and bio. Each block is a panel a shade
   lighter than the room, so the page reads as two clear things to do. */
.bw-gear { display: inline-flex; align-items: center; }
.bw-gear[hidden] { display: none; }
.bw-gear svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.bw-settings .bw-hang-head { margin-bottom: 28px; }
.bw-settings > .bw-note { margin-bottom: 20px; }
.bw-set {
  display: grid; gap: 20px; margin: 0 0 24px;
  background: var(--bw-bg-2); border: 1px solid var(--bw-hair); border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}
.bw-set-intro h2 { margin: 0 0 6px !important; font-size: 22px !important; font-weight: 300 !important; letter-spacing: -.01em; color: var(--bw-ink); }
.bw-set-intro p { margin: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--bw-muted) !important; }
.bw-set .bw-fld input[type="text"], .bw-set .bw-fld textarea, .bw-set .bw-handle span { background: var(--bw-bg); }
.bw-set .bw-fld-help strong { color: var(--bw-soft); font-weight: 600; }

.bw-set-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.bw-set-pics { display: flex; gap: 18px; flex: none; }
.bw-set-pics figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.bw-set-pics figure[hidden] { display: none; }
.bw-set-pics figcaption { display: none; font-size: 11px; letter-spacing: .08em; color: var(--bw-muted); }
.bw-set-pics.has-pending figcaption { display: block; }
.bw-set-av {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--bw-hair); background: var(--bw-bg);
}
.bw-set-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-set-av img[hidden], .bw-set-av span[hidden] { display: none; }
.bw-set-av.is-empty { border-color: var(--bw-brand); background: radial-gradient(circle at 30% 25%, #17343a, var(--bw-bg) 70%); font-size: 36px; font-weight: 300; color: var(--bw-ink); }
.bw-set-av.is-pending { outline: 2px dashed var(--bw-accent); outline-offset: 3px; opacity: .9; }
.bw-set-photo-main { flex: 1; min-width: 240px; display: grid; gap: 14px; }
.bw-set-status { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--bw-soft) !important; }
.bw-set-status.is-no { color: #e39aa6 !important; }
.bw-set-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bw-set-actions .bw-btn { padding: 12px 22px; font-size: 11px; }
.bw-set-actions [hidden] { display: none; }

.bw-set-count { margin: -2px 0 0; font-size: 12px; color: var(--bw-muted); text-align: right; font-variant-numeric: tabular-nums; }
.bw-set-count.is-near { color: #e3c08a; }
.bw-set-save { display: flex; justify-content: flex-end; }

/* The crop dialog */
.bw-crop {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  background: var(--bw-bg-2); color: var(--bw-ink); border: 1px solid var(--bw-hair); border-radius: 14px;
}
.bw-crop::backdrop { background: rgba(5, 10, 11, .78); }
.bw-crop-in { padding: 24px; display: grid; gap: 14px; }
.bw-crop-in h2 { margin: 0; font-size: 20px; font-weight: 300; }
.bw-crop-stage { background: var(--bw-bg); border-radius: 8px; overflow: hidden; height: min(380px, 55vh); }
.bw-crop-stage img { display: block; max-width: 100%; }
.bw-crop-act { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .bw-set-actions .bw-btn, .bw-set-save .bw-btn, .bw-crop-act .bw-btn { flex: 1 1 auto; }
}

/* On a photographer's page: their own words, under the facts. */
.bw-who-bio { margin: 14px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--bw-soft); overflow-wrap: anywhere; }

/* .bw-page sets every <p> to 16px with a bottom margin; inside a settings
   panel the help, state and count lines keep their own small size, and an
   empty state line takes no room. */
.bw-set .bw-fld-help { margin: 0; font-size: 13px; line-height: 1.55; color: var(--bw-muted); }
.bw-set .bw-fld-state, .bw-set .bw-set-count { margin: 0; font-size: 13px; line-height: 1.4; }
.bw-set .bw-fld-state:empty { min-height: 0; }
.bw-set .bw-fld { gap: 8px; }
.bw-set .bw-form-err, .bw-set .bw-note { margin: 0; }
.bw-crop .bw-fld-help, .bw-crop .bw-fld-state { margin: 0; }