/* Point7 Studio colour. Paper, ink, one accent (pine). Every text pair listed in readme passes WCAG AA. */
:root{
--p7-paper:#F5F3EE;--p7-paper-2:#ECE9E2;--p7-paper-3:#FBFAF7;
--p7-line:#D8D4CA;--p7-line-strong:#B9B4A7;
--p7-ink:#1C1C1A;--p7-ink-2:#4F4D47;--p7-ink-3:#67645C;
--p7-pine:#2F6B4F;--p7-pine-deep:#24553E;--p7-pine-tint:#E1EBE4;--p7-pine-light:#8CC7A4;
--p7-night:#161614;--p7-night-2:#20201D;--p7-night-line:#3A3934;--p7-chalk:#EDEBE5;--p7-chalk-2:#ABA89F;
--p7-rust:#A13A2C;--p7-rust-light:#D98B7E;
--surface-page:var(--p7-paper);--surface-raised:var(--p7-paper-3);--surface-sunken:var(--p7-paper-2);--surface-inverse:var(--p7-ink);
--text-1:var(--p7-ink);--text-2:var(--p7-ink-2);--text-3:var(--p7-ink-3);--text-inverse:var(--p7-paper);
--text-link:var(--p7-ink);--text-link-hover:var(--p7-pine);--link-underline:var(--p7-pine);
--border-1:var(--p7-line);--border-2:var(--p7-line-strong);
--accent:var(--p7-pine);--accent-hover:var(--p7-pine-deep);--accent-tint:var(--p7-pine-tint);--text-on-accent:var(--p7-paper);
--mark-ink:var(--p7-ink);--mark-point:var(--p7-pine);
--focus-ring:var(--p7-pine);--danger:var(--p7-rust);
}
[data-theme="dark"]{
--surface-page:var(--p7-night);--surface-raised:var(--p7-night-2);--surface-sunken:#1B1B19;--surface-inverse:var(--p7-chalk);
--text-1:var(--p7-chalk);--text-2:var(--p7-chalk-2);--text-3:var(--p7-chalk-2);--text-inverse:var(--p7-night);
--text-link:var(--p7-chalk);--text-link-hover:var(--p7-pine-light);--link-underline:var(--p7-pine-light);
--border-1:var(--p7-night-line);--border-2:#55534D;
--accent:var(--p7-pine-light);--accent-hover:#A6D6B9;--accent-tint:#1F2E26;--text-on-accent:var(--p7-night);
--mark-ink:var(--p7-chalk);--mark-point:var(--p7-pine-light);
--focus-ring:var(--p7-pine-light);--danger:var(--p7-rust-light);
}
/* Korean (optional): add IBM Plex Sans KR (OFL) from Google Fonts; it is already in the fallback stack. */
:root{
--font-sans:'Instrument Sans','IBM Plex Sans KR',ui-sans-serif,system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;
--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:22px;--text-xl:28px;--text-2xl:36px;--text-3xl:48px;
--leading-tight:1.15;--leading-snug:1.3;--leading-body:1.55;
--tracking-display:-0.015em;--tracking-body:0;--tracking-mono:0.02em;
--font-display:var(--weight-semibold) var(--text-2xl)/var(--leading-tight) var(--font-sans);
--font-heading:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
--font-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans);
--font-small:var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-sans);
--font-label:var(--weight-medium) var(--text-xs)/1.4 var(--font-mono);
}
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-0:0;--radius-1:3px;--radius-2:6px;--radius-pill:999px;
--border-width:1px;
--shadow-0:none;--shadow-1:0 1px 0 rgba(28,28,26,.06),0 1px 2px rgba(28,28,26,.06);--shadow-2:0 1px 0 rgba(28,28,26,.05),0 8px 24px -12px rgba(28,28,26,.18);
--ease-out:cubic-bezier(.2,.7,.2,1);
--dur-fast:120ms;
--dur-base:200ms;
--measure:34rem;--page-max:40rem;--page-gutter:24px;
--focus-ring-width:2px;--focus-ring-offset:2px;
}
/* The point - the brand's only motif. Sizes are relative to the type it sits with. */
:root{
--point-mark:0.17em;--point-gap:0.07em;--point-dot:0.2em;--point-ui:6px;--brand-space:0.394em;
--mark-tile-ink-bg:var(--p7-ink);--mark-tile-ink-fg:var(--p7-chalk);--mark-tile-ink-point:var(--p7-pine-light);
--mark-tile-paper-bg:var(--p7-chalk);--mark-tile-paper-fg:var(--p7-ink);--mark-tile-paper-point:var(--p7-pine);
--mark-tile-bg:var(--p7-ink);--mark-tile-fg:var(--p7-chalk);--mark-tile-point:var(--p7-pine-light);
--logo-min-wordmark:120px;--logo-min-mark:12px;
}
[data-theme="dark"]{--mark-tile-bg:var(--p7-chalk);--mark-tile-fg:var(--p7-ink);--mark-tile-point:var(--p7-pine)}
/* Opt-in base element styles - scoped under .p7 so consumers can adopt gradually. */
.p7{font:var(--font-body);color:var(--text-1);background:var(--surface-page);-webkit-font-smoothing:antialiased;font-feature-settings:'ss01' 0}
.p7 a{color:var(--text-link);text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-fast) var(--ease-out)}
.p7 a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
.p7 a:focus-visible,.p7 button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-1)}
.p7 .num,.p7 code{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-mono)}
.p7 ::selection{background:var(--accent-tint);color:var(--text-1)}

/* Instrument Sans latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext-400-normal.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
  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;
}
/* IBM Plex Mono latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  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;
}
/* IBM Plex Mono latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  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;
}

@media (prefers-color-scheme: dark) {
:root {

--surface-page:var(--p7-night);--surface-raised:var(--p7-night-2);--surface-sunken:#1B1B19;--surface-inverse:var(--p7-chalk);
--text-1:var(--p7-chalk);--text-2:var(--p7-chalk-2);--text-3:var(--p7-chalk-2);--text-inverse:var(--p7-night);
--text-link:var(--p7-chalk);--text-link-hover:var(--p7-pine-light);--link-underline:var(--p7-pine-light);
--border-1:var(--p7-night-line);--border-2:#55534D;
--accent:var(--p7-pine-light);--accent-hover:#A6D6B9;--accent-tint:#1F2E26;--text-on-accent:var(--p7-night);
--mark-ink:var(--p7-chalk);--mark-point:var(--p7-pine-light);
--focus-ring:var(--p7-pine-light);--danger:var(--p7-rust-light);

--mark-tile-bg:var(--p7-chalk);--mark-tile-fg:var(--p7-ink);--mark-tile-point:var(--p7-pine)
}
}

/* Letterhead composition: a large wordmark, one short letter, plain labels. */
* { box-sizing: border-box; }
body { margin: 0; }
.page {
  min-height: 100svh;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--page-gutter) 32px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(56px, 12vh, 140px);
}
.home { display: block; width: fit-content; color: var(--mark-ink); }
.wordmark { display: block; width: min(100%, 520px); height: auto; color: var(--mark-ink); }
.wordmark-point { fill: var(--mark-point); }
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  align-content: start;
  min-width: 0;
}
.letter { max-width: 30rem; }
.letter p { margin: 0 0 1em; font-size: var(--text-md); line-height: 1.55; text-wrap: pretty; }
.letter .kicker { color: var(--text-1); font-weight: var(--weight-semibold); }
.letter .signature { margin: 1.5em 0 0; color: var(--text-3); font-size: var(--text-base); }
.block { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; max-width: 30rem; }
h2 { margin: 0; font: var(--font-small); color: var(--text-3); }
.app-list { list-style: none; margin: 4px 0 0; padding: 0; }
.app-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
}
.app-row + .app-row { margin-top: 12px; }
.app-year, .status { font-size: 13px; color: var(--text-3); }
.app-name { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.app-description { grid-column: 2 / -1; color: var(--text-2); }
.status { grid-row: 1; grid-column: 3; }
.contact { margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }
footer {
  display: grid;
  row-gap: 4px;
  font: var(--font-small);
  color: var(--text-3);
  word-spacing: 0.2em; /* Instrument Sans has a very narrow space; keeps the ' · ' separator readable */
}
footer .num { font-size: 13px; word-spacing: 0; }
.colophon { word-spacing: normal; }
::selection { background: var(--accent); color: var(--text-on-accent); }
/* The square point blinks like a terminal cursor. */
@keyframes p7-cursor { 50% { opacity: 0; } }
.wordmark-point { animation: p7-cursor 1.1s steps(1, end) 0.6s infinite; }
.p7 a { text-underline-offset: 0.22em; transition: text-decoration-color 160ms, color 160ms; }
@media (min-width: 900px) {
  .wordmark { width: min(62vw, 760px); }
  /* Text sits in the right half under the wordmark, so the page reads like a letterhead. */
  main { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  main > * { grid-column: 2; }
  footer { padding-left: calc(50% + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .p7 a { transition: none; }
  .wordmark-point { animation: none; }
}