/*
  imageeditor.methodox.app

  One stylesheet for the whole site. No build step: what is committed is what is served,
  so this file is written to be read as well as parsed.

  The two faces are self-hosted from assets/fonts. Nothing here reaches a third party, and
  the page renders identically with the network unplugged - which is the point, because a
  site about a program that needs no runtime should not itself need a font server.

  Fraunces carries the headings. It is a variable serif with SOFT and WONK axes: WONK swaps
  in the splayed, slightly off-kilter alternates, which is the character we want on a page
  about a drawing program and is exactly wrong for body copy. Public Sans carries the body -
  plain, wide-apertured, and legible down to the 13px legal line at the bottom.
*/

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/publicsans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  src: url('fonts/publicsans-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
  Light is the default and stays the default. The rest of methodox.app skews dark; this
  product does not, so the dark palette is only ever reached by pressing the switch, never
  by prefers-color-scheme. Every colour is a token and no rule below names one directly.
*/
:root {
  --paper:      #FBFAF7;
  --card:       #FFFFFF;
  --sunk:       #F4F2ED;
  --ink:        #15181C;
  --ink-2:      #40464F;
  --muted:      #66707C;
  --line:       #E6E3DC;
  --line-2:     #D3CFC6;
  --accent:     #0A6E62;
  --accent-2:   #085A50;
  --accent-soft:#E7F3F0;
  --on-accent:  #FFFFFF;
  --shadow:     0 1px 2px rgba(20, 24, 28, .05), 0 12px 32px -12px rgba(20, 24, 28, .18);
  --shadow-lg:  0 2px 4px rgba(20, 24, 28, .06), 0 28px 70px -24px rgba(20, 24, 28, .28);

  --max: 1180px;
  --radius: 14px;
  --sans: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  /* Hangul is last on purpose. A browser picks the first family in the list that has the glyph, so the Korean faces are reached only for characters the Chinese and Japanese ones lack, and 简体中文 and 日本語 go on rendering exactly as they did. Without them 한국어 fell through to sans-serif and was the one tag in the set that did not match its neighbours. */
  --cjk: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
         'Noto Sans CJK SC', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK KR',
         sans-serif;

  color-scheme: light;
}

html[data-theme="dark"] {
  --paper:      #101418;
  --card:       #171C22;
  --sunk:       #1C222A;
  --ink:        #F2F4F6;
  --ink-2:      #C3CAD2;
  --muted:      #8B95A1;
  --line:       #262D35;
  --line-2:     #38414B;
  --accent:     #4FD1BC;
  --accent-2:   #7FE0D0;
  --accent-soft:rgba(79, 209, 188, .12);
  --on-accent:  #06201C;
  --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-lg:  0 2px 4px rgba(0, 0, 0, .45), 0 28px 70px -24px rgba(0, 0, 0, .75);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* Every list on the site is a layout device except the ones in .prose, which are prose and
   keep their markers. Selecting on [class] alone once missed the plain <ul>s in the facts
   strip and the footer, and both grew bullets. */
ul[class], .facts ul, footer ul { list-style: none; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent-2); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }

.serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede { font-size: clamp(17px, 1.7vw, 19.5px); color: var(--ink-2); }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 40;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 16px; color: var(--on-accent); }

/* ------------------------------------------------------------------ masthead */

.top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 66px; flex-wrap: wrap; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 16.5px; color: var(--ink); text-decoration: none;
  letter-spacing: -0.01em; margin-right: auto;
}
.brand:hover { color: var(--ink); }
.mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: conic-gradient(from 210deg, #E4572E, #F2C14E, #3FA796, #2D7DD2, #8E5EA2, #E4572E);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
html[data-theme="dark"] .mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

.top nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.top nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 7px 11px; border-radius: 8px;
}
.top nav a:hover, .top nav a:focus-visible { color: var(--ink); background: var(--sunk); }

.themer {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 12px; margin-left: 6px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.themer:hover { color: var(--ink); border-color: var(--muted); }
.themer svg { width: 15px; height: 15px; }
.themer .to-dark { display: inline; }
.themer .to-light { display: none; }
html[data-theme="dark"] .themer .to-dark { display: none; }
html[data-theme="dark"] .themer .to-light { display: inline; }

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(48px, 8vw, 92px) 0 0; }
.hero h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 57px);
  line-height: 1.07;
  text-wrap: balance;
  letter-spacing: -0.022em;
  max-width: 17ch;
}
.hero h1 .blink { display: block; color: var(--accent); }
.hero p.lede { margin-top: 22px; max-width: 60ch; }
.hero .fine { margin-top: 14px; font-size: 15.5px; color: var(--muted); max-width: 60ch; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 11px;
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-main { background: var(--accent); color: var(--on-accent); }
.btn-main:hover { background: var(--accent-2); color: var(--on-accent); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--ink); border-color: var(--muted); background: var(--card); }
.btn .soon {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Sits under the buttons, because "Steam - coming soon" on its own would send a reader to a
   live store page for a different product and let them believe it was this one. */
.hero .caveat { margin-top: 14px; max-width: 54ch; font-size: 14.5px; }

.shot {
  margin-top: clamp(34px, 5vw, 58px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; }
.shot figcaption {
  padding: 11px 16px; font-size: 13.5px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--card);
}

/* ------------------------------------------------------------------ facts */

.facts { margin-top: clamp(44px, 6vw, 76px); }
.facts ul {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.facts li { background: var(--card); padding: 20px 22px; }
.facts b {
  display: block;
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-weight: 600; font-size: 27px; line-height: 1.15; letter-spacing: -0.02em;
}
.facts span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------------ sections */

main > section { padding: clamp(56px, 8vw, 104px) 0; }
main > section + section { border-top: 1px solid var(--line); }

.head { max-width: 60ch; }
.head h2 {
  margin-top: 10px;
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 26, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.14; letter-spacing: -0.018em;
}
.head p { margin-top: 16px; font-size: clamp(16.5px, 1.6vw, 18.5px); color: var(--ink-2); }

.feature { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 8vw, 96px); }
.feature h3 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 26, 'WONK' 1;
  font-weight: 600; font-size: clamp(23px, 2.7vw, 31px);
  line-height: 1.18; letter-spacing: -0.016em; margin-top: 10px;
}
.feature p { margin-top: 14px; color: var(--ink-2); }
.feature p + p { margin-top: 12px; }

.bullets { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.bullets li {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card);
}

.pair { display: grid; gap: 16px; }
.pair .shot { margin-top: 0; }

/*
  The layers panel is the one figure on the page that is meant to be read rather than glanced
  at, so it gets the full container and is committed at close to the width it is shown at.
*/
.feature.wide { grid-template-columns: 1fr; }
.feature.wide .copy { max-width: 74ch; }

/* ------------------------------------------------------------------ catalogue */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips li {
  font-size: 14.5px; color: var(--ink-2);
  padding: 7px 13px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line);
}
.chips li.more { background: var(--accent-soft); border-color: transparent; color: var(--accent-2); font-weight: 700; }

/* ------------------------------------------------------------------ languages */

/* The strips are committed at 756 px and shown at 756 px: blown up to the full container they
   were soft, and a screenshot of small type is the last thing to upscale. */
.menubars { margin-top: 26px; display: grid; gap: 16px; max-width: 758px; }
.menubars .row {
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #FFFFFF;
}
.menubars .row img { width: 100%; }
.menubars .tag {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 7px; font-size: 14px; color: var(--muted);
}
.menubars .tag b { color: var(--ink); font-size: 15px; font-family: var(--cjk); }
.menubars .tag b[lang="en"] { font-family: var(--sans); }

/* ------------------------------------------------------------------ download */

.stores { display: grid; gap: 18px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.store {
  display: flex; flex-direction: column; gap: 9px;
  padding: 24px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.store h3 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-weight: 600; font-size: 22px; letter-spacing: -0.012em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.store p { color: var(--muted); font-size: 15.5px; }
.store a { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15.5px; }
.pill {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2);
  font-family: var(--sans); font-variation-settings: normal;
}

.note {
  margin-top: 26px; padding: 18px 20px;
  border-left: 3px solid var(--accent); background: var(--sunk);
  border-radius: 0 10px 10px 0; font-size: 15.5px; color: var(--ink-2);
}

/* ------------------------------------------------------------------ prose (privacy) */

.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 26, 'WONK' 1;
  font-weight: 600; font-size: clamp(23px, 2.7vw, 30px);
  line-height: 1.2; letter-spacing: -0.016em;
  margin-top: 46px;
}
.prose h3 { font-size: 18px; font-weight: 700; margin-top: 30px; }
.prose p, .prose ul { margin-top: 14px; color: var(--ink-2); }
.prose ul { padding-left: 22px; }
.prose li { margin-top: 7px; }
.prose li::marker { color: var(--muted); }
.prose .updated { font-size: 14.5px; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------------ footer */

footer { border-top: 1px solid var(--line); padding: 52px 0 40px; background: var(--sunk); }
footer .cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
footer h2 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
footer ul li { margin-top: 7px; }
footer a { color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer .about { font-size: 15.5px; color: var(--muted); max-width: 34ch; }
footer .legal {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; color: var(--muted);
}

/* ------------------------------------------------------------------ a phone */

/*
  On a narrow screen the four nav links do not fit beside the brand, and left to wrap inside
  a sticky bar they made a masthead a third of the screen tall that followed you down the
  page. Below this width the bar stops being sticky and the links take a row of their own, so
  every destination is still reachable and none of it is in the way.
*/
@media (max-width: 779px) {
  .top { position: static; }
  .top .wrap { padding-block: 11px; gap: 10px 12px; min-height: 0; }
  .top nav { flex-basis: 100%; order: 3; margin-left: -11px; }
  .themer { margin-left: 0; }
  .brand { font-size: 16px; }
}

/* ------------------------------------------------------------------ wider than a phone */

@media (min-width: 760px) {
  .menubars { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  /* The art gets the wider half: a screenshot of a whole application window has more to lose
     from being shrunk than a paragraph has. */
  .feature { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .feature.flip .copy { order: 2; }
  .feature.flip .art { order: 1; }
  .feature.wide { grid-template-columns: 1fr; }
  .hero { padding-top: clamp(60px, 8vw, 104px); }
}

/*
  The headline is long on purpose, so above this width it takes the left column and everything
  that supports it takes the right. Below it they stack, and the headline gets the full measure.
*/
@media (min-width: 1000px) {
  .hero-text {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
    gap: 12px 56px;
    align-items: start;
  }
  .hero h1 { max-width: none; }
  .hero .support { padding-top: 6px; }
  .hero p.lede { margin-top: 0; }
}

/*
  The two store cards and the documentation card read as one row on a wide screen and stack
  on a phone; nothing else needs a breakpoint, because every grid above is auto-fit.
*/