/* mowerk.net - static. Design tokens lifted verbatim from the Twenty Twenty-Five
   theme.json the site ran on, so the look carries over: Manrope, #111 on #fff,
   645px content with 1340px wide blocks. Additions over the theme: a dark mode,
   and tables that behave on a phone. Fonts are self-hosted from the theme's own
   bundle, so no Google Fonts request. */

@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-VariableFont_wght.woff2)format("woff2-variations");
  font-weight:200 800;font-display:swap;font-style:normal}

:root{
  --base:#FFFFFF; --contrast:#111111;
  --accent-1:#FFEE58; --accent-2:#F6CFF4; --accent-3:#503AA8;
  --accent-4:#686868; --accent-5:#FBFAF3;
  --rule:color-mix(in srgb, currentColor 20%, transparent);
  --content:645px; --wide:1340px; --gap:1.2rem;
  --fs-s:.875rem; --fs-m:clamp(1rem,.95rem + .2vw,1.125rem);
  --fs-l:clamp(1.125rem,1rem + .6vw,1.375rem);
  --fs-xl:clamp(1.75rem,1.5rem + 1vw,2rem);
  --fs-xxl:clamp(2.15rem,1.6rem + 2.4vw,3rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --base:#111111; --contrast:#F3F2EE; --accent-5:#1b1b1b; --accent-4:#9d9d9d;
  --accent-3:#b9a7ff; color-scheme:dark;}}
:root[data-theme=dark]{--base:#111111;--contrast:#F3F2EE;--accent-5:#1b1b1b;
  --accent-4:#9d9d9d;--accent-3:#b9a7ff;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--base);color:var(--contrast);
  font:400 var(--fs-m)/1.65 Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.wrap{max-width:var(--content);margin-inline:auto;padding-inline:1.5rem}
.wide{max-width:var(--wide);margin-inline:auto;padding-inline:1.5rem}

/* header ------------------------------------------------------------------ */
header.site{padding:2.5rem 0 0}
.brand{display:inline-block;font-size:var(--fs-l);font-weight:700;letter-spacing:-.02em;
  text-decoration:none;color:inherit}
.brand:hover{color:var(--accent-3)}

/* Tab rail. Every tab is always visible at every width, never behind a menu.
   flex:1 1 auto is what makes this work: wrapped rows each fill the full width
   instead of trailing off, so two rows read as a deliberate grid of tabs rather
   than as a line of text that happened to break. Widths stay proportional to
   the labels because the basis is the content. */
nav.site{display:flex;flex-wrap:wrap;margin-top:1.1rem}
nav.site a{flex:1 1 auto;text-align:center;white-space:nowrap;
  font-size:var(--fs-s);text-decoration:none;color:inherit;
  padding:.6rem 1.1rem;
  border-bottom:2px solid var(--rule)}
nav.site a:hover{border-bottom-color:var(--accent-1)}
nav.site a[aria-current=page]{border-bottom-color:var(--accent-3);font-weight:600}

/* content ----------------------------------------------------------------- */
main{padding:2rem 0 1rem}
main > * + *{margin-top:var(--gap)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0}
h1{font-size:var(--fs-xxl);margin-bottom:1.5rem}
h2{font-size:var(--fs-xl);margin-top:3rem;margin-bottom:.4rem}
p{margin:0 0 var(--gap)}
a{color:var(--accent-3);text-decoration:underline;text-underline-offset:.16em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
strong{font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:.9em;
  background:var(--accent-5);padding:.1em .35em;border-radius:3px}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}

/* tables: wide on desktop, scrollable on a phone rather than squashed ------ */
figure.table{margin:2rem 0;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-s)}
th,td{text-align:left;vertical-align:top;padding:.7rem .9rem;
  border-bottom:1px solid var(--rule)}
th{font-weight:700;white-space:nowrap;border-bottom-width:2px}
tbody tr:hover{background:var(--accent-5)}
caption{caption-side:top;text-align:left;font-size:var(--fs-s);color:var(--accent-4);
  padding-bottom:.6rem}

/* media ------------------------------------------------------------------- */
figure{margin:2rem 0}
figure img,figure video{max-width:100%;height:auto;display:block;border-radius:4px}
figcaption{font-size:var(--fs-s);color:var(--accent-4);margin-top:.6rem}
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gallery img{width:100%}

/* footer ------------------------------------------------------------------ */
footer.site{margin-top:5rem;padding:2rem 0 4rem;border-top:1px solid var(--rule);
  font-size:var(--fs-s);color:var(--accent-4)}
footer.site a{color:inherit}

/* model gallery: image left, text right. The old table forced titles onto one
   line and pushed descriptions into a horizontal scrollbar, which is unusable
   in a narrow tiled window. */
.models{display:flex;flex-direction:column;gap:1.6rem;margin:1.5rem 0 2.5rem}
.model{display:grid;grid-template-columns:190px 1fr;gap:1.2rem;align-items:start}
.model .shot{display:block;border-radius:5px;overflow:hidden;background:var(--accent-5);
  aspect-ratio:4/3}
.model .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.model .shot:hover img{transform:scale(1.04)}
.model .noshot{aspect-ratio:4/3;border:1px dashed var(--rule);border-radius:5px}
.model .meta{min-width:0}
.model h3{font-size:var(--fs-l);line-height:1.25;margin:0 0 .35rem;font-weight:600}
.model h3 a{text-decoration:none;color:inherit}
.model h3 a:hover{color:var(--accent-3);text-decoration:underline}
.model p{margin:0 0 .4rem;color:var(--contrast)}
.model .sources{font-size:var(--fs-s);color:var(--accent-4);margin:0}
.model .sources a{color:var(--accent-4);text-decoration:none;
  border-bottom:1px solid var(--rule)}
.model .sources a:hover{color:var(--accent-3)}
@media (max-width:620px){
  .model{grid-template-columns:120px 1fr;gap:.9rem}
  .model h3{font-size:var(--fs-m)}
}

/* a wide header image: full content width, its own aspect ratio kept */
figure.banner{margin:1.2rem 0 2rem}
figure.banner img{width:100%;height:auto;border-radius:5px;display:block}

/* SailfishOS app showcase: the forum screenshots are curated composites, so
   they get the full content width rather than a thumbnail beside the text. */
.apps{display:flex;flex-direction:column;gap:2.6rem;margin:1.5rem 0 2.5rem}
.app figure{margin:0 0 .7rem}
.app img{width:100%;height:auto;display:block;border-radius:5px;background:#000}
.app h3{font-size:var(--fs-l);margin:0 0 .3rem;font-weight:600}
.app p{margin:0 0 .35rem}

/* benchymark results: the table breaks out to the wide width, scrolls on a
   phone, and keeps the device column in view while it does ---------------- */
.bm-wide{width:min(var(--wide) - 3rem,100vw - 3rem);margin:1.5rem 0;
  margin-inline:calc(50% - min(var(--wide) - 3rem,100vw - 3rem)/2);overflow-x:auto}
.bm-wide table{font-size:.8rem}
.bm-wide th,.bm-wide td{padding:.45rem .6rem;white-space:nowrap}
.bm-wide td[data-v]{text-align:right;font-variant-numeric:tabular-nums}
.bm-wide th{cursor:pointer;vertical-align:bottom}
.bm-wide th small{font-weight:400;color:var(--accent-4)}
.bm-wide th[aria-sort=descending]::after{content:" \25BE"}
.bm-wide th[aria-sort=ascending]::after{content:" \25B4"}
.bm-wide .bm-dev,.bm-wide th:first-child{position:sticky;left:0;background:var(--base)}
.bm-mark{color:var(--accent-3);font-weight:700;margin-left:.15em}
.bm-filters{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:1.5rem 0 0;
  font-size:var(--fs-s)}
.bm-filters input[type=search],.bm-filters select{font:inherit;padding:.35rem .5rem;
  border:1px solid var(--accent-4);border-radius:4px;background:var(--base);color:var(--contrast)}
.bm-legend dt{font-weight:600;margin-top:.8rem}
.bm-legend dd{margin:.2rem 0 0}