/* MOHO Green. Same look as moho.green (v21 rule, 10/11): one frame with the same margin all round, 1px ink lines,
   ink on paper, real photographs carry the colour. Two families, five text styles:
     title  the name in light capitals, once
     head   headlines
     lead   names and statements
     body   sentences
     lab    small capitals: labels, status, links
   One accent device on the page: the line with four points (filled = running today, open = still to come). */

:root {
  --paper: #f7f7f4;
  --ink: #121411;
  --soft: rgba(18, 20, 17, .62);
  --m: clamp(16px, 4.6vw, 68px);
  --cp: clamp(16px, 1.8vw, 28px);
  --line: 1px solid var(--ink);
  --sans: "Onest", system-ui, -apple-system, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: 64px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- the five text styles ---- */
.title { margin: 0; padding: var(--cp) var(--cp) calc(var(--cp) * .55); display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; border-bottom: var(--line); font-weight: 300; text-transform: uppercase; letter-spacing: -0.04em; line-height: .9; font-size: min(calc((100vw - 2 * var(--m) - 2 * var(--cp)) / 7.4), 190px); gap: .25em; }
.head { margin: 0; font-weight: 400; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.head em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; }
.lead { margin: 0; font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.body { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.lab { margin: 0; font-weight: 500; font-size: 12px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.soft { color: var(--soft); }

/* ---- top bar ---- */
.bar { position: sticky; top: 0; z-index: 40; background: var(--paper); padding-inline: var(--m); }
.bar-in { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--cp); border: var(--line); border-top: 0; font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.bar-name { display: flex; gap: .8em; white-space: nowrap; }
.bar-name b { font-weight: 600; letter-spacing: .14em; }
.bar-nav { display: none; gap: clamp(16px, 2vw, 30px); margin-left: auto; }
.bar-nav a { white-space: nowrap; }
.bar-nav a:hover { opacity: .55; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: calc(-1 * var(--cp) - 1px); top: calc(100% + 17px); display: grid; min-width: 220px; background: var(--paper); border: var(--line); }
.menu nav a { padding: 14px var(--cp); border-top: var(--line); }
.menu nav a:first-child { border-top: 0; }
@media (min-width: 1024px) { .bar-nav { display: flex; } .menu { display: none; } }
@media (max-width: 760px) { .bar-name span { display: none; } }

/* ---- the frame and its cells ---- */
.frame { margin: 0 var(--m) var(--m); border: var(--line); border-top: 0; }
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-right: -1px; }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: var(--cp); border-right: var(--line); border-bottom: var(--line); }
.grid.four > .cell { grid-column: span 1; }
.cell.w3 { grid-column: span 3; } .cell.w4 { grid-column: span 4; } .cell.w6 { grid-column: 1 / -1; }
.cell.between { justify-content: space-between; }
.cell.line { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.cell.line > header { flex: 0 0 100%; }
.cell.line .lead { max-width: 30em; }
header.lab { display: flex; justify-content: space-between; gap: 16px; }
header.lab span:last-child:not(:first-child) { text-align: right; }
.more { margin-top: auto; align-self: flex-start; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.stack { display: grid; gap: 14px; }

/* rows: a name and one short line, ruled */
.cell.flush { padding-bottom: 0; gap: 0; }
.cell.flush > header { padding-bottom: var(--cp); }
.rows { list-style: none; display: grid; margin: 0 calc(-1 * var(--cp)); padding: 0; }
.rows > li { border-top: var(--line); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, .55fr); align-items: baseline; gap: 6px clamp(16px, 3vw, 48px); padding: clamp(18px, 2vw, 24px) var(--cp); }
.rows > li > .lab:last-child { text-align: right; white-space: nowrap; }
.rows.three > li { grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1.15fr); }

/* the one picture */
.tile { position: relative; overflow: hidden; background: #e7e7e1; flex: 1 1 auto; min-height: clamp(280px, 26vw, 420px); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* four points on one line: filled where it runs today, open where it is still to come */
.dot { position: relative; height: 11px; margin: 0 calc(-1 * var(--cp)); }
.dot::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--ink); }
.dot.first::before { left: var(--cp); }
.dot.last::before { right: calc(100% - var(--cp) - 11px); }
.dot i { position: absolute; left: var(--cp); top: 0; width: 11px; height: 11px; background: var(--ink); }
.dot.open i { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }

/* actions */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap; }
.pill:hover { opacity: .86; }
.links { display: grid; gap: 8px; }
.links a:hover { opacity: .55; }
.base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 14px var(--cp); }

/* phones and small tablets: one column, same rule */
@media (max-width: 900px) {
  body, .body { font-size: 16px; }
  .grid, .grid.four { grid-template-columns: minmax(0, 1fr); }
  .cell, .cell.w3, .cell.w4, .grid.four > .cell { grid-column: 1 / -1; }
  .rows > li { grid-template-columns: minmax(0, 1fr) auto; }
  .rows > li > .body { grid-column: 1 / -1; grid-row: 2; }
  .rows.three > li { grid-template-columns: 2.2em minmax(0, 1fr); }
  .rows.three > li > .body { grid-column: 2; grid-row: auto; }
  .dot { display: none; }
  .tile { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---- additions 10/22: first-screen action, phone contact button, use cases, FAQ, inner pages ---- */
.fig { margin: 0; }
.acts .more { margin: 0; }
.faq { list-style: none; display: grid; margin: 0 calc(-1 * var(--cp)); padding: 0; }
.faq > li { border-top: var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: clamp(18px, 2vw, 24px) var(--cp); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: rgba(18, 20, 17, .04); }
.faq details > .body { padding: 0 var(--cp) clamp(18px, 2vw, 24px); }
.fab { display: none; }
@media (max-width: 900px) {
  body { padding-bottom: 76px; }
  .fab { display: inline-flex; position: fixed; z-index: 50; right: calc(var(--m) + 12px); bottom: calc(14px + env(safe-area-inset-bottom)); height: 42px; padding: 0 18px; font-size: 14px; }
}
.crumb { display: flex; gap: .6em; padding: 14px var(--cp); border-bottom: var(--line); }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.doc { max-width: 46em; }
.doc h3 { margin: 26px 0 8px; font-weight: 500; font-size: 17px; }
.doc p, .doc li { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 1.2em; }
.draft { padding: 14px var(--cp); border-bottom: var(--line); background: #ecece6; }
html[lang="ko"] body, .ko { word-break: keep-all; overflow-wrap: anywhere; }
.ko .body, .ko.doc { line-height: 1.7; }
.under { border-bottom: 1px solid var(--ink); }
.under:hover { opacity: .6; }
@media (min-width: 1024px) { .menu-home { display: none; } }