/* ============================================================
   ALLEN ORR — allenorr.com
   Fluid full-viewport grid. Labels pinned 10px from left on
   every page. Design tokens locked from Figma.
   Font: Azeret Mono (Adobe Fonts kit jzn3jzk, linked in <head>),
   Regular 400 / Medium 500.
   ============================================================ */

:root{
  /* palette */
  --paper:#ffffff;
  --ink:#000000;
  --red:#ff4800;
  --rule:#d9d9d9;

  /* type */
  --font-mono:'azeret-mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-body:15px;   --lh-body:1.35;
  --fs-label:13px;  --lh-label:1.35;
  --fs-num:32px;    --lh-num:1.35;
  --w-regular:400;  --w-medium:500;

  /* FLUID GRID — full viewport width */
  --edge:10px;        /* 10px margin, locked from Figma */
  --gutter:10px;      /* 10px gutter, locked from Figma */
  --cols:8;           /* 8 columns, locked from Figma */

  /* vertical rhythm */
  --top:80px;
  --gap-section:120px;

  /* circles (exact Figma sizes) */
  --circle-nav:140px;
  --circle-bottom:210px;

  /* fluid single-column width, for spacing things a full grid column apart */
  --track:calc((100vw - 2 * var(--edge) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--w-regular);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- the grid: every full-width row uses this ---------- */
.row{
  display:grid;
  grid-template-columns:repeat(var(--cols), 1fr);
  column-gap:var(--gutter);
  width:100%;
  padding:0 var(--edge);
}

/* column placements (fluid) — confirm exact spans from Figma */
.at-label   { grid-column:1 / 3; }   /* left labels, pinned at --edge */
.at-content { grid-column:3 / 9; }  /* reading copy */
.at-image   { grid-column:3 / 7; }  /* hero / portrait, centered-ish */
.at-full    { grid-column:1 / -1; }  /* full width (Projects) */

/* ---------- NAV ---------- */
.nav{ position:relative; padding-top:30px; display:flex; align-items:flex-start; justify-content:space-between; }
.nav .brand{ font-size:var(--fs-label); letter-spacing:0.04em; }
/* nav-right is pinned to the same content box the Projects table uses
   (full .row width, same --edge padding), so its links can line up with
   that table's columns: Projects over the Project column (starts at
   11%+24%+17%=52%), Work Together over the Agency column (starts at
   52%+30%=82%), About centered between the two. */
.nav .nav-right{ position:absolute; inset:30px 0 auto 0; }
.nav .links a, .nav-cta{ position:absolute; white-space:nowrap; }
.nav .links a:first-child{ left:52%; }
.nav .links a:last-child{ left:67%; }
.nav .links{
  font-size:var(--fs-label); letter-spacing:0.05em;
}
.nav .links a{ opacity:0.9; }
.nav .links a:hover, .nav .links a[aria-current]{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

.nav-cta{
  left:82%; color:var(--red); font-size:var(--fs-label); letter-spacing:0.05em;
}
.nav-cta:hover{ text-decoration:underline; text-underline-offset:3px; }

.hamburger{ display:none; }
.mobile-menu{ display:none; }

/* ---------- MAIN / SECTIONS ---------- */
main{ padding-top:var(--top); }
.section{ padding-bottom:var(--gap-section); align-items:start; }
.label{
  grid-column:1 / 3;
  font-size:var(--fs-label); line-height:var(--lh-label);
  letter-spacing:0.08em; text-transform:uppercase; padding-top:2px;
}
.content{ grid-column:3 / 9; }
.content.span-5{ grid-column:3 / 7; }

.prose p{ margin-bottom:1.35em; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ text-decoration:underline; text-underline-offset:2px; }
.accent{ color:var(--red); }

/* ---------- HERO / PORTRAIT (fluid, keeps 850:1100 ratio) ---------- */
.hero{ padding-bottom:var(--top); }
.hero-frame{
  grid-column:3 / 7; width:60%; margin:0 auto; aspect-ratio:850/1100; position:relative; overflow:hidden;
  background:#ececec;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1); opacity:0;
  transition:filter .5s ease, opacity .45s ease;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.hero-img.is-front{ opacity:1; }
.hero-frame.is-color .hero-img{ filter:grayscale(0); }

/* ---------- PROCESS ---------- */
.steps{ grid-column:3 / -1; }
.step{
  display:grid; grid-template-columns:158px 1fr;
  /* left edge stays put (aligned with 01); right edge bleeds past the row's
     10px margin to touch the true page edge */
  width:calc(100% + var(--edge));
  padding-bottom:40px; border-bottom:1px solid var(--rule); margin-bottom:40px;
}
.step:last-child{ margin-bottom:0; }
.step-num{ font-size:28px; line-height:var(--lh-num); }
.step-title{ font-weight:var(--w-medium); }
.step-desc{ font-weight:var(--w-regular); }

/* ---------- INVESTMENTS ---------- */
.invest{ padding-bottom:var(--gap-section); align-items:start; }
.invest .intro-wrap{ grid-column:1 / 3; }
.invest .intro{ font-size:var(--fs-body); }
.invest .col-h{ font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:44px; }

/* paired company/mission grid — same DOM order works for both breakpoints:
   2 columns on desktop (grid auto-flow fills row by row), 1 column on
   mobile so each company sits directly above its own mission. */
.invest-cols{
  grid-column:3 / 8; display:grid;
  grid-template-columns:2fr 3fr; column-gap:var(--gutter);
}
.invest-col-h-company{ grid-column:1; }
.invest-col-h-mission{ grid-column:2; }
.invest-company{ font-size:var(--fs-label); font-weight:var(--w-medium); text-transform:uppercase; line-height:30px; }
.invest-mission{ font-size:var(--fs-label); line-height:30px; }

/* ---------- bottom circle ---------- */
.close{ padding-top:40px; }
.close .circle-wrap{ grid-column:1 / -1; display:flex; justify-content:center; }
.close a{
  width:var(--circle-bottom); height:var(--circle-bottom); border-radius:50%;
  background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-label); letter-spacing:0.05em;
}
.close a:hover{ background:#e63f00; }

/* ---------- FOOTER ---------- */
footer.row{ padding:120px var(--edge) 30px; font-size:var(--fs-label); letter-spacing:0.05em; align-items:center; }
footer .f-left{ grid-column:1 / 3; }
footer .f-right{ grid-column:7 / 9; justify-self:end; }

/* ---------- PROJECTS (full width) ---------- */
.projects-wrap{ padding-bottom:var(--gap-section); }
.projects-inner{ grid-column:1 / -1; }
.projects-inner > .label{ display:block; grid-column:auto; font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:56px; }
table.projects{ width:100%; border-collapse:collapse; font-size:var(--fs-label); table-layout:fixed; }
table.projects th{
  text-align:left; font-weight:var(--w-regular); text-transform:uppercase; letter-spacing:0.06em;
  padding:0 16px 16px 0; cursor:pointer; user-select:none; white-space:nowrap;
}
table.projects th .arrow{ margin-left:6px; opacity:0; }
table.projects th[aria-sort] .arrow{ opacity:1; }
table.projects td{ padding:14px 16px 14px 0; vertical-align:top; }
table.projects tbody tr:hover{ background:#fafafa; }
/* divider lines bleed to the true viewport edge instead of stopping at the
   row's 10px margin — tr's own width already equals the row's content box,
   so extending by --edge on each side reaches exactly the viewport edge. */
table.projects tbody tr{ position:relative; }
table.projects tbody tr::after{
  content:""; position:absolute; top:0;
  left:calc(-1 * var(--edge)); width:calc(100% + 2 * var(--edge));
  border-top:1px solid var(--rule); pointer-events:none;
}
.col-client{ font-weight:var(--w-medium); }
/* column widths across the full page */
table.projects col.c-year   { width:11%; }
table.projects col.c-client { width:24%; }
table.projects col.c-role   { width:17%; }
table.projects col.c-project{ width:30%; }
table.projects col.c-agency { width:18%; }

/* ---------- ABOUT PORTRAIT ---------- */
.about-portrait{
  grid-column:3 / 7; width:60%; margin:0 auto; aspect-ratio:850/1100; position:relative; overflow:hidden; background:#ececec;
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.about-portrait .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9a9a9a; font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; }
.about-portrait .circle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--circle-bottom); height:var(--circle-bottom); border-radius:50%; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-label); letter-spacing:0.05em;
}
.about-portrait .circle:hover{ background:#e63f00; }

/* ---------- WORK TOGETHER ---------- */
.offer{ padding-bottom:12px; }
.offer + .offer{ margin-top:96px; }
.offer-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.offer-name{ font-size:var(--fs-num); line-height:var(--lh-num); }
.offer-price{ font-size:var(--fs-num); line-height:var(--lh-num); text-align:right; white-space:pre-line; }
.offer-tag{ font-weight:var(--w-medium); margin-top:24px; }
.offer-body{ margin-top:1.35em; }
.offer-list{ list-style:none; margin-top:1.35em; }
.offer-list li{ padding-left:22px; position:relative; }
.offer-list li::before{ content:"—"; position:absolute; left:0; }
.offer-cta{ display:inline-block; margin-top:1.6em; color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.section-rule{ border:none; border-top:1px solid var(--rule); margin:0 var(--edge) var(--gap-section); }
.faq-item{ margin-bottom:1.6em; }
.faq-q{ font-weight:var(--w-medium); }

/* ============================================================
   RESPONSIVE — collapse the grid, keep the 10px edge
   ============================================================ */
@media (max-width:900px){
  :root{ --top:100px; --gap-section:90px; }

  .row{ grid-template-columns:1fr; }
  .nav{ display:flex; justify-content:space-between; }
  .label, .content, .steps,
  .invest .intro-wrap, .invest-cols,
  .hero-frame, .about-portrait, .projects-inner,
  footer .f-left, footer .f-right, .section-rule, .close .circle-wrap{
    grid-column:1 / -1;
  }

  /* the 60% width is a desktop-only tweak (keeps "What I do" above the
     fold); on a phone that just makes the hero small, so go back to
     filling the column here. */
  .hero-frame, .about-portrait{ width:100%; }

  /* stack into a single column so each company sits directly above its
     own mission, instead of two separate lists */
  .invest-cols{ grid-template-columns:1fr; }
  .invest-col-h-company, .invest-col-h-mission{ display:none; }
  .invest-company{ margin-top:22px; }
  .invest-company:first-of-type{ margin-top:0; }
  .invest-mission{ margin-bottom:4px; }

  .nav .nav-right{ display:none; }
  .hamburger{
    display:block; position:absolute; top:24px; right:24px;
    width:26px; height:26px; padding:0; margin:0;
    border:none; border-radius:50%; background:var(--red); cursor:pointer;
    font-size:0; line-height:0; color:transparent;
  }

  .mobile-menu{
    display:none; position:fixed; inset:0; background:var(--paper); z-index:20;
    flex-direction:column; align-items:center; justify-content:center; gap:36px;
    font-size:20px; letter-spacing:0.04em; text-transform:uppercase;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu .close-x{ position:absolute; top:24px; right:24px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:none; border:none; font:inherit; font-size:22px; cursor:pointer; }

  .label, .invest .col-h, .invest .intro{ margin-bottom:22px; }
  .step{ grid-template-columns:72px 1fr; }
  .step-num{ font-size:26px; }

  .projects-wrap{ overflow-x:auto; }
  table.projects{ min-width:720px; }

  .offer-head{ flex-direction:column; gap:4px; }
  .offer-price{ text-align:left; }

  .close a{ width:170px; height:170px; }
  .about-portrait .circle{ width:150px; height:150px; }

  footer{ row-gap:10px; }
  footer .f-right{ justify-self:start; }
}

/* ---------- a11y ---------- */
a:focus-visible, button:focus-visible, th:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .hero-frame img{ transition:none; } }