/* Chobial — the darkroom, for every page that isn't a home page: the blog, guide, lessons,
   comparisons, support, press, privacy, the shared-film page and 404. Loaded after darkroom.css,
   which carries the tokens, type, nav, footer, buttons, FAQ and the language banner. */

:root {
  --ink: color-mix(in srgb, var(--paper) 88%, var(--darkroom)); /* long-form body text */
  --faint: #8a8377;    /* sources, notes and other fine print */
  --measure: 68ch;
  /* Old names, for inline styles that still use them */
  --accent: var(--mask);
  --muted: var(--paper-dim);
  --line: var(--rule);
  --text: var(--paper);
  --dim: var(--faint);
}

main { display: block; }
main h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.02; text-wrap: balance; margin: 0 0 .35em; }
:lang(ja) main h1, :lang(ko) main h1, :lang(zh) main h1 { line-height: 1.2; }
.eyebrow { display: block; margin: 0 0 18px; font: 500 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--mask); }
:lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(zh) .eyebrow { letter-spacing: .06em; }
a.eyebrow:hover { text-decoration: none; color: var(--paper); }
.meta { font: .8rem/1.6 var(--mono); letter-spacing: .02em; color: var(--paper-dim); }
.meta a { color: var(--paper-dim); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.meta a:hover { color: var(--paper); }
.muted { color: var(--paper-dim); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lede { max-width: var(--measure); }

/* The safelight over the top of each page, as on the home page's chapters */
.page-head, .post, .doc, .cta { position: relative; }
.page-head::before, .post::before, .doc::before, .cta::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: 480px; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 25% 0%, rgb(217 121 43 / .11), transparent 70%); }

/* Section heads on index pages: support, the blog, lessons */
.page-head { padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); }
.page-head .lede { margin-bottom: 0; }
section.tight { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--rule); }
.page-head + section.tight:has(.posts, .lessons) { border-top: 0; padding-top: 8px; }
section.tight > .wrap > h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* Cards: a print on the tray */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 32px; }
.card { display: block; background: var(--tray); border: 1px solid var(--rule); border-radius: 2px; padding: 20px 22px; color: var(--paper); }
a.card:hover { text-decoration: none; border-color: var(--paper-dim); }
a.card:hover h3 { color: var(--mask); }
.card h3 { font: 500 1.15rem/1.25 var(--display); letter-spacing: -0.015em; margin: 0 0 6px; color: var(--paper); }
.card p { color: var(--paper-dim); font-size: .95rem; margin: 0; }

/* Long-form: posts, tutorials, lessons, comparisons */
.post { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 96px; }
.post article > h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.post article > .meta { margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.post article > .lede, .doc article > .lede { font-size: 1.2rem; line-height: 1.55; color: var(--paper); }
.post article, .doc article { font-size: 1.06rem; line-height: 1.7; }
:is(.post, .doc) article :is(p, li) { color: var(--ink); }
:is(.post, .doc) article strong { color: var(--paper); font-weight: 600; }
:is(.post, .doc) article :is(h2, h3) { scroll-margin-top: 80px; }
:is(.post, .doc) article h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.12; margin: 2.2em 0 .6em; }
:is(.post, .doc) article h3 { font: 500 1.25rem/1.25 var(--display); letter-spacing: -0.015em; margin: 1.8em 0 .5em; }
:is(.post, .doc) article :is(ol, ul) { padding-left: 1.3em; }
:is(.post, .doc) article li { margin-bottom: .5em; }
:is(.post, .doc) article li::marker { color: var(--paper-dim); font-family: var(--mono); font-size: .9em; }
:is(.post, .doc) article p a, :is(.post, .doc) article li a, :is(.post, .doc) article td a { text-decoration: underline; text-decoration-color: rgb(217 121 43 / .45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(.post, .doc) article p a:hover, :is(.post, .doc) article li a:hover { text-decoration-color: var(--mask); }
:is(.post, .doc, .page-head) code { font: .86em var(--mono); background: var(--tray); border: 1px solid var(--rule); border-radius: 2px; padding: .08em .35em; color: var(--paper); }
:is(.post, .doc) hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
:is(.post, .doc) blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--mask); font: 400 1.2rem/1.5 var(--serif); color: var(--paper); }

/* Figures: hung as prints, captioned in the mono of an edge print */
:is(.post, .doc) figure { margin: 32px 0; }
:is(.post, .doc) figure img { width: 100%; border-radius: 0; background: var(--tray); }
:is(.post, .doc) figcaption, .doc .prints figcaption { margin-top: 10px; font: .78rem/1.55 var(--mono); letter-spacing: .02em; color: var(--paper-dim); text-align: left; }
.post .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0; }
.post .pair figure { margin: 0; }
.post .pair.trio { grid-template-columns: repeat(3, 1fr); }
.post .shot { max-width: 260px; }
.post .shot img { border-radius: 26px; border: 1px solid var(--rule); }
@media (min-width: 1000px) { .post article > figure:has(> img) { margin-left: -40px; margin-right: -40px; } }

/* Diagrams: drawn in the darkroom's colours whatever the lesson's SVG says */
.diagram { margin: 32px 0; }
.diagram svg { width: 100%; height: auto; display: block; background: var(--tray); border: 1px solid var(--rule); }
.diagram svg text { font: 500 13px var(--sans); fill: var(--paper-dim); }
.diagram svg .lbl { fill: var(--paper); font-weight: 600; }
.diagram [fill="#ff9938"] { fill: var(--mask); }
.diagram [stroke="#ff9938"] { stroke: var(--mask); }
.diagram [fill="#3fb3a8"] { fill: var(--paper); }
.diagram [stroke="#3fb3a8"] { stroke: var(--paper); }
.diagram [stroke="#2a2a31"] { stroke: var(--rule); }
.diagram [fill="#2a2a31"] { fill: var(--rule); }
.diagram [fill="#75706a"] { fill: #6f685e; }
.diagram [stroke="#75706a"] { stroke: #6f685e; }
@media (max-width: 600px) { .diagram { overflow-x: auto; } .diagram svg { min-width: 540px; } }

/* Tables, set like the data sheet */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.table-wrap table { margin: 0; }
table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95rem; line-height: 1.5; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 500 .7rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim); border-bottom-color: #4a453e; }
:is(.post, .doc) article td { color: var(--ink); }
tr:first-child th { padding-top: 0; }

/* Panels inside an article */
.tip { margin: 24px 0; padding: 14px 18px; background: var(--tray); border-left: 2px solid var(--mask); color: var(--paper-dim); font-size: .98rem; }
.tip strong { color: var(--paper); }
.recipe { margin: 32px 0; padding: clamp(18px, 3vw, 28px); background: var(--tray); border: 1px solid var(--rule); }
.recipe h3 { margin-top: 0 !important; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.recipe .table-wrap { margin: 12px 0 0; }
.recipe table { font: .82rem/1.5 var(--mono); }
.recipe td { padding: 7px 12px 7px 0; }
.recipe td:first-child { color: var(--paper-dim) !important; width: 45%; }
.recipe .qr { display: flex; gap: 18px; align-items: center; margin-top: 16px; }
.recipe .qr img { width: 150px; background: #fff; }
.try { margin: 32px 0; padding: 18px 22px 8px; background: var(--tray); border: 1px solid var(--rule); border-top: 2px solid var(--mask); }
.try h3 { margin-top: 0 !important; color: var(--paper); }
.try h3::before { content: "Try it · "; color: var(--mask); font-family: var(--mono); font-size: .8em; text-transform: uppercase; letter-spacing: .08em; }

/* Comparisons */
.vs table { font-size: .9rem; min-width: 640px; }
.vs th, .vs td { padding: 10px 10px; }
.vs th:first-child, .vs td:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; background: var(--darkroom); color: var(--paper); padding-left: 0; }
.vs .us { background: rgb(217 121 43 / .08); }
.vs th.us { color: var(--mask); }
.vs td.y { color: var(--paper); }
.vs td.p { color: var(--paper-dim); }
.vs td.n { color: var(--faint); }
.vs sup { color: var(--faint); }
@media (min-width: 1000px) { .vs.wide { width: min(1080px, calc(100vw - 80px)); position: relative; left: 50%; transform: translateX(-50%); } }
.notes, .sources { font-size: .86rem; color: var(--faint); }
.notes { padding-left: 1.3em; }
.post article .notes li, .post article .sources { color: var(--faint); margin-bottom: .3em; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 24px 0; }
.picks div { background: var(--tray); border: 1px solid var(--rule); padding: 16px 18px; }
.picks div:last-child { border-color: rgb(217 121 43 / .5); }
.picks h3 { margin: 0 0 6px !important; font-size: 1.05rem !important; }
.picks p { margin: 0; font-size: .93rem; color: var(--paper-dim) !important; }

/* FAQ inside a post or on support: darkroom.css draws it, these set it in the column */
.post .faq, .page-head + section .faq, section.tight .faq { max-width: none; margin: 16px 0 0; }
section.tight .faq { max-width: 52em; margin-top: 24px; }
.post .faq summary { font-size: 1.15rem; }
.post .faq details p { color: var(--ink); }

/* The card at the end of every post */
.post-cta { display: flex; gap: 22px; align-items: flex-start; margin: 64px 0 24px; padding: clamp(20px, 3vw, 32px); background: var(--tray); border: 1px solid var(--rule); border-top: 2px solid var(--mask); }
.post-cta img { flex: 0 0 72px; border-radius: 16px; }
.post-cta h2 { margin: 0 0 .4em !important; font-size: 1.6rem !important; }
.post-cta p { color: var(--paper-dim) !important; margin: 0; }
.post-cta .actions { margin-top: 20px; }
.related { margin-top: 56px; }
.related h2 { font: 500 .74rem/1.4 var(--mono) !important; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-dim); margin: 0 0 4px !important; }
.related .grid { margin-top: 14px; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.related .card { background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 16px 0; }
.related .card p { color: var(--paper-dim) !important; }
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 48px 0 0; }
.lesson-nav .card .meta { color: var(--mask); }
.lesson-nav .card h3 { margin: 6px 0 0 !important; font-size: 1.1rem !important; }
.lesson-nav .next { grid-column: 2; text-align: right; }

/* The blog index: a contact sheet, one row a post */
.posts { display: grid; border-top: 1px solid var(--rule); }
.post-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); color: var(--paper); }
.post-card.text-only { grid-template-columns: minmax(0, 1fr); }
.post-card:hover { text-decoration: none; }
.post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tray); }
.post-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; margin: 6px 0 8px; }
.post-card p { color: var(--paper-dim); margin: 0; max-width: var(--measure); }
.post-card .meta { margin: 0; }
.post-card:hover h2 { color: var(--mask); }

/* Lessons, in order */
.lessons { list-style: none; padding: 0; margin: 0 0 32px; display: grid; border-top: 1px solid var(--rule); }
.lessons a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); color: var(--paper); }
.lessons a:hover { text-decoration: none; }
.lessons a:hover h2 { color: var(--mask); }
.lessons .num { font: 500 1.6rem/1 var(--mono); color: var(--mask); }
.lessons h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; }
.lessons p { color: var(--paper-dim); margin: 0; max-width: var(--measure); }

/* Documents with a table of contents: the guide, press kit, privacy */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 96px; }
.doc nav.toc { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; font-size: .9rem; border-top: 1px solid var(--rule); padding-top: 14px; }
.doc nav.toc strong { display: block; margin: 0 0 8px; font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--paper-dim); }
.doc nav.toc a { display: block; padding: 5px 0; color: var(--paper-dim); line-height: 1.35; }
.doc nav.toc a:hover { color: var(--paper); text-decoration: none; }
.doc article { max-width: var(--measure); min-width: 0; }
.doc article h2:first-of-type { margin-top: 1.4em; }
.doc .step-shot { display: flex; gap: 28px; align-items: flex-start; margin: 24px 0; }
.doc .step-shot > div:last-child { flex: 1; min-width: 0; }
.doc .prints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; margin: 24px 0; }
.doc .prints figure { margin: 0; }
.doc .prints img { width: 100%; height: auto; box-shadow: 0 18px 40px -18px #000; }
.doc .grid { margin-top: 16px; }

/* A phone, for app screenshots */
.phone { position: relative; max-width: 320px; margin: 0 auto; padding: 8px; border-radius: 44px; background: #050404; border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px #000; }
.phone img { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; border-radius: 36px; background: #000; }
.doc .step-shot .phone { flex: 0 0 210px; max-width: 210px; margin: 0; padding: 7px; border-radius: 34px; }
.doc .step-shot .phone img { border-radius: 28px; }

/* Press downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 24px 0; }
.downloads a { display: block; padding: 10px; background: var(--tray); border: 1px solid var(--rule); color: var(--paper-dim); font: .74rem/1.45 var(--mono); letter-spacing: .02em; }
.downloads a:hover { border-color: var(--paper-dim); color: var(--paper); text-decoration: none; }
.downloads img { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; margin-bottom: 8px; background: #000; }
.downloads img.sq { aspect-ratio: 1; }

/* 404, and the shared-film card */
.cta { text-align: center; padding: 96px 0; }
.cta img.icon { width: 96px; height: 96px; margin: 0 auto 28px; border-radius: 22px; }
.cta h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
.cta .lede { margin-left: auto; margin-right: auto; }
.cta .actions { justify-content: center; margin-top: 24px; }

/* Footer: the tagline where the home page has the maker's line */
footer.site .maker { font-size: 1.2rem; }

@media (max-width: 880px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doc nav.toc { position: static; max-height: none; padding: 14px 16px; border: 1px solid var(--rule); background: var(--tray); columns: 2 180px; column-gap: 24px; }
  .doc nav.toc strong { column-span: all; }
  .doc nav.toc strong + a { break-before: avoid; }
  .doc .step-shot { flex-direction: column; }
  .doc .step-shot .phone { flex-basis: auto; width: 200px; }
}
@media (max-width: 720px) {
  .post .pair { grid-template-columns: 1fr; }
  .post .pair.trio { grid-template-columns: 1fr 1fr; }
  .post-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .post-cta { flex-direction: column; }
  .lessons a { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .lessons .num { font-size: 1.25rem; }
}
@media (max-width: 640px) { .doc .prints { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lesson-nav { grid-template-columns: 1fr; } .lesson-nav .next { grid-column: 1; } }

/* Hover is the only motion here, and only for those who don't mind it */
@media (prefers-reduced-motion: no-preference) {
  a.card, .post-card h2, .lessons h2, .card h3, .downloads a { transition: color .2s, border-color .2s; }
  .post-card img { transition: filter .5s cubic-bezier(.2,.7,.2,1); }
  .post-card:hover img { filter: brightness(1.06) contrast(1.04); }
}
/* Cards inside an article keep their own spacing, not the prose's */
:is(.post, .doc) article .card h3 { margin-top: 0; }

/* Five links in the longer languages don't fit beside the icon on a phone: the icon keeps its
   place, the links scroll inside the bar rather than the page, and on the narrowest phones the
   icon alone is the way home. */
@media (max-width: 560px) {
  .nav .brand { flex: none; }
  .nav-links { min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 400px) { .nav-links > a:first-child { display: none; } }