/* Brittany Sumarsono — site styles
   Built from the Brittany Sumarsono design system (colors, type, spacing and borders below are its tokens).
   Change a color or size in :root and it updates everywhere. */
/* Layout: a two-column hero (ink headline on paper + photo with a dot grid and scroll-driven pencil), then stacked sections on paper. Single light theme by design. */
:root {
  color-scheme: light;
  --paper: #f1efea;
  --paper-raised: #ffffff;
  --ink: #141414;
  --ink-muted: #4a4640;
  --cobalt: #0a3a9e;
  --on-cobalt: #ffffff;
  --orange: #ff5a22;
  --amber: #ffa514;
  --cyan: #4debe2;
  --green: #2fbf62;
  --font-display: "Bree Serif", Georgia, serif;
  --font-sans: Figtree, "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --grid-line: #e3dfd6;
  --wood: #efcf9f;
  --border-width: 2px;
  --stripe-width-lg: 8px;
}
* { box-sizing: border-box; }
img { max-width: 100%; }
html { background: var(--paper); overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--space-6); padding-block: calc(var(--space-16) + var(--space-4)) var(--space-24); display: flex; flex-direction: column; gap: var(--space-24); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: 40px; line-height: 46px; display: flex; align-items: center; gap: var(--space-4); }
h2::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--cyan); border: var(--border-width) solid var(--ink); }
h3 { font-size: 20px; line-height: 26px; }
p { margin: 0; }
strong { font-weight: 600; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Hero */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; top: calc(var(--space-24) * -1); bottom: calc(var(--space-12) * -1); left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }

.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.plate { position: absolute; z-index: 2; left: calc(var(--space-6) * -1); bottom: calc(var(--space-8) * -1); max-width: 88%; background: var(--amber); color: var(--ink); border: var(--border-width) solid var(--ink); padding: var(--space-2) var(--space-4); }
.plate-name { display: block; font-family: var(--font-display); font-size: 18px; line-height: 24px; }
.plate-role { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.hero h1 { font-size: 72px; line-height: 72px; letter-spacing: -0.01em; color: var(--ink); max-width: 9.5em; }
.dots { position: absolute; bottom: -52px; right: -52px; width: 96px; height: 72px; pointer-events: none; background-image: radial-gradient(circle, var(--orange) 4.5px, transparent 5px); background-size: 24px 24px; }
.intro { font-size: 19px; line-height: 30px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.photo { position: relative; margin: var(--space-8); max-width: 420px; justify-self: end; width: calc(100% - var(--space-8) * 2); }
.photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: var(--border-width) solid var(--ink); }

/* The pencil: brand colors recast as a pencil travelling a track just outside the photo frame on scroll.
   Orange eraser, cobalt ferrule, long amber body, a wood-and-graphite tip. */
.snake { position: absolute; inset: calc(var(--space-8) * -1); width: calc(100% + var(--space-8) * 2); height: calc(100% + var(--space-8) * 2); pointer-events: none; overflow: visible; }
.snake path { fill: none; stroke-width: 16px; stroke-linecap: butt; stroke-linejoin: miter; }
.snake .s-eraser { stroke: var(--orange); }
.snake .s-ferrule { stroke: var(--cobalt); }
.snake .s-body { stroke: var(--amber); }
.snake .tip-wood { fill: var(--wood); }
.snake .tip-lead { fill: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; padding: var(--space-3) var(--space-6); border: var(--border-width) solid var(--ink); background: var(--paper-raised); color: var(--ink); text-decoration: none; }
.btn:hover { background: var(--paper); }
.btn-primary { background: var(--cobalt); color: var(--on-cobalt); }
.btn-primary:hover { background: var(--ink); }

/* Sections */
section { display: flex; flex-direction: column; gap: var(--space-8); }
.hero { margin-bottom: var(--space-4); }
.blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block { background: var(--paper-raised); border: var(--border-width) solid var(--ink); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.blocks .block + .block { border-left: none; }

/* Ways to work together: three outlined plans; facts use the fact-label / fact-value pair. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { background: var(--paper-raised); border: var(--border-width) solid var(--ink); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.plans .plan + .plan { border-left: none; }
.plan-head { align-self: stretch; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2); padding: var(--space-4) var(--space-6); background: var(--band); border-bottom: var(--border-width) solid var(--ink); }
.band-cobalt { --band: var(--cobalt); }
.band-orange { --band: var(--orange); }
.band-amber { --band: var(--amber); }
.plan-facts { margin: auto 0 0; padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.plan-facts dt { font-size: 13px; line-height: 18px; font-weight: 600; }
.plan-facts dd { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 23px; }
.plans-note { color: var(--ink-muted); }
.plans-note a { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.plans-note a:hover { color: var(--ink); }
.block { position: relative; padding-left: calc(var(--space-6) + 14px); }
.block::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; border-right: var(--border-width) solid var(--ink); background: var(--mark); }
.mark-cobalt { --mark: var(--cobalt); }
.mark-orange { --mark: var(--orange); }
.mark-amber { --mark: var(--amber); }

.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.case-label { background: var(--amber); border: var(--border-width) solid var(--ink); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.case-body { background: var(--paper-raised); border: var(--border-width) solid var(--ink); border-left: none; padding: var(--space-6) var(--space-8); max-width: none; }
.case-meta { margin: auto 0 0; padding-top: var(--space-6); width: 100%; display: flex; flex-direction: column; }
.case-meta { gap: var(--space-4); }
.case-meta div { display: flex; flex-direction: column; gap: 2px; }
.case-meta dt { font-size: 13px; line-height: 18px; font-weight: 600; }
.case-meta dd { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 23px; }
.case-label h3 { font-size: 28px; line-height: 34px; }
.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 40em; }
.case-list li { position: relative; padding-left: var(--space-6); }
.case-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.tag { display: inline-block; font-size: 14px; line-height: 20px; font-weight: 600; padding: 2px var(--space-2); border: var(--border-width) solid var(--ink); background: var(--paper-raised); }
.tag-amber { background: var(--amber); }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
.about-photo { display: block; width: 100%; height: auto; margin-top: var(--space-4); border: var(--border-width) solid var(--ink); }
.about-figure { position: relative; margin: var(--space-8) var(--space-8) var(--space-4); }
.about-figure .about-photo { position: relative; margin: 0; }
.squiggle { position: absolute; inset: calc(var(--space-8) * -1); width: calc(100% + var(--space-8) * 2); height: calc(100% + var(--space-8) * 2); pointer-events: none; overflow: visible; }
.squiggle path { fill: none; stroke-width: 7px; stroke-linecap: butt; stroke-linejoin: round; }
.squiggle .q-coral { stroke: var(--orange); }
.squiggle .q-cobalt { stroke: var(--cobalt); }
.squiggle .q-gold { stroke: var(--amber); }
.about-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.about p { font-size: 19px; line-height: 30px; max-width: 34em; }

.contact { background: var(--cyan); border: var(--border-width) solid var(--ink); padding: var(--space-12) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; }
.contact h2::before { display: none; }
.about { position: relative; isolation: isolate; }
.about-dots { position: absolute; z-index: -1; right: 0; bottom: calc(var(--space-24) * -1 + 12px); width: 144px; height: 72px; pointer-events: none; background-image: radial-gradient(circle, var(--amber) 4.5px, transparent 5px); background-size: 24px 24px; }
.contact p { color: var(--ink); margin-top: var(--space-3); }
.email { font-family: var(--font-display); font-size: 22px; color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-right: var(--space-2); vertical-align: 2px; }
footer { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
footer a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); }
  .hero h1 { font-size: 52px; line-height: 54px; }
  .dots { right: -20px; bottom: -56px; }
  .blocks { grid-template-columns: minmax(0, 1fr); }
  .blocks .block + .block { border-left: var(--border-width) solid var(--ink); border-top: none; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plans .plan + .plan { border-left: var(--border-width) solid var(--ink); border-top: none; }
  .case, .about { grid-template-columns: minmax(0, 1fr); }
  .case-body { border-left: var(--border-width) solid var(--ink); border-top: none; padding: var(--space-6); }
  .about-dots { bottom: calc(var(--space-16) * -1 + 8px); height: 48px; }
  .contact { grid-template-columns: minmax(0, 1fr); align-items: start; padding: var(--space-8) var(--space-6); }
  h2 { font-size: 32px; line-height: 38px; }
  h2::before { width: 20px; height: 20px; }
  .wrap { padding-inline: var(--space-4); padding-block: var(--space-12) var(--space-16); gap: var(--space-16); }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .photo { justify-self: start; max-width: 340px; margin: var(--space-8) var(--space-8) var(--space-8) 30px; }
  .email { font-size: 18px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 42px; line-height: 44px; }
}