/* =========================================================
   /websites — the web-development portfolio and its case studies
   ---------------------------------------------------------
   Same canvas, colours, glass buttons, header and footer as the rest of
   rowen.work (DESIGN.md), with its own editorial voice, which Rowen chose
   on 2026-10-15: headlines in Newsreader instead of Space Grotesk, JetBrains
   Mono for index numbers, years and the tech stack (this page is about
   code), and the hero fading up once on load. Still no scroll reveals,
   glows, gradient text, lifts or boxes around cards: the screenshots are
   the colour, and a hover only brightens and scales a picture a touch,
   then eases back.
   Markup: assets/js/websites-render.js. Prefix: .ws-
   ========================================================= */

.ws{
  --ws-serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --ws-mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative;z-index:2;
  padding-bottom:24px;
}
.ws a{color:inherit;}
/* The router focuses each new page's heading for screen readers (.sr-route-focus);
   that focus is not drawn, like everywhere else on the site. */
.ws :focus-visible:not(.sr-route-focus){outline:2px solid var(--accent);outline-offset:4px;}

/* ---------- shared type ---------- */
.ws-section-title{
  font-family:var(--ws-serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(28px,3.1vw,42px);line-height:1.08;letter-spacing:-.015em;
  text-wrap:balance;
}
.ws-num,.ws-row-num,.ws-row-year,.ws-year{font-family:var(--ws-mono);font-size:12px;letter-spacing:.02em;color:var(--dimmer);}
.ws-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:13px;color:var(--dimmer);}
.ws-sep{color:var(--line-strong);}
/* "Live" reads in ink; every other status stays quiet so it's never
   mistaken for a selling point. */
.ws-status[data-status="live"],.ws-status[data-status="in-progress"]{color:var(--white);}

/* ---------- hero ----------
   Type-led: one sentence set large, the specifics under it, and the two
   ways on (contact, the list). The only thing here that moves by itself
   is the one-time fade up, and reduced motion skips it. */
.ws-hero{
  padding:clamp(20px,4.4vw,64px) 0 clamp(52px,7vw,104px);
  border-bottom:1px solid var(--line);
}
.ws-title{
  font-family:var(--ws-serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(42px,7.2vw,104px);line-height:.98;letter-spacing:-.028em;
  max-width:15ch;text-wrap:balance;
}
.ws-hero-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:28px 56px;margin-top:clamp(28px,3.6vw,48px);
}
.ws-lead{font-size:17px;line-height:1.62;color:var(--dim);max-width:58ch;text-wrap:pretty;}
.ws-hero-actions{display:flex;flex-wrap:wrap;gap:12px;}

.ws-in{animation:ws-in .8s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms + 80ms);}
@keyframes ws-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- the screenshot plate ----------
   The desktop capture fills a 16:10 plate; the phone capture, when
   there is one, overlaps its lower corner (it floats, so it alone gets
   a shadow). */
.ws-plate{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:12px;background:var(--card);border:1px solid var(--line);
}
.ws-plate img,.ws-row-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:scale(1);filter:brightness(1);
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.ws-phone{
  position:absolute;right:4%;bottom:0;width:20%;aspect-ratio:9/19.5;overflow:hidden;
  border-radius:clamp(12px,1.6vw,20px);background:var(--black);
  border:1px solid var(--line-strong);box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.ws-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.ws-plate-type{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--card);}
.ws-plate-type span{
  padding:0 8%;text-align:center;font-family:var(--ws-serif);font-weight:400;
  font-size:clamp(26px,3.6vw,52px);letter-spacing:-.02em;color:var(--dimmer);
}

/* ---------- selected work ---------- */
.ws-featured{padding-top:clamp(56px,7vw,96px);}
.ws-featured > .ws-section-title{margin-bottom:clamp(8px,1.5vw,20px);}
.ws-feature{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;
  gap:clamp(28px,4.4vw,72px);padding:clamp(32px,4.4vw,64px) 0;
}
.ws-feature + .ws-feature{border-top:1px solid var(--line);}
.ws-feature.is-flipped .ws-feature-media{order:2;}
.ws-feature.is-flipped .ws-phone{right:auto;left:4%;}
.ws-feature-media{position:relative;display:block;padding-bottom:7%;}
.ws-feature-media:hover .ws-plate img,
.ws-feature:has(.ws-feature-name a:hover) .ws-plate img,
.ws-feature:focus-within .ws-plate img{transform:scale(1.02);filter:brightness(1.06);}
.ws-feature-name{
  margin-top:14px;font-family:var(--ws-serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(34px,4.3vw,62px);line-height:1;letter-spacing:-.022em;text-wrap:balance;
}
.ws-feature-name a{text-decoration:none;}
.ws-feature .ws-meta{margin-top:16px;}
.ws-feature-summary{margin-top:16px;max-width:46ch;font-size:16px;line-height:1.62;color:var(--dim);text-wrap:pretty;}
.ws-feature-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px;}

.ws-textlink{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--white);
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:6px;
  transition:text-decoration-color .3s var(--ease),color .3s var(--ease);
}
.ws-textlink:hover{text-decoration-color:currentColor;}
.ws-textlink.is-quiet{color:var(--dim);}
.ws-textlink.is-quiet:hover{color:var(--white);}
.ws-arrow,.ws-out{flex:0 0 auto;transition:transform .35s var(--ease),color .35s var(--ease);}
.ws-textlink:hover .ws-arrow{transform:translateX(3px);}
.ws-textlink:hover .ws-out{transform:translate(2px,-2px);}

/* ---------- all projects ----------
   An index, not a card grid: one row per project with its number, a
   small capture, the name, one line, and where it stands. The whole row
   is the link to the case study. */
.ws-index{padding-top:clamp(64px,8vw,112px);scroll-margin-top:calc(var(--header-h) + 20px);}
.ws-index-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:26px;}
.ws-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);}
.ws-row{border-top:1px solid var(--line);transition:border-color .3s var(--ease);}
.ws-row[hidden]{display:none;}
.ws-row:hover{border-top-color:var(--line-strong);}
.ws-row-link{
  display:grid;grid-template-columns:36px clamp(150px,16vw,208px) minmax(0,1fr) 72px 20px;
  align-items:center;gap:clamp(18px,2.4vw,32px);padding:22px 0;text-decoration:none;
}
.ws-row-num{align-self:start;padding-top:8px;}
.ws-row-thumb{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--card);border:1px solid var(--line);}
.ws-row-thumb .ws-plate-type span{font-size:17px;}
.ws-row-main{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ws-row-name{font-family:var(--ws-serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.08;letter-spacing:-.012em;overflow-wrap:anywhere;}
.ws-row-summary{max-width:64ch;font-size:14.5px;line-height:1.55;color:var(--dim);}
.ws-row-meta{display:flex;flex-wrap:wrap;gap:6px 9px;margin-top:4px;font-size:12.5px;color:var(--dimmer);}
.ws-row-year{text-align:right;}
.ws-row .ws-arrow{color:var(--dimmer);}
.ws-row-link:hover .ws-row-thumb img,.ws-row-link:focus-visible .ws-row-thumb img{transform:scale(1.03);filter:brightness(1.08);}
.ws-row-link:hover .ws-arrow,.ws-row-link:focus-visible .ws-arrow{transform:translateX(4px);color:var(--white);}
.ws-row-link:focus-visible{outline-offset:6px;border-radius:10px;}
.ws-status-line{min-height:1px;margin-top:14px;font-size:12.5px;color:var(--dimmer);}
.ws-status-line:empty{margin:0;}
.ws-empty{padding:28px 0;color:var(--dim);border-top:1px solid var(--line);}

/* ---------- contact ---------- */
.ws-contact{padding-top:clamp(64px,8vw,112px);scroll-margin-top:calc(var(--header-h) + 20px);}
.ws-contact .page-cta-band{margin-top:0;}
.ws-contact h2{font-family:var(--ws-serif);font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.015em;}
.ws-mail{color:var(--white);white-space:nowrap;}

/* ---------- a case study ---------- */
.ws-case-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  grid-template-areas:"meta meta" "title aside" "purpose aside";
  gap:18px clamp(32px,5vw,80px);padding:clamp(18px,3.4vw,48px) 0 clamp(32px,4vw,56px);
}
.ws-case-head > .ws-meta{grid-area:meta;}
.ws-case-title{
  grid-area:title;font-family:var(--ws-serif);font-weight:400;font-optical-sizing:auto;
  font-size:clamp(48px,8.4vw,128px);line-height:.94;letter-spacing:-.032em;overflow-wrap:anywhere;
}
.ws-case-purpose{grid-area:purpose;max-width:52ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--dim);text-wrap:pretty;}
.ws-case-aside{grid-area:aside;align-self:end;}
.ws-facts{margin:0;border-top:1px solid var(--line);}
.ws-facts > div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.ws-facts dt{color:var(--dimmer);}
.ws-facts dd{margin:0;text-align:right;color:var(--white);}
.ws-case-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.ws-case-actions .btn{padding:12px 20px;}
.ws-nolink{margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--dimmer);}
.ws-case-cover{position:relative;margin:0 0 clamp(40px,6vw,88px);padding-bottom:5%;}
.ws-case-cover .ws-phone{width:17%;right:5%;}
.ws-case-cover figcaption{margin-top:12px;font-size:13px;color:var(--dimmer);}

.ws-case-section{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:22px clamp(32px,5vw,80px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line);
}
.ws-case-h{
  align-self:start;position:sticky;top:calc(var(--header-h) + 24px);
  font-family:var(--ws-serif);font-weight:400;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.015em;
}
.ws-case-body > p{max-width:66ch;font-size:16.5px;line-height:1.75;color:var(--dim);text-wrap:pretty;}
.ws-case-body > p + p{margin-top:1.05em;}
.ws-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;}
.ws-points li{padding-top:16px;border-top:1px solid var(--line);}
.ws-points h3,.ws-notes h3{font-family:'Inter',sans-serif;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--white);}
.ws-points p,.ws-notes p{margin-top:8px;font-size:15px;line-height:1.68;color:var(--dim);text-wrap:pretty;}
.ws-notes{list-style:none;margin:0;padding:0;counter-reset:note;display:flex;flex-direction:column;gap:34px;}
.ws-notes li{position:relative;padding-left:48px;counter-increment:note;}
.ws-notes li::before{content:counter(note,decimal-leading-zero);position:absolute;left:0;top:3px;font-family:var(--ws-mono);font-size:12px;color:var(--dimmer);}
.ws-notes p{max-width:68ch;}
.ws-stack{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.ws-stack li{padding:7px 12px;border:1px solid var(--line);border-radius:100px;font-family:var(--ws-mono);font-size:12px;color:var(--dim);}

.ws-gallery{display:flex;flex-direction:column;gap:30px;}
.ws-gallery figure{margin:0;}
.ws-gallery figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--dimmer);}
.ws-zoom{
  display:block;width:100%;padding:0;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
}
.ws-zoom img{display:block;width:100%;height:auto;filter:brightness(1);transition:filter .4s var(--ease);}
.ws-zoom:hover img{filter:brightness(1.06);}
.ws-phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;max-width:720px;}
.ws-shot-phone .ws-zoom{border-radius:18px;}

.ws-related{padding-top:clamp(56px,7vw,96px);}
.ws-related > .ws-section-title{margin-bottom:24px;}

/* ---------- screenshot viewer ---------- */
.ws-viewer{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:clamp(16px,4vw,48px);border:0;background:transparent;}
.ws-viewer[open]{display:flex;align-items:center;justify-content:center;}
.ws-viewer::backdrop{background:rgba(6,6,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.ws-viewer figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;}
.ws-viewer img{display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:12px;border:1px solid var(--line);}
.ws-viewer figcaption{margin-top:12px;max-width:70ch;text-align:center;font-size:13.5px;line-height:1.5;color:var(--dim);}
.ws-viewer-close{
  position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:50%;cursor:pointer;
  color:var(--white);font-size:16px;line-height:1;
  border:1px solid var(--lg-edge);background:var(--lg-fill);box-shadow:var(--lg-shadow);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .5s var(--lg-spring);
}
.ws-viewer-close:hover{background-color:var(--lg-fill-hover);border-color:var(--lg-edge-hover);}
.ws-viewer-close:active{transform:var(--lg-press);transition-duration:.25s,.25s,.12s;}
.ws-viewer-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- loading and error ---------- */
.ws-loading{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,4vw,56px) 0 120px;}
.ws-loading span{display:block;height:16px;width:62%;border-radius:6px;background:var(--card);}
.ws-loading span:first-child{height:clamp(44px,6vw,84px);width:78%;margin-bottom:12px;}
.ws-error{padding:clamp(24px,4vw,56px) 0 40px;}
.ws-error p{margin:14px 0 26px;color:var(--dim);}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ws-row-link{grid-template-columns:30px clamp(140px,20vw,180px) minmax(0,1fr) 20px;}
  .ws-row-year{display:none;}
}
@media (max-width:900px){
  .ws-hero-foot{grid-template-columns:1fr;}
  .ws-feature{grid-template-columns:1fr;gap:26px;}
  .ws-feature.is-flipped .ws-feature-media{order:0;}
  .ws-feature.is-flipped .ws-phone{left:auto;right:4%;}
  .ws-case-head{grid-template-columns:1fr;grid-template-areas:"meta" "title" "purpose" "aside";}
  .ws-case-aside{align-self:stretch;margin-top:10px;}
  .ws-case-section{grid-template-columns:1fr;}
  .ws-case-h{position:static;}
}
@media (max-width:640px){
  .ws-row-link{grid-template-columns:104px minmax(0,1fr);gap:16px;padding:18px 0;align-items:start;}
  .ws-row-num,.ws-row .ws-arrow{display:none;}
  .ws-row-name{font-size:22px;}
  .ws-row-summary{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .ws-points{grid-template-columns:1fr;gap:24px;}
  .ws-notes li{padding-left:36px;}
  .ws-phone{width:25%;}
  .ws-case-cover .ws-phone{width:24%;}
  .ws-hero-actions .btn{flex:1 1 auto;justify-content:center;}
  .ws-contact .page-cta-band{flex-direction:column;align-items:flex-start;padding:26px 22px;}
}

@media (prefers-reduced-motion:reduce){
  .ws-in{animation:none;}
  .ws-plate img,.ws-row-thumb img,.ws-zoom img,.ws-arrow,.ws-out,.ws-row,.ws-textlink{transition:none;}
  .ws-feature-media:hover .ws-plate img,
  .ws-feature:has(.ws-feature-name a:hover) .ws-plate img,
  .ws-feature:focus-within .ws-plate img,
  .ws-row-link:hover .ws-row-thumb img,
  .ws-row-link:focus-visible .ws-row-thumb img{transform:none;}
}