/*
Theme Name: WordPress Sponsored Plugins
Theme URI: https://www.wpsponsored.com
Description: A new editorial-commerce theme for WordPress Sponsored Plugins, with six selectable homepage directions in the Design Lab.
Version: 1.0.0
Author: Advertise Me - Digital Solutions Partner
Author URI: https://advertiseme.com.au
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: wordpress-sponsored-plugins
Tags: sponsorship, wordpress, plugin, advertising, editorial, shop, responsive
*/

:root {
  --lime: #a3bd44;
  --lime-dark: #788d2c;
  --mint: #cef1d2;
  --ink: #313131;
  --ink-soft: #5c6059;
  --paper: #f6f5ef;
  --white: #fffef9;
  --line: rgba(49, 49, 49, .16);
  --shadow: 0 18px 55px rgba(39, 44, 28, .12);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Arial Narrow', Arial, Helvetica, sans-serif;
  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
body.is-menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lime-dark); }
button, input, textarea, select { font: inherit; }
button, .button, .wp-block-button__link { cursor: pointer; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; padding: 10px 14px; background: var(--ink); color: var(--white); z-index: 999; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(780px, calc(100% - 48px)); margin: 0 auto; }

/* Shared header and footer */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: relative; z-index: 10; }
.header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand img { display: block; width: auto; max-width: 238px; max-height: 72px; }
.primary-nav ul, .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; }
.primary-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.primary-nav a:hover, .primary-nav .current-menu-item a { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu-toggle { display: none; border: 1px solid var(--ink); background: transparent; padding: 9px 12px; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
.site-footer { background: var(--ink); color: var(--white); margin-top: 96px; }
.footer-upper { padding: 48px 0 42px; border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-grid { display: grid; grid-template-columns: 180px minmax(240px, 1fr) minmax(190px, .7fr); gap: 40px; align-items: start; }
.footer-brand img { width: 165px; }
.footer-copy h3 { font-size: 19px; margin: 0 0 8px; font-weight: 700; }
.footer-copy p { color: rgba(255,255,255,.72); max-width: 440px; margin: 0; }
.footer-nav ul { gap: 10px 18px; }
.footer-nav a { color: rgba(255,255,255,.86); text-decoration: none; font-size: 13px; }
.footer-nav a:hover { color: var(--mint); }
.footer-lower { padding: 18px 0; color: rgba(255,255,255,.64); font-size: 12px; }
.footer-lower a { color: var(--white); }

/* Shared content */
.eyebrow { color: var(--lime-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.inverse { color: var(--mint); }
.page-intro { padding: 80px 0 54px; border-bottom: 1px solid var(--line); }
.page-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 86px); line-height: .98; letter-spacing: -.05em; margin: 12px 0 18px; max-width: 800px; }
.page-intro p { color: var(--ink-soft); max-width: 650px; font-size: 18px; margin: 0; }
.content-area { padding: 62px 0; }
.entry-content { font-family: var(--serif); font-size: 19px; line-height: 1.75; }
.entry-content > * { max-width: 780px; }
.entry-content img, .entry-content figure { max-width: 100%; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--sans); line-height: 1.15; letter-spacing: -.03em; }
.entry-content a { color: var(--lime-dark); }
.entry-content blockquote { border-left: 4px solid var(--lime); margin-left: 0; padding: 8px 24px; font-size: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); padding: 13px 19px; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { color: var(--white); background: var(--lime-dark); transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--lime); }
.button.secondary { color: var(--ink); background: transparent; }
.button.secondary:hover { color: var(--ink); background: var(--mint); }
.button-arrow::after { content: '↗'; font-size: 16px; line-height: 0; }

/* Homepage: six distinct design directions */
.home-direction { overflow: hidden; }
.home-direction .hero-image { width: 100%; display: block; object-fit: cover; }
.direction-intro { font-family: var(--serif); }
.direction-intro p { color: var(--ink-soft); }
.home-latest { padding: 78px 0; }
.home-latest h2 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.05em; margin: 0 0 25px; }
.product-mark { display: flex; align-items: center; justify-content: center; min-height: 100%; background: var(--mint); padding: 24px; }
.product-mark img { max-height: 110px; width: auto; }
.feature-card { background: var(--white); border: 1px solid var(--line); }
.feature-card > * { margin-left: 24px; margin-right: 24px; }
.feature-card .card-image { margin: 0; }
.feature-card .card-image img { display: block; width: 100%; height: 170px; object-fit: cover; }
.feature-card h3 { font-family: var(--serif); font-size: 28px; line-height: 1.05; margin-top: 22px; margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); margin-top: 0; }
.feature-card .card-link { display: inline-block; margin-bottom: 24px; color: var(--lime-dark); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* 01 Editorial Index */
.direction-editorial { background: #f0eee5; }
.editorial-masthead { padding: 76px 0 44px; border-bottom: 7px double var(--ink); }
.editorial-masthead .issue-line { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.editorial-masthead h1 { font-family: var(--display); font-size: clamp(64px, 13vw, 170px); line-height: .77; letter-spacing: -.06em; text-transform: uppercase; margin: 55px 0 28px; max-width: 950px; }
.editorial-hero { display: grid; grid-template-columns: 1fr .72fr; gap: 42px; padding: 46px 0 72px; }
.editorial-hero .hero-image { height: 430px; filter: saturate(.75) contrast(1.06); }
.editorial-hero h2 { font-family: var(--serif); font-size: clamp(40px, 5vw, 70px); line-height: .92; font-weight: 400; letter-spacing: -.06em; margin: 22px 0; }
.editorial-hero .hero-note { align-self: end; border-top: 1px solid var(--ink); padding-top: 16px; }
.editorial-hero .hero-note strong { font-size: 13px; display: block; margin-bottom: 12px; }
.editorial-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.editorial-tiles .feature-card { border: 0; min-height: 260px; }

/* 02 Terminal */
.direction-terminal { background: #202420; color: #e7e9dc; font-family: 'Courier New', monospace; }
.direction-terminal .wrap { width: min(1240px, calc(100% - 48px)); }
.terminal-top { padding: 22px 0; border-bottom: 1px solid #58604c; display: flex; justify-content: space-between; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.terminal-top .signal { color: var(--lime); }
.terminal-hero { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 680px; border-bottom: 1px solid #58604c; }
.terminal-hero .hero-copy { padding: 76px 7vw 60px 0; border-right: 1px solid #58604c; }
.terminal-hero h1 { color: var(--lime); font-family: var(--sans); text-transform: uppercase; font-weight: 700; font-size: clamp(55px, 8vw, 112px); letter-spacing: -.08em; line-height: .78; margin: 20px 0 34px; max-width: 720px; }
.terminal-hero p { max-width: 470px; color: #b6bca8; }
.terminal-visual { padding: 60px 0 0 7vw; display: flex; flex-direction: column; justify-content: end; }
.terminal-visual img { height: 300px; object-fit: cover; opacity: .8; filter: grayscale(1) sepia(.35) hue-rotate(35deg) contrast(1.2); }
.terminal-readout { border: 1px solid #58604c; margin-top: 18px; padding: 18px; color: #bec5ad; font-size: 12px; }
.terminal-readout span { color: var(--lime); }
.terminal-modules { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #58604c; }
.terminal-modules .feature-card { background: transparent; border: 0; border-right: 1px solid #58604c; padding: 30px; }
.terminal-modules .feature-card:last-child { border-right: 0; }
.terminal-modules .feature-card h3 { color: var(--lime); font-family: var(--sans); font-size: 19px; text-transform: uppercase; }
.terminal-modules .feature-card p { color: #a4aa99; font-size: 13px; }
.terminal-modules .feature-card .card-link { color: var(--mint); }

/* 03 Field Notes */
.direction-field { background: #e8dfd0; color: #3b382f; }
.field-header { padding: 26px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #8c8578; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.field-brand { font-weight: 700; }
.field-hero { padding: 76px 0 104px; display: grid; grid-template-columns: .4fr 1.25fr .6fr; gap: 34px; align-items: center; }
.field-hero .vertical-label { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .24em; font-size: 11px; transform: rotate(180deg); }
.field-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 8vw, 112px); line-height: .84; letter-spacing: -.08em; margin: 0 0 26px; }
.field-hero p { font-family: var(--serif); font-size: 18px; max-width: 460px; }
.field-portrait { position: relative; }
.field-portrait::before { content: ''; position: absolute; width: 88%; height: 95%; left: -20px; top: 22px; border: 1px solid #8c8578; }
.field-portrait img { position: relative; z-index: 1; display: block; height: 400px; width: 100%; object-fit: cover; mix-blend-mode: multiply; filter: sepia(.25) saturate(.6); }
.field-collection { border-top: 1px solid #8c8578; padding: 25px 0 90px; }
.field-collection-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.field-collection-title h2 { font-family: var(--serif); font-size: 42px; font-weight: 400; margin: 0; }
.field-collection .feature-card { background: transparent; border: 0; border-top: 3px solid #3b382f; }
.field-collection .feature-card .card-image img { height: 135px; mix-blend-mode: multiply; filter: sepia(.25) saturate(.7); }
.field-collection .feature-card > * { margin-left: 0; margin-right: 0; }

/* 04 Commerce */
.direction-commerce { background: #f7f7f2; }
.commerce-header { border-bottom: 1px solid var(--ink); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; }
.commerce-header .wordmark { font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -.05em; }
.commerce-header .shop-badge { border: 1px solid var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.commerce-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 630px; border-bottom: 1px solid var(--ink); }
.commerce-hero .hero-copy { padding: 80px 10% 60px 0; display: flex; flex-direction: column; justify-content: space-between; }
.commerce-hero h1 { font-family: var(--sans); font-size: clamp(68px, 10vw, 145px); line-height: .74; letter-spacing: -.12em; text-transform: uppercase; margin: 0; max-width: 650px; }
.commerce-hero h1 em { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.08em; }
.commerce-hero .hero-copy p { max-width: 400px; color: var(--ink-soft); }
.commerce-showcase { border-left: 1px solid var(--ink); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.commerce-showcase .showcase-image { background: var(--mint); padding: 30px; flex: 1; display: flex; align-items: center; justify-content: center; }
.commerce-showcase img { max-height: 320px; width: auto; mix-blend-mode: multiply; }
.commerce-showcase .price-row { display: flex; justify-content: space-between; padding-top: 18px; font-size: 13px; text-transform: uppercase; }
.commerce-categories { padding: 52px 0 88px; }
.commerce-categories h2 { font-family: var(--serif); font-size: 40px; font-weight: 400; }
.commerce-categories .feature-card { border: 0; background: transparent; }
.commerce-categories .feature-card h3 { font-family: var(--sans); text-transform: uppercase; letter-spacing: -.04em; font-size: 23px; }

/* 05 Signal */
.direction-signal { background: var(--lime); color: var(--ink); }
.signal-header { padding: 22px 0; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.signal-hero { padding: 62px 0 70px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 42px; }
.signal-hero .hero-index { font-size: 12px; font-weight: 700; padding-top: 12px; border-top: 2px solid var(--ink); }
.signal-hero h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(72px, 12vw, 175px); letter-spacing: -.08em; line-height: .7; margin: 0 0 38px; }
.signal-hero .hero-copy p { max-width: 460px; font-size: 19px; }
.signal-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.signal-hero .button { border-color: var(--ink); background: var(--ink); }
.signal-hero .button.secondary { background: transparent; color: var(--ink); }
.signal-hero .button:hover { background: var(--white); color: var(--ink); }
.signal-grid { display: grid; grid-template-columns: 1.5fr .7fr .8fr; gap: 14px; padding-bottom: 80px; }
.signal-grid .panel { background: var(--ink); color: var(--white); min-height: 230px; padding: 25px; position: relative; }
.signal-grid .panel:first-child { grid-row: span 2; min-height: 475px; padding: 0; }
.signal-grid .panel:first-child img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: grayscale(1); }
.signal-grid .panel:first-child .panel-label { position: absolute; left: 25px; bottom: 24px; color: var(--mint); }
.signal-grid .panel h3 { font-family: var(--sans); font-size: 20px; text-transform: uppercase; margin: 0 0 22px; }
.signal-grid .panel p { color: #d0d4c4; font-size: 14px; }
.signal-grid .panel .panel-number { font-size: 12px; color: var(--lime); }

/* 06 Quiet Grid */
.direction-quiet { background: #faf9f4; }
.quiet-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--ink); padding: 17px 0; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.quiet-header .quiet-nav { justify-self: end; }
.quiet-header .quiet-nav a { margin-left: 18px; text-decoration: none; }
.quiet-hero { min-height: 690px; display: grid; grid-template-columns: .35fr 1.4fr .65fr; gap: 34px; padding: 90px 0 70px; }
.quiet-hero .side-text { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; align-self: end; }
.quiet-hero h1 { font-family: var(--serif); font-size: clamp(70px, 10vw, 142px); line-height: .74; font-weight: 400; letter-spacing: -.09em; margin: 0; }
.quiet-hero h1 span { display: block; margin-left: 18%; font-style: italic; }
.quiet-hero .hero-detail { align-self: end; border-top: 1px solid var(--ink); padding-top: 17px; }
.quiet-hero .hero-detail p { color: var(--ink-soft); margin: 0 0 20px; }
.quiet-proof { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); }
.quiet-proof .proof { padding: 26px 22px; border-right: 1px solid var(--ink); }
.quiet-proof .proof:last-child { border: 0; }
.quiet-proof strong { display: block; font-size: 32px; letter-spacing: -.08em; }
.quiet-proof span { color: var(--ink-soft); font-size: 12px; }
.quiet-products { padding: 70px 0 90px; }
.quiet-products .feature-card { border: 0; border-top: 1px solid var(--ink); background: transparent; }
.quiet-products .feature-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }

/* Blog, forms, shop and utility */
.archive-grid, .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { border-top: 3px solid var(--ink); padding-top: 16px; }
.post-card .post-image { display: block; width: 100%; height: 200px; object-fit: cover; margin-bottom: 18px; }
.post-card h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; margin: 10px 0; }
.post-card p { color: var(--ink-soft); margin: 0 0 16px; }
.post-meta { color: var(--lime-dark); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; }
.single-header { padding: 82px 0 42px; }
.single-header h1 { font-family: var(--serif); font-size: clamp(46px, 7vw, 92px); line-height: .92; font-weight: 400; letter-spacing: -.06em; margin: 12px 0; }
.single-feature { max-height: 510px; overflow: hidden; margin: 10px auto 54px; }
.single-feature img { width: 100%; display: block; object-fit: cover; }
.form-panel { background: var(--white); border: 1px solid var(--line); padding: clamp(24px, 5vw, 50px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.form-field input, .form-field textarea, .form-field select, .form-panel input[type=text], .form-panel input[type=email], .form-panel textarea, .form-panel select { width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 13px 14px; color: var(--ink); }
.form-field textarea, .form-panel textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.shop-card { background: var(--white); border: 1px solid var(--line); padding: 0 22px 24px; }
.shop-card img { display: block; width: calc(100% + 44px); max-width: none; height: 220px; object-fit: cover; margin-left: -22px; margin-bottom: 20px; }
.shop-card h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.price { font-weight: 700; color: var(--lime-dark); }
.woocommerce ul.products { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.woocommerce ul.products li.product { width: auto; float: none; margin: 0; padding: 0 22px 24px; background: var(--white); border: 1px solid var(--line); }
.woocommerce ul.products li.product a img { width: calc(100% + 44px); max-width: none; height: 220px; object-fit: cover; margin: 0 0 20px -22px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.woocommerce ul.products li.product .price { color: var(--lime-dark); font-weight: 700; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--white); padding: 13px 19px; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--lime-dark); color: var(--white); }
.woocommerce form .form-row { padding: 0; margin: 0 0 18px; }
.woocommerce form .form-row label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 13px 14px; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.mockup-lab { background: #dfe8d1; min-height: 100vh; }
.mockup-lab-header { padding: 34px 0; border-bottom: 2px solid var(--ink); }
.mockup-lab-header h1 { font-family: var(--serif); font-size: clamp(44px, 7vw, 90px); line-height: .9; font-weight: 400; letter-spacing: -.06em; margin: 12px 0; }
.mockup-lab-header p { max-width: 670px; margin: 0; color: var(--ink-soft); }
.mockup-picker { padding: 24px 0; position: sticky; top: 0; z-index: 8; background: rgba(223,232,209,.95); border-bottom: 1px solid var(--line); }
.mockup-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mockup-tab { border: 1px solid var(--ink); background: transparent; text-align: left; padding: 13px; min-height: 98px; transition: background .2s ease, transform .2s ease; }
.mockup-tab:hover { transform: translateY(-3px); background: var(--mint); }
.mockup-tab.is-active { background: var(--ink); color: var(--white); }
.mockup-tab .tab-no { font-size: 10px; display: block; color: var(--lime-dark); margin-bottom: 10px; }
.mockup-tab.is-active .tab-no { color: var(--mint); }
.mockup-tab strong { display: block; font-size: 13px; line-height: 1.1; }
.mockup-stage { padding: 34px 0 80px; }
.mockup-stage .home-direction { display: none; border: 1px solid var(--line); box-shadow: var(--shadow); }
.mockup-stage .home-direction:first-child { display: block; }
.mockup-stage .home-direction.is-active { display: block; }
.lab-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; }
.lab-actions p { margin: 0; font-size: 12px; color: var(--ink-soft); }
.styleguide-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0; }
.swatch { min-height: 115px; padding: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; }
.swatch.lime { background: var(--lime); }.swatch.mint { background: var(--mint); }.swatch.ink { background: var(--ink); color: var(--white); }.swatch.paper { background: var(--paper); }

@media (max-width: 900px) {
  .wrap { width: min(100% - 36px, 720px); }
  .header-inner { min-height: 76px; }
  .menu-toggle { display: block; }
  .primary-nav { display: none; position: absolute; left: 18px; right: 18px; top: calc(100% + 1px); background: var(--paper); border: 1px solid var(--line); padding: 16px; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { display: block; }.primary-nav li { padding: 12px 0; border-bottom: 1px solid var(--line); }.primary-nav li:last-child { border: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-row: span 2; }
  .editorial-hero, .terminal-hero, .commerce-hero { grid-template-columns: 1fr; }.terminal-hero .hero-copy { border-right: 0; border-bottom: 1px solid #58604c; }.terminal-visual { padding: 40px 0 60px; }.commerce-showcase { border-left: 0; border-top: 1px solid var(--ink); }
  .field-hero, .quiet-hero { grid-template-columns: 1fr 1.5fr; }.field-hero .vertical-label, .quiet-hero .side-text { display: none; }
  .signal-hero { grid-template-columns: 1fr; }.signal-hero .hero-index { max-width: 160px; }
  .archive-grid, .shop-grid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .mockup-picker-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .wrap, .narrow { width: calc(100% - 30px); }.brand img { max-width: 190px; }.footer-grid, .form-grid, .archive-grid, .shop-grid, .woocommerce ul.products, .editorial-tiles, .terminal-modules, .signal-grid, .quiet-proof, .styleguide-swatches { grid-template-columns: 1fr; }.footer-brand { grid-row: auto; }.terminal-modules .feature-card { border-right: 0; border-bottom: 1px solid #58604c; }.terminal-modules .feature-card:last-child { border-bottom: 0; }.signal-grid .panel:first-child { grid-row: auto; min-height: 280px; }.quiet-proof .proof { border-right: 0; border-bottom: 1px solid var(--ink); }.quiet-proof .proof:last-child { border-bottom: 0; }.field-hero, .quiet-hero { grid-template-columns: 1fr; }.field-portrait { margin-top: 25px; }.field-portrait img { height: 280px; }.quiet-hero { min-height: auto; padding: 60px 0; }.quiet-hero h1 span { margin-left: 5%; }.editorial-hero .hero-image { height: 260px; }.commerce-hero .hero-copy { padding: 60px 0 45px; }.mockup-picker-grid { grid-template-columns: repeat(2, 1fr); }.mockup-tab { min-height: 82px; }.lab-actions { display: block; }.lab-actions .button { margin-top: 15px; }
}