/* Render — one page, one job.
 *
 * Shares AuroraView's palette and type so the two read as siblings, but leads
 * with copper rather than cyan: this one is about boards.
 */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('fonts/dm-sans-latin.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
}

:root{
  --ink:#06090C;
  --panel:#0C1116;
  --panel-2:#111820;
  --panel-3:#161F28;
  --line:rgba(233,237,241,.11);
  --line-2:rgba(233,237,241,.20);

  --copper:#E09A5C;
  --copper-dim:#8A5B32;
  --cyan:#41E6D4;

  --text:#E9EDF1;
  --text-2:rgba(233,237,241,.76);
  --text-3:rgba(233,237,241,.54);

  --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Cormorant Garamond',ui-serif,Georgia,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,'JetBrains Mono','Cascadia Mono',Consolas,monospace;
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink);color:var(--text-2);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Chrome ------------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:58px;padding:0 clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
  background:rgba(6,9,12,.86);backdrop-filter:blur(10px);
}
/* The wordmark, the nav and the portal link are the same three pieces the
   portal and the QR tool carry, at the same sizes and in the same order. These
   are separate apps on separate ports — the bar is the only thing that makes
   them read as one site, so it is worth keeping identical rather than merely
   similar. Thin Cormorant, uppercase, widely tracked. */
.wordmark{
  font-family:var(--head);font-size:17px;font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap;
}
.wordmark span{color:var(--cyan);margin-left:.34em}
.wordmark:hover{text-decoration:none}

/* Sits against the wordmark rather than centred: the bar reads left to right
   and these are siblings of the name. The auto margin is what pins the portal
   link to the right once there is a third child in a space-between row. */
.topnav{display:flex;gap:20px;margin-right:auto;padding-left:26px}
.topnav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-decoration:none;white-space:nowrap;transition:color .18s}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--cyan);text-decoration:none}

.account{font-family:var(--mono);font-size:12px;color:var(--text-2);background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;text-decoration:none;
  transition:border-color .18s,color .18s;white-space:nowrap}
.account:hover{border-color:var(--line-2);color:var(--text);text-decoration:none}

@media(max-width:560px){
  .topnav{gap:14px;padding-left:14px}
  .account{display:none}
}

.wrap{max-width:940px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) 0}

/* ---- Lede --------------------------------------------------------------- */
.eyebrow{
  margin:0 0 10px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
}
.lede h1{
  margin:0 0 14px;font-family:var(--head);font-weight:500;
  font-size:clamp(34px,6vw,58px);line-height:1.08;letter-spacing:-.01em;color:var(--text);
}
.lede__p{margin:0;max-width:60ch;font-size:clamp(15px,1.6vw,17px);color:var(--text-2)}

/* ---- The benchmark gallery ---------------------------------------------- */
.samples{margin:clamp(24px,4vw,40px) 0 0}
.samples__stage{margin:0}
.samples__stage img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
}
.samples__cap{
  margin:10px 2px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--text-3);
}
.samples__pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.samples__btn{
  appearance:none;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  display:grid;gap:0;transition:border-color .15s,opacity .15s;opacity:.62;
}
.samples__btn img{display:block;width:100%;height:auto}
.samples__btn span{
  padding:7px 8px;font-family:inherit;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;color:var(--text-2);
}
.samples__btn:hover{opacity:.85;border-color:var(--line-2)}
.samples__btn[aria-pressed="true"]{opacity:1;border-color:var(--copper)}
.samples__btn[aria-pressed="true"] span{color:var(--text)}
.samples__btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* ---- The tool ----------------------------------------------------------- */
.tool{
  margin:clamp(28px,4vw,44px) 0 0;
  padding:clamp(16px,2.6vw,26px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);
  display:grid;gap:16px;
}
.drops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;text-align:center;cursor:pointer;
  border:1px dashed var(--line-2);border-radius:12px;background:var(--panel-2);
  transition:border-color .15s,background .15s;
}
.drop:hover{border-color:var(--copper-dim);background:var(--panel-3)}
.drop.is-over{border-color:var(--copper);background:rgba(224,154,92,.07)}
.drop.is-filled{border-color:var(--copper-dim);border-style:solid}
.drop__icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--panel-3);color:var(--copper);font-size:17px;
}
.drop b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.drop b em{
  font-style:normal;font-weight:500;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3);
}
.drop small{font-size:12px;color:var(--text-3)}
.drop__name{
  font-family:var(--mono);font-size:11.5px;color:var(--copper);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.hint{margin:0;font-size:13px;line-height:1.55;color:var(--text-3)}

.btn{
  appearance:none;border:0;border-radius:11px;cursor:pointer;
  padding:15px 22px;width:100%;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;
  background:var(--copper);color:#1A1006;
  transition:filter .15s,opacity .15s;
}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.note{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-3);min-height:20px}

/* The shared queue. Quieter than the note — the note is about *your* render
   and this is about everyone's — and it holds its line whether or not there is
   anything to say, so the button does not jump when the number arrives. */
.queue{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-3);min-height:20px}
.queue b{color:var(--text-2);font-weight:600}
.queue.is-busy b{color:var(--copper)}

.log{
  margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--panel-3);
  border:1px solid var(--line);max-height:190px;overflow:auto;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--text-3);
  white-space:pre-wrap;word-break:break-word;
}

.out{display:grid;gap:10px}
.out img{
  max-width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:10px;
}
/* The picture is several times the width it is shown at, so the whole thing is
   a link to itself and says so. */
.out__full{display:grid;gap:8px;text-decoration:none}
.out__full span{
  justify-self:end;padding:0 2px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.02em;color:var(--text-3);transition:color .18s;
}
.out__full:hover span{color:var(--copper)}

/* ---- The detail shot ----------------------------------------------------- */
/* Full width and unclipped: the point of it is the relief on the ink, which is
   a few pixels tall, so anything that scales it down throws away the subject. */
.detail{margin:clamp(28px,4vw,44px) 0 0}
.detail img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
}
.detail figcaption{
  margin:12px 2px 0;max-width:74ch;
  font-size:14.5px;line-height:1.55;color:var(--text-2);
}
.detail figcaption b{color:var(--text);font-weight:600}

/* ---- How ---------------------------------------------------------------- */
.how{margin:clamp(44px,7vw,80px) 0 0}
.how h2{
  margin:0 0 18px;font-family:var(--head);font-weight:500;
  font-size:clamp(24px,3.4vw,34px);line-height:1.15;color:var(--text);
}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
}
.card h3{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--text)}
.card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-3)}
/* The format invitation under the grid. .hint is margin:0 because the tool
   panel is a grid with its own gap; standing on its own it needs the space. */
.hint--wide{margin-top:16px}
/* Bold inside a hint would otherwise be the same 54% grey as the sentence,
   which is not enough separation to carry an emphasis. */
.hint b{color:var(--text-2);font-weight:600}

/* ---- Foot --------------------------------------------------------------- */
.foot{
  margin-top:clamp(48px,8vw,90px);padding:22px clamp(16px,4vw,40px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:12.5px;color:var(--text-3);
}

@media (max-width:760px){
  .drops{grid-template-columns:1fr}
  .how__grid{grid-template-columns:1fr}
}