/* Public pages inside the app (T65): what search engines index on app.rexxart.studio. Plain HTML next to the app,
   in the app's 90s look (frontend/src/nineties.css): paper panels taped to the purple Memphis wall, tilted sticker
   labels, comic headlines, yellow buttons with ink borders. No JavaScript; one stylesheet for every page. */

:root {
  --ink: #111;
  --paper: #fff6dc;
  --purple: #5b3aa6;
  --purple-deep: #35205f;
  --magenta: #ff2e8a;
  --cyan: #2ee6d6;
  --yellow: #ffd23f;
  --lime: #a6ff3a;
  --muted: #4a4458;
  --font-display: "Luckiest Guy", "Bangers", Impact, sans-serif;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --font-body: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-type: "Courier Prime", "Courier New", monospace;
  --memphis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M10 26c8-12 14 12 22 0s14 12 22 0' fill='none' stroke='%232ee6d6' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M92 12l20 32H72z' fill='none' stroke='%23ffd23f' stroke-width='4.5' stroke-linejoin='round'/%3E%3Ccircle cx='112' cy='96' r='8' fill='%23ff2e8a'/%3E%3Cpath d='M14 100l11 11 11-11 11 11' fill='none' stroke='%23111' stroke-width='4.5' stroke-linecap='round'/%3E%3Crect x='62' y='78' width='12' height='12' fill='%232ee6d6' transform='rotate(22 68 84)'/%3E%3Ccircle cx='48' cy='58' r='3.5' fill='%23ffd23f'/%3E%3Cpath d='M118 50l6 0m-3-3v6' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='128' r='3' fill='%23a6ff3a'/%3E%3C/svg%3E");
  --halftone: radial-gradient(circle, rgba(0, 0, 0, .22) 1.1px, transparent 1.8px) 0 0 / 6px 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--memphis) 0 0 / 140px 140px, var(--purple);
  font: 700 17px/1.6 var(--font-body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(980px, 100% - 32px); margin-inline: auto; }

/* ---- the top bar: the app's taskbar, a yellow strip with ink edges ---- */
.bar { background: var(--yellow); border-bottom: 3px solid var(--ink); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.brand {
  text-transform: uppercase;
  font: 400 24px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; color: #fff;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink);
}
.bar nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bar nav a { font: 700 13px/1 var(--font-type); text-transform: uppercase; text-decoration: none; padding: 8px 10px; border: 2px solid var(--ink); background: #fff; }
.bar nav a[aria-current="page"] { background: var(--ink); color: var(--yellow); }

/* ---- buttons: yellow, ink border, hard shadow; the app's primary button ---- */
.btn {
  display: inline-block; font: 400 20px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink);
  padding: 14px 22px 12px; box-shadow: 5px 5px 0 var(--ink); rotate: -1deg; transition: translate .1s, box-shadow .1s;
}
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--ink); }
.btn.alt { background: var(--cyan); rotate: .8deg; }
.bar .btn { font-size: 15px; padding: 9px 14px 7px; box-shadow: 3px 3px 0 var(--ink); }

/* ---- panels: paper taped to the wall, named by a tilted sticker label ---- */
main { padding-block: 40px 56px; display: grid; gap: 40px; }
.panel {
  position: relative; background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 34px clamp(18px, 4vw, 40px) 28px;
}
.panel.paper { background: var(--paper); }
.panel.tilt-l { rotate: -.4deg; }
.panel.tilt-r { rotate: .35deg; }
.panel::before { /* a strip of tape at the top */
  content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 26px; translate: -50% 0; rotate: -3deg;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .08);
}
.label {
  position: absolute; top: -18px; left: 18px; margin: 0; rotate: -2.5deg;
  font: 400 17px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  background: var(--magenta); color: #fff; border: 3px solid var(--ink); padding: 8px 12px 6px;
  -webkit-text-stroke: .6px var(--ink);
}
.label.cyan { background: var(--cyan); color: var(--ink); -webkit-text-stroke: 0; }
.label.yellow { background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; }

/* ---- type ---- */
/* the display face is capitals only: text-transform with lang="tr" turns i into İ before it draws, as the app does */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1.08; margin: 0 0 .4em; text-transform: uppercase; }
h1 { font-size: clamp(34px, 6vw, 58px); color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
h2 { font-size: clamp(26px, 4vw, 36px); }
h3 { font-size: 21px; margin-top: 1.1em; }
p, li { font-weight: 600; }
.lead { font: 800 21px/1.45 var(--font-body); margin: 0 0 22px; }
.hero { background: var(--halftone), var(--magenta); }
.hero .lead { color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.hero .actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.hero .note { font: 700 14px/1.4 var(--font-type); color: #fff; }
.small { font: 700 14px/1.5 var(--font-type); color: var(--muted); }
figure { margin: 22px 0 0; }
figure img { border: 3px solid var(--ink); background: #fff; }
figcaption { font: 700 14px/1.45 var(--font-type); margin-top: 8px; }

/* numbered steps on a highlighter, as in the app's forms */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; }
ol.steps li { counter-increment: s; position: relative; padding-left: 58px; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 42px; height: 42px; display: grid; place-items: center;
  font: 400 24px/1 var(--font-display); background: var(--yellow); border: 3px solid var(--ink); rotate: -4deg;
}
ol.steps strong { font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
ul.ticks { padding-left: 0; list-style: none; display: grid; gap: 10px; }
ul.ticks li { padding-left: 30px; position: relative; }
ul.ticks li::before { content: "✦"; position: absolute; left: 4px; color: var(--magenta); -webkit-text-stroke: 1px var(--ink); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.pair.three { grid-template-columns: repeat(3, 1fr); }
.pair figure { margin: 0; }
.hero .pair figcaption, .hero > .note { color: #fff; }
.hero > .note { display: block; margin: 12px 0 0; }
@media (max-width: 640px) { .pair, .pair.three { grid-template-columns: 1fr 1fr; } .pair:not(.three) { grid-template-columns: 1fr; } }

/* the size table: ink rules, a yellow head */
.table { overflow-x: auto; margin: 16px 0 8px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 3px solid var(--ink); font-size: 15px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--ink); }
th { background: var(--yellow); font: 400 16px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
tr:last-child td { border-bottom: 0; }
td:nth-child(2) { white-space: nowrap; font-family: var(--font-type); }

/* questions as folded notes */
details { border: 3px solid var(--ink); background: #fff; margin-top: 12px; }
details + details { margin-top: 10px; }
summary { cursor: pointer; padding: 12px 16px; font: 400 18px/1.25 var(--font-display); letter-spacing: .02em; list-style: none; text-transform: uppercase; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; font-size: 22px; }
details[open] summary { background: var(--yellow); border-bottom: 3px solid var(--ink); }
details[open] summary::after { content: "–"; }
details > p { margin: 0; padding: 12px 16px 14px; }

.cta { text-align: center; background: var(--halftone), var(--cyan); }
.cta h2 { font-size: clamp(28px, 5vw, 42px); }
.cta p { margin: 0 0 20px; }

/* ---- footer ---- */
footer { background: var(--ink); color: #fff; padding-block: 22px; font: 700 14px/1.6 var(--font-type); }
footer .wrap { display: grid; gap: 14px; }
footer nav { display: flex; gap: 8px 16px; flex-wrap: wrap; }
footer nav:first-child a { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .lead { font-size: 18px; }
  /* the menu: one row that scrolls sideways, sign-in first so it is never off-screen */
  .bar nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding: 2px 4px 8px 0; scrollbar-width: none; }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { flex: none; }
  .bar nav .btn { order: -1; rotate: 0deg; }
  .panel { box-shadow: 5px 5px 0 var(--ink); }
  .panel.tilt-l, .panel.tilt-r { rotate: 0deg; }
}