/* /work/web-design/: a gallery of website designs in phone frames, and the live viewer that opens one.
   Colors come from theme.css, so the page follows the Forest/Light toggle; the phones keep their own. */
.wd-page { max-width: 1240px; margin: 0 auto; padding: 0 var(--pe-gutter) 96px; color: var(--theme-text); }
.wd-page h1, .wd-page h2, .wd-page h3, .wd-page p, .wd-page ul { margin: 0; }
.wd-page p { color: var(--theme-muted); }
.wd-page a { color: var(--theme-text); }

.wd-hero { padding: 56px 0 24px; display: grid; gap: 16px; }
.wd-page .wd-hero h1 {
  max-width: 16em; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance;
}
.wd-hero h1 em { color: var(--emerald, var(--theme-text)); }
.wd-intro { max-width: 44em; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.wd-page .wd-note {
  justify-self: start; max-width: 44em; padding: 8px 14px; border: 1px solid var(--theme-line); border-radius: 18px;
  background: var(--theme-surface); font-size: 15px; line-height: 1.5;
}

.wd-group { padding-top: 64px; display: grid; gap: 32px; }
.wd-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; padding-bottom: 16px; border-bottom: 1px solid var(--theme-line); }
.wd-page .wd-group-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; }
.wd-group-head p { max-width: 36em; font-size: 16px; line-height: 1.55; }

.wd-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 56px 32px; }
/* The name's link covers the whole card, so the phone is a target too. */
.wd-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wd-card .wd-phone { max-width: 300px; margin: 0 auto 14px; transition: transform 0.25s ease; }
.wd-card .wd-device { transition: box-shadow 0.25s ease; }
.wd-card:hover .wd-phone, .wd-card:focus-within .wd-phone { transform: translateY(-6px); }
.wd-card:hover .wd-device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(8, 24, 17, 0.35), 0 34px 60px -24px rgba(5, 18, 12, 0.85); }
.wd-page .wd-kind { font-family: var(--pe-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wd-page .wd-card h3 { font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.wd-link { text-decoration: none; }
.wd-link::after { content: ""; position: absolute; inset: -8px; border-radius: 16px; }
.wd-link:focus-visible { outline: none; }
.wd-link:focus-visible::after { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.wd-card:hover .wd-link { text-decoration: underline; text-underline-offset: 3px; }
.wd-summary { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.wd-page .wd-try { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--theme-text); }
.wd-try svg { transition: transform 0.2s ease; }
.wd-card:hover .wd-try svg { transform: translateX(4px); }

.wd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px;
  border: 1px solid var(--theme-line); border-radius: 23px; background: transparent; color: var(--theme-text);
  font: 600 15px var(--pe-sans); text-decoration: none; cursor: pointer;
}
.wd-page a.wd-btn:hover { border-color: var(--theme-text); }
.wd-page a.wd-btn-primary, .wd-page a.wd-btn-primary:hover { background: var(--theme-control); border-color: var(--theme-control); color: var(--theme-on-control); }
.wd-page a.wd-btn-primary:hover { background: var(--theme-hover); border-color: var(--theme-hover); }

.wd-cta {
  margin-top: 88px; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  border: 1px solid var(--theme-line); border-radius: 16px; background: var(--theme-surface);
}
.wd-cta > div:first-child { flex: 1 1 420px; display: grid; gap: 10px; }
.wd-page .wd-cta h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.wd-cta p { max-width: 40em; font-size: 16px; line-height: 1.55; }
.wd-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The live viewer: a full-window dialog with the real page in a phone-sized frame. */
.wd-viewer {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--theme-bg); color: var(--theme-text);
}
.wd-viewer::backdrop { background: rgba(5, 18, 12, 0.6); }
.wd-viewer[open] { display: flex; flex-direction: column; }
.wd-viewer-bar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px var(--pe-gutter);
  border-bottom: 1px solid var(--theme-line);
}
.wd-viewer-steps { display: flex; justify-content: flex-end; gap: 8px; }
.wd-vbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--theme-line); border-radius: 22px; background: transparent; color: var(--theme-text);
  font: 600 15px var(--pe-sans); cursor: pointer;
}
.wd-vbtn:first-child { justify-self: start; }
.wd-vbtn:hover { border-color: var(--theme-text); }
.wd-vbtn:focus-visible, .wd-btn:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: 2px; }
.wd-viewer .wd-viewer-count { margin: 0; font-family: var(--pe-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--theme-muted); }
.wd-viewer-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 40px; padding: 24px var(--pe-gutter); }
.wd-viewer-info { align-self: center; display: grid; gap: 14px; justify-items: start; }
.wd-viewer-info p { margin: 0; color: var(--theme-muted); }
.wd-viewer .wd-kind { font-family: var(--pe-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wd-viewer h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; }
.wd-viewer-summary { font-size: 16px; line-height: 1.6; }
.wd-viewer .wd-viewer-hint { font-size: 14px; }
.wd-viewer .wd-btn:hover { border-color: var(--theme-text); }
/* The phone keeps its real size (a 390px-wide page) and is scaled down to fit; work.js sets --wd-scale. */
.wd-viewer-stage { min-width: 0; min-height: 0; display: grid; place-items: center; }
.wd-viewer-device { width: calc(414px * var(--wd-scale, 1)); height: calc(var(--wd-h, 918px) * var(--wd-scale, 1)); }
.wd-viewer-device .wd-phone { width: 414px; transform: scale(var(--wd-scale, 1)); transform-origin: 0 0; }
.wd-viewer-device .wd-device { padding: 12px; }
/* Desktop browsers give the page a scrollbar that phones don't have. The frame is widened by its width (--wd-gutter)
   and the screen clips it, so the page still lays out at 390px. */
.wd-viewer-device .wd-screen iframe { width: calc(390px + var(--wd-gutter, 0px)); max-width: none; height: 844px; aspect-ratio: auto; }
html.wd-locked { overflow: hidden; }

@media (min-width: 761px) and (max-width: 1100px) {
  .wd-viewer-body { grid-template-columns: minmax(0, 1fr); }
  .wd-viewer-info { display: none; }
}
@media (max-width: 760px) {
  .wd-hero { padding-top: 40px; }
  .wd-intro { font-size: 17px; }
  .wd-group { padding-top: 48px; gap: 24px; }
  .wd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
  .wd-card .wd-phone { margin-bottom: 8px; }
  .wd-page .wd-card h3 { font-size: 19px; }
  .wd-page .wd-kind { font-size: 11px; letter-spacing: 0.04em; }
  .wd-summary { font-size: 14px; }
  .wd-cta { margin-top: 64px; padding: 24px; }
  .wd-cta-actions { width: 100%; }
  .wd-cta-actions .wd-btn { flex: 1 1 200px; }
  .wd-viewer-body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .wd-viewer-info { display: none; }
  .wd-viewer-bar { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-card .wd-phone, .wd-card .wd-device, .wd-try svg { transition: none; }
  .wd-card:hover .wd-phone, .wd-card:focus-within .wd-phone, .wd-card:hover .wd-try svg { transform: none; }
}