/* =========================================================
   PhotoSlot — production-grade "image to come" treatment.
   Goes in production untouched until real photography is
   sourced. Three variants, all rooted in the v3 vocabulary
   (paper, ink, hairline, kanji, mono eyebrow). Reads as
   INTENTIONAL editorial, not as a missing image.

   Markup pattern (editorial, default):
     <div class="tb-ps tb-ps--editorial" data-kanji="渓谷">
       <span class="tb-ps__pill">Image to follow</span>
       <div class="tb-ps__bottom">
         <div class="tb-ps__eyebrow">
           <span>Photo · awaiting commission</span>
           <span class="tb-ps__rule"></span>
           <span class="tb-ps__dims">2400 × 1350</span>
         </div>
         <div class="tb-ps__caption">Shin-Yamabiko Bridge, 40 m above the Kurobe River</div>
         <div class="tb-ps__credit">
           <span class="tb-ps__subject">Photograph to commission</span>
           <span class="tb-ps__credit-line">— credit on supply</span>
         </div>
       </div>
     </div>

   Tones: add `tb-ps--ink` for dark hero variant.
   Variants: tb-ps--editorial (default) | tb-ps--plate | tb-ps--specimen
   Sizing: parent must have a height (aspect-ratio works).
   ========================================================= */

.tb-ps {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: inherit;
  overflow: hidden;
  color: var(--ink);
  isolation: isolate;
  --ps-bg: var(--paper-3);
  --ps-rule: var(--rule);
  --ps-rule-2: var(--rule-2);
  --ps-ink: var(--ink);
  --ps-ink-2: var(--ink-2);
  --ps-ink-3: var(--ink-3);
  --ps-ink-4: var(--ink-4);
  --ps-grain: rgba(17, 19, 18, 0.035);
  --ps-watermark: color-mix(in oklab, var(--ink) 8%, transparent);
  --ps-pill-bg: rgba(255, 255, 255, 0.7);
}

.tb-ps--ink {
  --ps-bg: var(--ink);
  --ps-rule: rgba(255, 255, 255, 0.14);
  --ps-rule-2: rgba(255, 255, 255, 0.22);
  --ps-ink: var(--paper);
  --ps-ink-2: rgba(255, 255, 255, 0.78);
  --ps-ink-3: rgba(255, 255, 255, 0.50);
  --ps-ink-4: rgba(255, 255, 255, 0.30);
  --ps-grain: rgba(255, 255, 255, 0.04);
  --ps-watermark: rgba(255, 255, 255, 0.07);
  --ps-pill-bg: rgba(255, 255, 255, 0.07);
  background: var(--ink);
  border: none;
  color: var(--paper);
}

/* paper grain — soft diagonal weave on every variant */
.tb-ps::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(135deg, var(--ps-grain) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg,  var(--ps-grain) 0 1px, transparent 1px 7px);
  opacity: 0.9;
  z-index: 0;
}

/* corner trim ticks — tiny editorial marks at all 4 corners */
.tb-ps::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid transparent;
  background:
    /* top-left */
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) top    left  / 12px 1px no-repeat,
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) top    left  / 1px 12px no-repeat,
    /* top-right */
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) top    right / 12px 1px no-repeat,
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) top    right / 1px 12px no-repeat,
    /* bottom-left */
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) bottom left  / 12px 1px no-repeat,
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) bottom left  / 1px 12px no-repeat,
    /* bottom-right */
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--ps-rule-2), var(--ps-rule-2)) bottom right / 1px 12px no-repeat;
  z-index: 1;
}

/* All children sit above the grain/ticks layers */
.tb-ps > * { position: relative; z-index: 2; }

/* ── EDITORIAL ─────────────────────────────────────────── */
.tb-ps--editorial::before { /* keep grain */ }

.tb-ps--editorial > .tb-ps__watermark,
.tb-ps--editorial[data-kanji]::before {
  /* big translucent kanji watermark — uses the data-kanji attr */
}
.tb-ps--editorial[data-kanji] {
  /* layered watermark via a pseudo on the wrapper instead of ::before
     (because ::before is the grain). We use a dedicated child element. */
}

.tb-ps__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--jp);
  font-size: clamp(180px, 38%, 480px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--ps-watermark);
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

/* shorthand: editorial slot can omit explicit watermark; use data-kanji */
.tb-ps--editorial[data-kanji]:not(:has(.tb-ps__watermark))::after {
  /* fallback: render watermark via attr if no .tb-ps__watermark child.
     Note: keeps original ::after corner ticks via override below */
}

.tb-ps__pill {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  background: var(--ps-pill-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ps-rule-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-ink-2);
  z-index: 3;
}
.tb-ps__pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ps-ink-3);
  animation: tb-ps-pulse 2.4s ease-in-out infinite;
}
@keyframes tb-ps-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.tb-ps__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tb-ps__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ps-ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-ps__rule {
  width: 14px;
  height: 1px;
  background: var(--ps-rule-2);
  display: inline-block;
}
.tb-ps__dims {
  font-family: var(--mono);
  color: var(--ps-ink-4);
}

.tb-ps__caption {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ps-ink);
  max-width: 560px;
  text-wrap: pretty;
}

.tb-ps__credit {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ps-rule);
  margin-top: 4px;
}
.tb-ps__subject {
  font-size: 12px;
  color: var(--ps-ink-3);
  line-height: 1.4;
}
.tb-ps__credit-line {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ps-ink-4);
  letter-spacing: 0.04em;
}

/* ── PLATE ─────────────────────────────────────────────── */
.tb-ps--plate {
  background:
    linear-gradient(var(--ps-rule) 1px, transparent 1px) -1px -1px / 32px 32px,
    linear-gradient(90deg, var(--ps-rule) 1px, transparent 1px) -1px -1px / 32px 32px,
    var(--ps-bg);
}

.tb-ps__crosshair {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}
.tb-ps__crosshair-inner {
  position: relative;
  text-align: center;
}
.tb-ps__crosshair-inner::before,
.tb-ps__crosshair-inner::after {
  content: "";
  position: absolute;
  background: var(--ps-rule-2);
}
.tb-ps__crosshair-inner::before {
  /* vertical line */
  left: 50%;
  top: -120px;
  bottom: -120px;
  width: 1px;
  transform: translateX(-50%);
}
.tb-ps__crosshair-inner::after {
  /* horizontal line */
  top: 50%;
  left: -200px;
  right: -200px;
  height: 1px;
  transform: translateY(-50%);
}
.tb-ps__crosshair-kanji {
  font-family: var(--jp);
  font-size: 96px;
  font-weight: 300;
  color: var(--ps-ink-2);
  line-height: 1;
  letter-spacing: -0.04em;
  position: relative;
}
.tb-ps__crosshair-dims {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-ink-3);
  position: relative;
}

.tb-ps--plate .tb-ps__top-left {
  position: absolute;
  top: 22px;
  left: 26px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ps-ink-3);
}
.tb-ps--plate .tb-ps__top-right {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ps-ink-4);
  letter-spacing: 0.04em;
}

.tb-ps--plate .tb-ps__bottom {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--ps-rule);
  padding: 18px 26px;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
}
.tb-ps--plate.tb-ps--ink .tb-ps__bottom {
  background: rgba(0, 0, 0, 0.4);
}
.tb-ps--plate .tb-ps__caption {
  font-size: 17px;
  letter-spacing: -0.008em;
}
.tb-ps--plate .tb-ps__credit-line {
  margin-left: auto;
  white-space: nowrap;
}

/* ── SPECIMEN ──────────────────────────────────────────── */
.tb-ps--specimen {
  background:
    repeating-linear-gradient(45deg, var(--ps-grain) 0 1px, transparent 1px 11px),
    var(--ps-bg);
}
.tb-ps--specimen .tb-ps__watermark {
  inset: auto;
  top: 30px;
  right: 30px;
  font-size: 64px;
  display: block;
}

.tb-ps--specimen > .tb-ps__body {
  position: absolute;
  inset: 0;
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.tb-ps--specimen .tb-ps__eyebrow {
  margin-bottom: auto;
}
.tb-ps--specimen .tb-ps__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ps-ink-3);
  border-radius: 999px;
  display: inline-block;
}
.tb-ps--specimen .tb-ps__caption {
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.014em;
  max-width: 480px;
  margin-bottom: 14px;
}
.tb-ps--specimen .tb-ps__credit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--ps-rule);
}
.tb-ps--specimen .tb-ps__subject {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.tb-ps--specimen .tb-ps__credit-line {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  margin-left: 0;
}
.tb-ps--specimen .tb-ps__credit::before {
  content: "";
  height: 1px;
  background: var(--ps-rule);
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

/* ── Mobile compaction ─────────────────────────────────── */
@media (max-width: 700px) {
  .tb-ps__bottom { padding: 18px 18px 16px; }
  .tb-ps__pill { top: 14px; right: 14px; padding: 5px 9px; font-size: 9.5px; }
  .tb-ps::after { inset: 10px; }
  .tb-ps__caption { font-size: 16px; }
  .tb-ps--specimen > .tb-ps__body { padding: 22px 22px 18px; }
  .tb-ps--plate .tb-ps__bottom { padding: 14px 18px; }
  .tb-ps--plate .tb-ps__top-left,
  .tb-ps--plate .tb-ps__top-right { top: 14px; }
  .tb-ps--plate .tb-ps__top-left { left: 18px; }
  .tb-ps--plate .tb-ps__top-right { right: 18px; }
  .tb-ps__crosshair-kanji { font-size: 64px; }
}