/* ============================================================
   RIVERBEND SYSTEMS — portfolio page
   Exhibits (cover in a browser window) + full-screen device viewer
   ============================================================ */

/* ---------- exhibits ---------- */
.exhibits{padding-block:clamp(4rem,9vh,7rem)}
.exhibit{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding-block:clamp(3.5rem,8vh,6.5rem);
  min-width:0;
}
.exhibit + .exhibit{border-top:1px solid var(--line-soft)}
.exhibit:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.exhibit:nth-of-type(even) .ex-fig{order:2}
.exhibit:first-of-type{padding-top:0}

.ex-fig{position:relative}
/* the cover sits in a drawn browser window on the navy plate ground */
.ex-window{
  display:block;width:100%;text-align:left;padding:0;
  background:
    radial-gradient(rgba(244,248,242,.10) 1px,transparent 1.4px) 0 0/28px 28px,
    linear-gradient(160deg,rgba(88,184,72,.14),rgba(88,184,72,0) 55%),
    var(--navy);
  border:1px solid rgba(244,248,242,.07);
  padding:clamp(1.1rem,2.6vw,2.4rem);
  position:relative;cursor:pointer;
}
.ex-window::after{ /* film grain, light on navy */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ex-bar{
  display:flex;align-items:center;gap:6px;
  height:34px;padding-inline:12px;
  background:#0B2A32;border:1px solid rgba(244,248,242,.22);border-bottom:0;
}
.ex-bar i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(244,248,242,.55)}
.ex-bar i:first-child{background:var(--green-bright);border-color:var(--green-bright)}
.ex-url,.vw-url{
  margin-left:10px;flex:1;min-width:0;
  font-family:var(--display);font-stretch:105%;font-weight:520;font-size:.64rem;
  letter-spacing:.12em;text-transform:lowercase;color:rgba(244,248,242,.6);
  background:rgba(244,248,242,.06);border:1px solid rgba(244,248,242,.12);
  padding:.28rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ex-shot{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:#0B2A32;
  border:1px solid rgba(244,248,242,.22);border-top:0;
  container-type:inline-size;
}
.ex-shot img{
  width:100%;height:auto;min-height:100%;
  transform:translateY(0);
  transition:transform 6s cubic-bezier(.3,0,.2,1);
}
/* on hover the page scrolls to its foot — a walk down the site without opening it */
@media (hover:hover){
  .ex-window:hover .ex-shot img,.ex-window:focus-visible .ex-shot img{transform:translateY(calc(-100% + 62.5cqw))}
}
.ex-hover{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;place-items:center;
  opacity:0;transition:opacity .35s ease;
}
.ex-hover span{
  font-family:var(--display);font-stretch:112%;font-weight:600;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);background:#F4F8F2;padding:.9rem 1.5rem;
  transform:translateY(8px);transition:transform .35s cubic-bezier(.22,.7,.3,1);
  box-shadow:0 12px 40px rgba(0,20,26,.4);
}
.ex-window:hover .ex-hover,.ex-window:focus-visible .ex-hover{opacity:1}
.ex-window:hover .ex-hover span,.ex-window:focus-visible .ex-hover span{transform:none}

.ex-copy h2{
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:560;font-stretch:116%;
  text-transform:uppercase;letter-spacing:-.005em;margin-bottom:.4rem;
}
.ex-copy p{max-width:52ch;color:var(--ink-2)}
.ex-copy .plate-meta{margin-bottom:1.4rem}
.ex-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;margin-top:1.8rem}

/* a sub-entry hangs off the entry above it (a product site's working demo): indented under a
   hairline, figure always on the left, and it does not take part in the left/right alternation */
.exhibit.exhibit--sub{
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  border-top:0;padding-top:0;
  margin-top:calc(-1*clamp(1.5rem,4vh,3rem));
  margin-left:clamp(1rem,4vw,3.5rem);padding-left:clamp(1.25rem,3vw,2.5rem);
  border-left:1px solid var(--line-soft);
}
.exhibit.exhibit--sub .ex-fig{order:0}
.exhibit--sub .ex-window{padding:clamp(.9rem,2vw,1.6rem)}
.exhibit--sub .plate-num{font-size:clamp(2.4rem,5vw,3.8rem)}
.exhibit--sub .ex-copy h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.ex-sub-kicker{
  font-family:var(--display);font-stretch:112%;font-weight:600;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:.6rem;
}
.exhibit--sub + .exhibit{border-top:1px solid var(--line-soft)}
/* the grid columns must be allowed to shrink below their content: the nowrap address in the
   cover's browser bar otherwise sets a ~440px minimum, and phones zoom the whole page out to fit it */
.ex-fig,.ex-copy{min-width:0}
.ex-window{min-width:0;max-width:100%}
.ex-bar{min-width:0}
@media (max-width:860px){
  .exhibit,.exhibit:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .exhibit:nth-of-type(even) .ex-fig{order:0}
  .exhibit.exhibit--sub{grid-template-columns:minmax(0,1fr);margin-left:0;padding-left:1rem;margin-top:-.5rem}
}

/* ---------- viewer ---------- */
.viewer{
  position:fixed;inset:0;z-index:90;
  background:
    radial-gradient(rgba(244,248,242,.07) 1px,transparent 1.4px) 0 0/28px 28px,
    var(--navy);
  color:#F4F8F2;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
body.viewer-open .viewer{opacity:1;visibility:visible;transition:opacity .35s ease}
body.viewer-open{overflow:hidden}
body.viewer-open .site-head{visibility:hidden}

.vw-bar{
  flex:none;height:60px;
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding-inline:clamp(10px,2vw,28px);
  border-bottom:1px solid rgba(244,248,242,.12);
  background:rgba(0,32,40,.85);backdrop-filter:blur(8px);
  position:relative;z-index:2;
}
.vw-bar button,.vw-bar a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-stretch:110%;font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,248,242,.85);text-decoration:none;
  padding:.55rem .7rem;transition:color .2s ease,background .2s ease;
}
.vw-bar button:hover,.vw-bar a:hover{color:var(--green-bright)}
.vw-bar svg{width:16px;height:16px;flex:none}
.vw-close{margin-left:-.7rem}
.vw-title{
  flex:1;min-width:0;display:flex;align-items:baseline;gap:.8rem;
  font-family:var(--display);text-transform:uppercase;
}
.vw-num{font-stretch:64%;font-weight:640;font-size:.9rem;letter-spacing:.08em;color:var(--green-bright)}
.vw-name{
  font-stretch:112%;font-weight:600;font-size:.8rem;letter-spacing:.14em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vw-devices{display:flex;border:1px solid rgba(244,248,242,.25)}
.vw-devices button{padding:.5rem .85rem}
.vw-devices button + button{border-left:1px solid rgba(244,248,242,.25)}
.vw-devices button[aria-pressed="true"]{background:#F4F8F2;color:var(--navy)}
.vw-devices button[aria-pressed="true"]:hover{color:var(--navy)}
.vw-nav{display:flex;align-items:center;gap:.2rem}
.vw-nav button[disabled]{opacity:.3;pointer-events:none}
.vw-open{border:1px solid rgba(244,248,242,.25);margin-left:.5rem}

.vw-stage{
  flex:1;min-height:0;position:relative;
  display:grid;place-items:center;
  padding:clamp(12px,2.5vh,28px);
  overflow:hidden;
}
.vw-frame{position:relative;flex:none}
.vw-inner{
  position:absolute;top:0;left:0;transform-origin:0 0;
  display:flex;flex-direction:column;
  background:#0B2A32;
  box-shadow:0 40px 100px rgba(0,10,14,.6),0 0 0 1px rgba(244,248,242,.12);
  transition:border-radius .3s ease,padding .3s ease;
}
.vw-chrome{
  flex:none;display:flex;align-items:center;gap:6px;height:44px;padding-inline:14px;
  background:#0B2A32;border-bottom:1px solid rgba(244,248,242,.14);
}
.vw-chrome i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(244,248,242,.55)}
.vw-chrome i:first-child{background:var(--green-bright);border-color:var(--green-bright)}
.vw-url{font-size:.7rem;padding:.35rem .9rem}
.vw-screen{position:relative;flex:1;min-height:0;background:#fff;overflow:hidden}
.vw-screen iframe{display:block;border:0;width:100%;height:100%;background:#fff}

/* device treatments */
.viewer[data-device="tablet"] .vw-inner,
.viewer[data-device="phone"] .vw-inner{background:#0A1418;box-shadow:0 40px 100px rgba(0,10,14,.65),0 0 0 1px rgba(244,248,242,.18),inset 0 0 0 2px rgba(244,248,242,.06)}
.viewer[data-device="tablet"] .vw-chrome,
.viewer[data-device="phone"] .vw-chrome{display:none}
.viewer[data-device="tablet"] .vw-inner{padding:18px;border-radius:26px}
.viewer[data-device="tablet"] .vw-screen{border-radius:10px}
.viewer[data-device="phone"] .vw-inner{padding:12px;border-radius:46px}
.viewer[data-device="phone"] .vw-screen{border-radius:36px}

/* loading thread: a lit trace draws across the top of the screen while the site arrives */
.vw-loading{position:absolute;inset:0 0 auto 0;height:2px;z-index:1;opacity:0;transition:opacity .3s ease}
.vw-loading span{
  display:block;height:100%;width:40%;background:var(--green-bright);
  box-shadow:0 0 8px rgba(88,184,72,.7);
  animation:vwload 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
.viewer.loading .vw-loading{opacity:1}
@keyframes vwload{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

@media (max-width:760px){
  .vw-bar{gap:.5rem;height:56px}
  .vw-bar button span,.vw-open span{display:none}
  .vw-close{margin-left:-.4rem}
  .vw-close span{display:none}
  .vw-devices button{padding:.5rem .6rem}
  .vw-name{font-size:.7rem}
  .vw-open{margin-left:0}
  .vw-stage{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .ex-shot img{transition:none}
  .ex-window:hover .ex-shot img{transform:none}
  .vw-loading span{animation:none;width:100%}
}