/*
Theme Name: Term 13 27
Text Domain: term13-27
Description: Ink, paper and a little acid. The Term 13 website theme.
Version: 0.1.2
Requires at least: 6.6
Requires PHP: 8.1
*/

:root {
  --t13-ink: #211d27;
  --t13-paper: #f8f8f2;
  --t13-acid: #d6ff3f;
  --t13-canvas: #fff;
  --t13-text: var(--t13-ink);
  --t13-body: #625e67;
  --t13-panel: var(--t13-paper);
  --t13-line: #d7d8cf;
  --t13-header: 4.5rem;
  --t13-gutter: clamp(1rem, 4vw, 3rem);
  --t13-width: 76rem;
  --t13-display: "Arial Black", "Arial Bold", Arial, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-t13-theme="light"]) { color-scheme: dark; --t13-canvas: #211d27; --t13-text: #f8f8f2; --t13-body: #c5c1cc; --t13-panel: #2d2933; --t13-line: #544e5a; }
}
:root[data-t13-theme="dark"] { color-scheme: dark; --t13-canvas: #211d27; --t13-text: #f8f8f2; --t13-body: #c5c1cc; --t13-panel: #2d2933; --t13-line: #544e5a; }
html { scroll-padding-top: calc(var(--t13-header) + 1rem); }
html, body { background: var(--t13-canvas); color: var(--t13-text); }
body { margin: 0; }
.wp-site-blocks { padding: 0; }
:where(.wp-site-blocks > *) { margin-block-start: 0; }
a { color: inherit; text-underline-offset: .18em; }
:where(a, button, input, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
.container { inline-size: min(100% - 2 * var(--t13-gutter), var(--t13-width)); margin-inline: auto; }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--t13-gutter); }
.row > * { min-inline-size: 0; grid-column: span var(--t13-span, 12); }
.t13-kicker { color: var(--t13-body); font: .75rem/1.4 Consolas, "Liberation Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.t13-signal::before { content: ""; display: inline-block; inline-size: .5rem; block-size: .5rem; margin-inline-end: .65rem; background: var(--t13-acid); border: 1px solid #637222; border-radius: 50%; }
.t13-hero, .t13-interior { display: grid; align-content: center; }
.t13-hero h1, .t13-interior h1 { font: 900 clamp(2rem, 4.5vw, 4rem)/1.05 var(--t13-display); letter-spacing: -.055em; margin-block: 0; text-wrap: balance; overflow-wrap: anywhere; }
.t13-hero, .t13-interior { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem); }
.home .t13-hero { min-block-size: calc(90svh - var(--t13-header)); padding-block: clamp(3rem, 10vw, 8rem); }
.home .t13-hero h1 { font-size: clamp(2.55rem, 8vw, 7rem); line-height: .97; letter-spacing: -.065em; margin-block: .18em; max-inline-size: 15ch; }
.t13-lede { color: var(--t13-body); max-inline-size: 46ch; font-size: clamp(1rem, 2vw, 1.28rem); }
.t13-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.t13-interior + .t13-section, body:not(.home) .t13-hero + .t13-section { padding-block-start: clamp(1rem, 2.5vw, 2rem); }
.t13-section h2, .t13-footer h2 { font: 900 clamp(2rem, 5.4vw, 4rem)/1.05 var(--t13-display); letter-spacing: -.055em; text-wrap: balance; margin-block: .25em; }
.t13-section p:not(.t13-kicker), .t13-footer p:not(.t13-kicker) { color: var(--t13-body); }
.t13-dark { --t13-canvas: #211d27; --t13-text: #f8f8f2; --t13-body: #c5c1cc; --t13-panel: #2d2933; --t13-line: #544e5a; background: var(--t13-canvas); color: var(--t13-text); }
.t13-panel { padding: clamp(1rem, 3vw, 2rem); background: var(--t13-panel); border: 1px solid var(--t13-line); border-radius: .65rem; }
.t13-panel h3 { margin-block: .25em; }
.t13-actions, .wp-block-buttons.t13-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block-start: 1.5rem; }
.t13-pill, .wp-block-button.t13-pill .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.75rem; padding: .65rem 1.12rem; border: 1px solid var(--t13-text); border-radius: 99rem; background: var(--t13-text); color: var(--t13-canvas); font: 700 .925rem/1.2 Arial, system-ui, sans-serif; text-decoration: none; }
.wp-block-button.t13-pill { display: block; padding: 0; border: 0; background: none; min-block-size: 0; }
.t13-pill.t13-outline, .wp-block-button.t13-outline .wp-block-button__link { background: transparent; color: var(--t13-text); }
.t13-pill:focus-visible, .t13-pill a:focus-visible { outline-color: var(--t13-text); }
.t13-footer { padding-block: clamp(3rem, 7vw, 6rem) 1.5rem; }
.t13-footer .row { align-items: start; }
.t13-footer ul, .t13-nav-links { list-style: none; margin: 0; padding: 0; }
.t13-footer li { margin-block: .65rem; }
.t13-footer details { max-inline-size: 40ch; margin-block: 1.6rem; }
.t13-footer summary { cursor: pointer; font-weight: 700; min-block-size: 2.75rem; display: flex; align-items: center; justify-content: space-between; border-block: 1px solid var(--t13-line); }
.t13-footer summary::after { content: "+"; }
.t13-footer details[open] summary::after { content: "−"; }
.t13-footer summary::-webkit-details-marker { display: none; }
.t13-footer details p { padding: 1rem; margin: 0; background: var(--t13-panel); }
.t13-footer-bottom { border-top: 1px solid var(--t13-line); margin-block-start: 2rem; padding-block-start: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.t13-brand { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font: 900 1.15rem/1 var(--t13-display); white-space: nowrap; letter-spacing: -.035em; }
.t13-brand img { inline-size: 1.8rem; block-size: 1.8rem; flex: none; }
.t13-dark .t13-brand img, .t13-header[data-tone="dark"]:not([data-panel="menu"]):not([data-panel="search"]) .t13-brand img,
:root[data-t13-theme="dark"] .t13-header:not([data-panel="menu"]):not([data-panel="search"]) .t13-brand img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-t13-theme="light"]) .t13-header:not([data-panel="menu"]):not([data-panel="search"]) .t13-brand img { filter: brightness(0) invert(1); }
}
.t13-header-shell { position: sticky; inset-block-start: 0; z-index: 10; }
.admin-bar .t13-header-shell { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.t13-header { --nav-bg: var(--t13-canvas); --nav-fg: var(--t13-text); --nav-border: var(--t13-line); color: var(--nav-fg); }
.t13-header[data-tone="dark"] { --nav-bg: #211d27; --nav-fg: #f8f8f2; --nav-border: #544e5a; }
.t13-header[data-panel="menu"], .t13-header[data-panel="search"] { --nav-bg: #fff; --nav-fg: #211d27; --nav-border: #d7d8cf; }
.t13-bar { background: var(--nav-bg); background: color-mix(in srgb, var(--nav-bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border); transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.t13-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-block-size: var(--t13-header); }
.t13-header-tools { display: flex; align-items: center; gap: .2rem; }
.t13-control { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-block-size: 2.75rem; min-inline-size: 2.75rem; border: 0; padding: .25rem; background: transparent; color: inherit; cursor: pointer; }
.t13-control svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.t13-control { transition: opacity .14s ease, transform .14s ease; }
.t13-control:hover { opacity: .76; }
.t13-control:active { transform: translateY(1px); }
.t13-menu-toggle svg { inline-size: 2.125rem; block-size: 2.125rem; }
.t13-control-label { font: 700 .6875rem Arial, sans-serif; letter-spacing: .085em; }
.t13-menu-toggle svg line { transform-box: view-box; transition: transform .18s ease, opacity .12s ease; }
.t13-menu-toggle[aria-expanded="true"] svg line:first-child { transform-origin: 12px 5px; transform: translateY(7px) rotate(45deg); }
.t13-menu-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.t13-menu-toggle[aria-expanded="true"] svg line:last-child { transform-origin: 12px 19px; transform: translateY(-7px) rotate(-45deg); }
.t13-sheet { background: #fff; color: var(--t13-ink); border-bottom: 1px solid #d7d8cf; }
.t13-js .t13-sheet { position: absolute; inset-inline: 0; inset-block-start: 100%; max-block-size: calc(100dvh - var(--t13-header)); overflow: auto; animation: t13-fold .2s ease-out both; transform-origin: top; }
@keyframes t13-fold { from { clip-path: inset(0 0 100%); transform: scaleY(.96); } to { clip-path: inset(0); transform: scaleY(1); } }
.t13-nav-links a { display: flex; justify-content: space-between; align-items: center; min-block-size: 2.75rem; color: inherit; text-decoration: none; font-weight: 700; }
.t13-sheet .t13-nav-links a { padding-inline: var(--t13-gutter); border-top: 1px solid #ecece8; }
.t13-sheet .t13-nav-links a:hover, .t13-sheet .t13-nav-links a:focus-visible { background: var(--t13-paper); }
.t13-desktop-nav, .t13-js .t13-no-js, .t13-enhance { display: none; }
.t13-js .t13-enhance { display: inline-flex; }
.t13-search-inner { padding-block: 1rem; }
.t13-search-label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.t13-search-form { display: flex; gap: .55rem; margin-block-end: .75rem; }
.t13-search-form input { min-inline-size: 0; flex: 1; color: var(--t13-ink); background: #fff; border: 1px solid #77717f; border-radius: .3rem; padding: .6rem; font: inherit; }
.t13-search-form button { border: 0; border-radius: 99rem; padding-inline: 1rem; color: var(--t13-paper); background: var(--t13-ink); font: inherit; }
.t13-work-list { display: grid; gap: 2.5rem; }
.t13-logo-strip { overflow-x: auto; scroll-snap-type: x proximity; margin-block: 1.5rem; }
.t13-logo-strip ul { display: flex; gap: .75rem; list-style: none; margin: 0; padding: .25rem; }
.t13-logo-strip li { flex: 0 0 8rem; scroll-snap-align: start; }
.t13-logo-strip img { display: block; width: 100%; height: auto; border: 1px solid var(--t13-line); border-radius: .5rem; }
.t13-client-quotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.t13-client-quotes blockquote { margin: 0; }
.t13-client-quotes blockquote p { margin-block-start: 0; }
.t13-work-card { align-items: center; }
.t13-work-card h3 { margin-block: .2em; font: 900 clamp(1.7rem, 4vw, 3.3rem)/1.05 var(--t13-display); letter-spacing: -.04em; }
.t13-work-card img { display: block; inline-size: 100%; block-size: auto; border-radius: .5rem; }
.t13-work-card .t13-work-image { position: relative; display: block; margin: 0; }
.t13-work-card details summary { cursor: pointer; }
@media (max-width: 767px) {
  .t13-work-card .t13-work-image { grid-row: 1; }
  html:not(.t13-js) .t13-header-shell { position: static; }
}
.t13-work-image::after { position: absolute; content: ""; inset: 0 0 auto auto; inline-size: 2.5rem; block-size: 1.65rem; border-top: 1px solid var(--t13-acid); border-right: 1px solid var(--t13-acid); border-top-right-radius: .5rem; pointer-events: none; }
.t13-case-image img { border-radius: .5rem; }
.t13-content { inline-size: min(100% - 2 * var(--t13-gutter), 46rem); margin-inline: auto; }
.screen-reader-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 62rem) {
  .t13-desktop-nav { display: block; }
  .t13-desktop-nav .t13-nav-links { display: flex; align-items: center; gap: clamp(.5rem,1.8vw,1.5rem); }
  .t13-desktop-nav .t13-nav-beer a { min-block-size: 2.45rem; padding-inline: .85rem; border: 1px solid currentColor; border-radius: 99rem; }
  .t13-js .t13-menu-toggle, .t13-header #t13-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .t13-header *, .t13-header *::before { animation: none !important; transition: none !important; } .t13-control:active { transform: none; } }

.col-1 { --t13-span: 1; }
.col-2 { --t13-span: 2; }
.col-3 { --t13-span: 3; }
.col-4 { --t13-span: 4; }
.col-5 { --t13-span: 5; }
.col-6 { --t13-span: 6; }
.col-7 { --t13-span: 7; }
.col-8 { --t13-span: 8; }
.col-9 { --t13-span: 9; }
.col-10 { --t13-span: 10; }
.col-11 { --t13-span: 11; }
.col-12 { --t13-span: 12; }

@media (min-width: 576px) {
  .col-sm-1 { --t13-span: 1; }
  .col-sm-2 { --t13-span: 2; }
  .col-sm-3 { --t13-span: 3; }
  .col-sm-4 { --t13-span: 4; }
  .col-sm-5 { --t13-span: 5; }
  .col-sm-6 { --t13-span: 6; }
  .col-sm-7 { --t13-span: 7; }
  .col-sm-8 { --t13-span: 8; }
  .col-sm-9 { --t13-span: 9; }
  .col-sm-10 { --t13-span: 10; }
  .col-sm-11 { --t13-span: 11; }
  .col-sm-12 { --t13-span: 12; }
}

@media (min-width: 768px) {
  .col-md-1 { --t13-span: 1; }
  .col-md-2 { --t13-span: 2; }
  .col-md-3 { --t13-span: 3; }
  .col-md-4 { --t13-span: 4; }
  .col-md-5 { --t13-span: 5; }
  .col-md-6 { --t13-span: 6; }
  .col-md-7 { --t13-span: 7; }
  .col-md-8 { --t13-span: 8; }
  .col-md-9 { --t13-span: 9; }
  .col-md-10 { --t13-span: 10; }
  .col-md-11 { --t13-span: 11; }
  .col-md-12 { --t13-span: 12; }
}

@media (min-width: 992px) {
  .col-lg-1 { --t13-span: 1; }
  .col-lg-2 { --t13-span: 2; }
  .col-lg-3 { --t13-span: 3; }
  .col-lg-4 { --t13-span: 4; }
  .col-lg-5 { --t13-span: 5; }
  .col-lg-6 { --t13-span: 6; }
  .col-lg-7 { --t13-span: 7; }
  .col-lg-8 { --t13-span: 8; }
  .col-lg-9 { --t13-span: 9; }
  .col-lg-10 { --t13-span: 10; }
  .col-lg-11 { --t13-span: 11; }
  .col-lg-12 { --t13-span: 12; }
}

@media (min-width: 1200px) {
  .col-xl-1 { --t13-span: 1; }
  .col-xl-2 { --t13-span: 2; }
  .col-xl-3 { --t13-span: 3; }
  .col-xl-4 { --t13-span: 4; }
  .col-xl-5 { --t13-span: 5; }
  .col-xl-6 { --t13-span: 6; }
  .col-xl-7 { --t13-span: 7; }
  .col-xl-8 { --t13-span: 8; }
  .col-xl-9 { --t13-span: 9; }
  .col-xl-10 { --t13-span: 10; }
  .col-xl-11 { --t13-span: 11; }
  .col-xl-12 { --t13-span: 12; }
}