/* brand-read: an old site is read and its brand kit fills. Prefix .hero-brand-read / .br- */
.hero-brand-read .br-stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:18px;align-items:center;padding:clamp(20px,2.6vw,36px) clamp(18px,2.4vw,32px) 44px;min-height:520px}
.hero-brand-read .br-site{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(13,13,13,.35)}
.hero-brand-read .br-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.hero-brand-read .br-bar > i{width:8px;height:8px;border-radius:50%;background:var(--bg-3)}
.hero-brand-read .br-url{display:flex;align-items:center;flex:1;min-width:0;height:22px;margin-left:8px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden}
.hero-brand-read .br-caret{display:inline-block;width:1px;height:12px;margin-left:1px;background:var(--ink);opacity:0}
/* the typed address ends in an ellipsis when the bar is too narrow for it, like a real address bar, instead of
   being cut through a letter at the pill's edge */
.hero-brand-read .br-url [data-url]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero-brand-read .br-status{font-size:12px;color:var(--text-2);white-space:nowrap}
.hero-brand-read .br-page{background:#171311;color:#F7F2EC}
.hero-brand-read .br-nav{display:flex;align-items:center;gap:8px;padding:10px 14px}
.hero-brand-read .br-logo{display:grid;place-items:center;width:22px;height:22px;border-radius:6px}
.hero-brand-read .br-logo img{width:18px;height:18px}
.hero-brand-read .br-name{font-family:'Instrument Serif',Georgia,serif;font-size:15px;letter-spacing:0}
.hero-brand-read .br-links{margin-left:auto;display:flex;gap:6px}
.hero-brand-read .br-links i{width:22px;height:4px;border-radius:2px;background:rgba(247,242,236,.3)}
.hero-brand-read .br-hero{position:relative;aspect-ratio:16/8.6;overflow:hidden}
.hero-brand-read .br-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-brand-read .br-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,17,.82),rgba(23,19,17,.1) 70%)}
.hero-brand-read .br-hl{position:absolute;left:14px;bottom:14px;z-index:1;max-width:14ch;margin:0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(20px,1.9vw,27px);line-height:1.02;color:#F7F2EC}
.hero-brand-read .br-body{display:grid;gap:7px;padding:14px 14px 18px}
.hero-brand-read .br-p{margin:0 0 2px;font-size:12px;line-height:1.4;color:#CFC6BC;max-width:34ch}
.hero-brand-read .br-body i{height:5px;border-radius:3px;background:rgba(247,242,236,.16)}
.hero-brand-read .br-body i.is-short{width:55%}
.hero-brand-read [data-src]{border-radius:6px;transition:box-shadow .3s var(--ease)}
.hero-brand-read [data-src].is-hit{box-shadow:0 0 0 2px #C8703A}
.hero-brand-read .br-scan{position:absolute;left:0;right:0;top:34px;height:2px;z-index:3;background:linear-gradient(90deg,transparent,#2457FF 20%,#7FB0FF 50%,#2457FF 80%,transparent);box-shadow:0 0 18px 4px rgba(36,87,255,.35);opacity:0}

.hero-brand-read .br-kit{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));border:1px solid var(--glass-line);border-radius:18px;padding:16px;box-shadow:var(--glass-lift);transition:box-shadow .5s var(--ease)}
.hero-brand-read .br-kit.is-ok{box-shadow:0 0 0 2px rgba(29,191,115,.35),var(--glass-lift)}
.hero-brand-read .br-kit-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:14px;color:var(--ink)}
.hero-brand-read .br-kit-st{font-size:12px;color:var(--text-2)}
.hero-brand-read .br-row{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:10px;min-height:52px;padding:8px 0;border-top:1px solid var(--line)}
.hero-brand-read .br-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.hero-brand-read .br-sw{display:flex;gap:6px}
.hero-brand-read .br-sw i{position:relative;flex:1;height:34px;border-radius:8px;background:var(--c);border:1px solid rgba(13,13,13,.08)}
.hero-brand-read .br-sw em{position:absolute;left:0;right:0;bottom:-16px;font-style:normal;font-size:10px;text-align:center;color:var(--text-2)}
.hero-brand-read .br-row[data-row="colour"]{padding-bottom:24px}
.hero-brand-read .br-v{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3;color:var(--ink)}
.hero-brand-read .br-logo-v{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#171311;flex:none}
.hero-brand-read .br-aa{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:32px;line-height:1;width:34px;text-align:center;flex:none}
.hero-brand-read .br-chips{display:flex;flex-wrap:wrap;gap:5px}
.hero-brand-read .br-chips i{font-style:normal;font-size:12px;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.hero-brand-read .br-kit-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.hero-brand-read .br-confirm{display:inline-flex;align-items:center;flex:none;height:32px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;white-space:nowrap}
.hero-brand-read .br-done{font-size:12px;color:#0B7A4B}
/* second half: the kit the owner just confirmed is laid onto a new page, in the same browser frame.
   Undressed it is grey bars on white inside dashed blocks, the same vocabulary design-build composes in;
   .is-skin dresses it in the four rows that were read, over the same 0.6s crossfade. The default state in
   the markup is the finished page, so the still frame (reduced motion, no scripts) shows the outcome and
   not the wireframe, and the loop resets it while it is off screen. Absolute, so the frame never resizes. */
.hero-brand-read .br-new{position:absolute;left:0;right:0;top:34px;bottom:0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px;background:#fff;pointer-events:none;transition:background .6s var(--ease)}
.hero-brand-read .br-n-blk{border-radius:10px;border:1px dashed var(--line-control);transition:background .6s var(--ease),border-color .6s var(--ease)}
.hero-brand-read .br-n-nav{display:flex;align-items:center;gap:8px;padding:8px 10px}
.hero-brand-read .br-n-logo{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--bg-3);flex:none;transition:background .6s var(--ease)}
.hero-brand-read .br-n-logo img{width:16px;height:16px;opacity:0;transition:opacity .35s var(--ease)}
.hero-brand-read .br-n-logo.is-on img{opacity:1}
.hero-brand-read .br-n-lk{margin-left:auto;display:flex;gap:6px}
.hero-brand-read .br-n-lk i,.hero-brand-read .br-n-sub i{background:var(--bg-3);transition:background .6s var(--ease)}
.hero-brand-read .br-n-lk i{width:20px;height:4px;border-radius:2px}
.hero-brand-read .br-n-hero{display:grid;align-content:center;gap:12px;padding:13px 12px}
.hero-brand-read .br-n-sub{display:grid;gap:5px;margin:0}
.hero-brand-read .br-n-sub i{height:5px;border-radius:3px}
.hero-brand-read .br-n-sub i+i{width:62%}
.hero-brand-read .br-n-voice{padding:10px 12px}
/* the three things the kit writes: the name and headline in the serif, the body line in the voice */
.hero-brand-read .br-n-nm{font-family:'Instrument Serif',Georgia,serif;font-size:14px}
.hero-brand-read .br-n-h{margin:0;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(19px,1.7vw,25px);line-height:1.04;max-width:18ch}
.hero-brand-read .br-n-v{margin:0;font-size:12px;line-height:1.4;max-width:42ch}
/* the placeholder bar is dropped in one frame when the line is set, so the set line is never read as a
   highlighted bar; only the colour crossfades. */
.hero-brand-read .br-n-nm,.hero-brand-read .br-n-h,.hero-brand-read .br-n-v{color:transparent;background:var(--bg-3);border-radius:5px;transition:color .3s var(--ease)}
.hero-brand-read .br-n-nm.is-set,.hero-brand-read .br-n-h.is-set,.hero-brand-read .br-n-v.is-set{color:var(--ink);background:transparent}
.hero-brand-read .br-n-btn{justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:13px;color:transparent;background:var(--bg-3);transition:color .5s var(--ease),background .5s var(--ease)}
/* dressed in the confirmed kit */
.hero-brand-read .br-new.is-skin{background:#171311}
.hero-brand-read .br-new.is-skin .br-n-blk{background:#221B17;border-color:transparent}
.hero-brand-read .br-new.is-skin .br-n-logo{background:transparent}
.hero-brand-read .br-new.is-skin .br-n-lk i,.hero-brand-read .br-new.is-skin .br-n-sub i{background:rgba(247,242,236,.2)}
.hero-brand-read .br-new.is-skin .br-n-nm:not(.is-set),.hero-brand-read .br-new.is-skin .br-n-h:not(.is-set),.hero-brand-read .br-new.is-skin .br-n-v:not(.is-set){background:rgba(247,242,236,.2)}
.hero-brand-read .br-new.is-skin .br-n-nm.is-set,.hero-brand-read .br-new.is-skin .br-n-h.is-set{color:#F7F2EC}
.hero-brand-read .br-new.is-skin .br-n-v.is-set{color:#CFC6BC}
.hero-brand-read .br-new.is-skin .br-n-btn{color:#171311;background:#C8703A}
.hero-brand-read .br-fly{position:absolute;left:0;top:0;z-index:8;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:5px;pointer-events:none;box-shadow:0 6px 16px rgba(13,13,13,.25)}
@media (max-width:1100px){.hero-brand-read .br-stage{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hero-brand-read .br-stage{min-height:0;padding:16px 14px 40px;gap:14px}
  .hero-brand-read .br-status{font-size:10px}
  .hero-brand-read .br-n-h{font-size:19px}}
/* phones: a phone's browser has no window buttons, so the three dots give their width to the address, which
   was cut through a letter at 360 and 390 px */
@media (max-width:560px){
  .hero-brand-read .br-bar > i{display:none}
  .hero-brand-read .br-url{margin-left:0}
}