/* Grid edition, built like ryse.eu: every section is a frame of rows and cells.
   Cells draw their own hairlines, so every line continues exactly from section to section.
   Inside a cell content keeps one padding and sits vertically centred; marks and links are
   centred both ways, headings and text stay left aligned on the same inner edge. */
:root {
  --rule: #e1e1e1;
  --rule-dark: rgba(255, 255, 255, .14);
  --frame-gap: clamp(16px, 3.4vw, 48px);  /* space between viewport edge and outer line */
  --frame-max: 1376px;
  --pad: clamp(20px, 2vw, 28px);           /* one inner padding for every cell */
  --over: 32px;                            /* horizontal lines run past the outer lines */
  --sec: clamp(64px, 7vw, 104px);          /* empty frame space above and below a section */
}

/* Frame: the outer vertical lines, identical width in every section */
.frame {
  position: relative;
  width: calc(100% - 2 * var(--frame-gap));
  max-width: var(--frame-max);
  margin: 0 auto;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding-block: var(--sec);
}
.contact .frame, .footer .frame { border-color: var(--rule-dark); }

/* Rows: 12 columns, no gap, a top line that overhangs the frame */
.row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.row::before { content: ''; position: absolute; top: 0; left: calc(var(--over) * -1); right: calc(var(--over) * -1); border-top: 1px solid var(--rule); pointer-events: none; }
.frame > .row:last-child::after, .frame > ul > li:last-child > .row::after { content: ''; position: absolute; bottom: 0; left: calc(var(--over) * -1); right: calc(var(--over) * -1); border-top: 1px solid var(--rule); pointer-events: none; }
.contact .row::before, .contact .row::after, .footer .row::before, .footer .row::after { border-color: var(--rule-dark); }

/* Cells */
.cell { position: relative; padding: var(--pad); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--rule); }
.contact .cell + .cell, .footer .cell + .cell { border-left-color: var(--rule-dark); }
.cell.center { align-items: center; text-align: center; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: span 12; }
.cell.head { min-height: 88px; }

/* Neutralise the layout rules of the base edition that these cells replace */
.wrap, .g12 { all: unset; }
.section-head, .thesis-grid, .product-list > li { border: 0 !important; padding: 0 !important; }
.section-head::before, .section-head::after, .thesis-grid li + li::before { content: none !important; }
.section-head .label, .section-head .h2, .about-label, .about-statement, .about-cta, .contact-head, .form, .footer-claim, .footer-links,
.product-text, .product-mark, .product-go, .product-desc { grid-row: auto !important; margin: 0; max-width: none; justify-self: auto; align-self: auto; }
.s3 { grid-column: span 3 !important; } .s4 { grid-column: span 4 !important; } .s8 { grid-column: span 8 !important; } .s9 { grid-column: span 9 !important; } .s12 { grid-column: span 12 !important; }
.about, .thesis, .products, .contact { padding: 0 !important; }
.footer-top, .footer-bar { padding: 0 !important; border: 0 !important; }
.footer-top::before, .footer-bar::before { content: none; }

/* About */
.statement-cell { padding-block: calc(var(--pad) * 2); }
.about-statement { margin: 0 !important; }
.about-cta { min-height: 104px; }

/* Thesis: four equal cells, content block centred vertically, text left */
.thesis-grid li { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: calc(var(--pad) * 1.4) var(--pad) !important; }
.thesis-grid .idx { margin: 0 0 18px; }
.thesis-grid h3 { max-width: 14ch; }
.thesis-grid p { max-width: 30ch; padding: 0; }

/* Products: text | mark | link, each centred in its cell */
.product { min-height: 0; padding: 0 !important; align-items: stretch; }
.product-text { gap: 0; }
.product-text .idx { margin-bottom: 18px; }
.product-name { margin: 0 0 8px; }
.product-status { margin: 0 0 14px; }
.product-desc { padding: 0 !important; color: #555; }
.product-mark { padding-block: calc(var(--pad) * 2); }
.product-mark img { width: min(220px, 100%); }
.product-go { justify-items: center; }
.product-cta { margin: 0; }

/* Contact */
.contact-head .statement { margin: 0; max-width: 16ch; }
.form-cell { justify-content: center; }
.form { padding: 0 !important; }
.form .field:first-of-type label { padding-top: 0; }

/* Footer */
.footer { padding: 0; }
.footer .frame { padding-bottom: 0; }
.footer-claim { margin: 0; }
.footer-links { display: grid; gap: 0; justify-items: start; }
.footer-bar .cell { padding-block: 14px; }
.footer-bar .cell { font-size: 14px; color: var(--grey-2); }
.footer-bar a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.wordmark-cell { padding-block: var(--pad) var(--pad); }
.footer-wordmark { padding: 0; margin: 0; }

/* Hero: same frame, lines run the full height of the pinned stage */
.hero-sticky { position: sticky; }
.frame-lines { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 2 * var(--frame-gap)); max-width: var(--frame-max); border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.hero-stage { position: absolute; inset: 0; width: auto; max-width: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.hero-big { width: min(calc(100% - 2 * var(--frame-gap) - 2 * var(--pad)), calc(var(--frame-max) - 2 * var(--pad))); }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 0; border-color: rgba(255,255,255,.12); padding: 0 0 clamp(20px, 2.4vw, 32px); }
.hero .row::before, .hero .row::after { border-color: rgba(255,255,255,.12); }
.hero .cell + .cell { border-left-color: rgba(255,255,255,.12); }
.hero-copy { padding-block: calc(var(--pad) * 1.4); }
.hero-thesis { margin: 0; }
.hero-meta { margin: 0; padding: 0; border: 0; }
.hero-meta .cell { min-height: 64px; }
.hero-meta .coord { color: var(--grey-2); }
.hero-meta .scroll-cue { margin: 0; color: var(--white); }
.hero-bottom .row:last-child::after { content: ''; position: absolute; bottom: 0; left: calc(var(--over) * -1); right: calc(var(--over) * -1); border-top: 1px solid rgba(255,255,255,.12); }

/* Nav box edges sit exactly on the frame lines */
.nav { padding-left: 0; padding-right: 0; }
.nav-inner { width: calc(100% - 2 * var(--frame-gap)); max-width: var(--frame-max); padding-left: var(--pad); }
@media (min-width: 1024px) {
  .nav-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; padding-right: 0; }
  .brand-slot { grid-column: 1 / span 4; }
  .nav-links { grid-column: 5 / span 4; margin-left: calc(var(--pad) - 1px); gap: 32px; }
  .nav-actions { grid-column: 9 / -1; margin-right: 0; }
}

/* Tablet: thesis 2 x 2, products and contact keep their thirds */
@media (min-width: 721px) and (max-width: 1023px) {
  .s3 { grid-column: span 6 !important; }
  .thesis-grid li:nth-child(3) { border-left: 0; }
  .thesis-grid li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .thesis .section-head .cell.s3 { grid-column: span 4 !important; }
  .thesis .section-head .cell.s9 { grid-column: span 8 !important; }
}

/* Phone: one column, cells stack and are separated by lines */
@media (max-width: 720px) {
  :root { --over: 8px; --frame-gap: 12px; }
  .s3, .s4, .s8, .s9, .s12 { grid-column: 1 / -1 !important; }
  .cell + .cell { border-left: 0; border-top: 1px solid var(--rule); }
  .contact .cell + .cell, .footer .cell + .cell { border-top-color: var(--rule-dark); }
  .hero .cell + .cell { border-top-color: rgba(255,255,255,.12); }
  .cell.head { min-height: 64px; }
  .about .row:last-child .cell.s8 { display: none; }
  .hero-meta .cell { min-height: 52px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta .cell { grid-column: auto !important; }
  .hero-meta .cell + .cell { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
}

/* Loop 2 */
.row { display: grid !important; justify-content: stretch !important; }
/* Thesis: number, title and text share rows across all four cells (subgrid), so they align line by line */
.thesis-grid { grid-template-rows: auto auto 1fr; }
.thesis-grid li { display: grid !important; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; align-content: start; justify-content: stretch; padding: calc(var(--pad) * 1.6) var(--pad) !important; }
.thesis-grid .idx { margin: 0 0 10px; }
@media (max-width: 1023px) {
  .thesis-grid { grid-template-rows: none; }
  .thesis-grid li { grid-row: auto; grid-template-rows: none; display: flex !important; }
}
.row { gap: 0 !important; }
/* Overhang never wider than the margin to the viewport edge */
:root { --over: min(32px, calc(var(--frame-gap) - 6px)); }
html, body { overflow-x: clip; }
@media (max-width: 720px) { :root { --over: 6px; } }
/* Title view shows only the wordmark: the grid lines fade in as it docks */
.frame-lines, .hero-bottom { opacity: var(--dock, 1); }
.live-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; color: var(--grey-2); text-align: center; }
.live-num { color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: .06em; font-size: 15px; }
.live-src { color: var(--grey-2); text-decoration: none; font-size: 10px; }
.live-src:hover, .live-src:focus-visible { color: var(--white); }
/* Direct mail until the form gets a sending service */
.mail-direct { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mail-link { font-family: var(--serif); font-size: var(--t3); letter-spacing: -.012em; color: var(--white); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 6px; transition: background-size .4s var(--ease); }
.mail-link:hover, .mail-link:focus-visible { background-size: 100% 1px; }
.form[hidden] { display: none !important; }
.footer .row.footer-top::before, .footer .row.footer-bar::before { content: ''; position: absolute; top: 0; left: calc(var(--over) * -1); right: calc(var(--over) * -1); border-top: 1px solid var(--rule-dark); }
.hero-bg { width: 100% !important; height: 100% !important; }