/* Taproot Works website. Marketing-shaped CSS. Builds on the canonical tokens in /assets/colors_and_type.css. Editorial direction A, canon-clean. Composition pushed hard inside the rules. */ @import url('../assets/colors_and_type.css'); * { box-sizing: border-box; } :root { --tw-col-page: 1180px; /* the wide column for landing-style layouts */ --tw-col-text: 760px; /* canonical reading column */ --tw-fs-hero: clamp(2.4rem, 5vw, 4.8rem); --tw-fs-h2-big: clamp(1.8rem, 3vw, 2.6rem); --tw-fs-display-2: clamp(3rem, 7vw, 6.4rem); /* the loudest moment, used sparingly */ } html { scroll-behavior: smooth; } body { margin: 0; } a { transition: color .15s ease, border-color .15s ease, background-color .15s ease; } /* ============================================================ Texture layer (paper grain). Brand-extension move, logged for brand review post go-live. Driven by [data-texture] on ; values off/subtle/strong. Implementation: SVG fractal noise tiled at low opacity. */ html[data-texture="subtle"] body::before, html[data-texture="strong"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; mix-blend-mode: multiply; } html[data-texture="subtle"] body::before { opacity: .055; } html[data-texture="strong"] body::before { opacity: .12; } /* Make sure foreground sits on top of grain */ body > * { position: relative; z-index: 1; } /* ============================================================ Page chrome: header */ header.site-header { border-bottom: 1px solid var(--tw-linen); background: var(--tw-parchment); } .header-inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .wordmark { border: none; padding: 0; display: block; line-height: 0; } .wordmark img { height: var(--tw-header-lockup, 140px); width: auto; display: block; transition: height .2s ease; } nav.primary { display: flex; align-items: center; gap: 32px; font-size: 0.95rem; } nav.primary a { color: var(--tw-bark); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; font-family: var(--tw-font-body); } nav.primary a:hover, nav.primary a[aria-current="page"] { color: var(--tw-forest); border-bottom-color: var(--tw-linen); } nav.primary a.cta { color: var(--tw-parchment); background: var(--tw-amber); border: 1px solid var(--tw-amber); border-radius: 4px; padding: 10px 18px; font-weight: 700; } nav.primary a.cta:hover { background: var(--tw-amber-dark); border-color: var(--tw-amber-dark); color: var(--tw-parchment); } /* ============================================================ Page chrome: footer */ footer.site-footer { background: var(--tw-parchment); border-top: 1px solid var(--tw-linen); padding: 64px 0 56px; } .footer-inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: start; } .footer-brand img { height: 112px; display: block; } .footer-cols { display: grid; grid-template-columns: repeat(2, auto); gap: 56px; } .footer-col h4 { font-family: var(--tw-font-body); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--tw-terracotta); font-weight: 700; margin: 0 0 14px; } .footer-col a { display: block; color: var(--tw-bark); text-decoration: none; font-size: 0.95rem; padding: 4px 0; border-bottom: 1px solid transparent; width: fit-content; } .footer-col a:hover { color: var(--tw-forest); border-bottom-color: var(--tw-linen); } .footer-signoff { text-align: right; max-width: 260px; } .footer-signoff .tagline { font-family: var(--tw-font-display); font-size: 1.15rem; color: var(--tw-forest); margin-bottom: 6px; line-height: 1.3; } .footer-signoff .grow { font-family: var(--tw-font-display); font-style: italic; color: var(--tw-bark); opacity: .8; font-size: 1rem; line-height: 1.45; margin-bottom: 18px; } .footer-signoff .meta { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--tw-bark); opacity: .55; line-height: 1.7; } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; } .footer-signoff { text-align: left; max-width: none; } .footer-cols { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Hero variants (A, B, C share .hero baseline) */ .hero { padding: 72px 0 96px; position: relative; } .hero .inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px; } .hero .eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-terracotta); font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .hero .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--tw-terracotta); } .hero h1 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: var(--tw-fs-hero); line-height: 1.02; letter-spacing: -0.008em; margin: 0 0 32px; max-width: 18ch; text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--tw-forest); } .hero .lede { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: clamp(1.3rem, 1.85vw, 1.6rem); line-height: 1.38; max-width: 38ch; margin: 0 0 44px; } .hero .lede em { font-style: italic; } .hero .actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .hero .cta { display: inline-block; background: var(--tw-amber); color: var(--tw-parchment); border: 1px solid var(--tw-amber); padding: 14px 26px; border-radius: 4px; font-weight: 700; font-size: 0.98rem; text-decoration: none; } .hero .cta:hover { background: var(--tw-amber-dark); border-color: var(--tw-amber-dark); color: var(--tw-parchment); } .hero .secondary { color: var(--tw-amber); font-weight: 700; font-size: 0.98rem; text-decoration: none; border-bottom: 1px solid var(--tw-amber); padding-bottom: 3px; } .hero .secondary:hover { color: var(--tw-amber-dark); border-bottom-color: var(--tw-amber-dark); } /* Variant A - type-led, asymmetric on the 1180 column. Left column: type stack + CTAs. Right column: a numbered rail of the three offerings (the meta-strip, lifted to a running mate). */ .hero.variant-a .inner { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; align-items: stretch; } .hero.variant-a .type-stack { display: flex; flex-direction: column; } .hero.variant-a .type-stack .actions { margin-top: auto; padding-top: 12px; } .hero.variant-a .hero-rail { border-left: 1px solid var(--tw-linen); padding: 4px 0 4px 40px; display: flex; flex-direction: column; gap: 0; } .hero.variant-a .hero-rail .row { padding: 32px 0; border-bottom: 1px solid var(--tw-linen); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .hero.variant-a .hero-rail .row:first-child { padding-top: 4px; } .hero.variant-a .hero-rail .row:last-child { border-bottom: none; padding-bottom: 0; } .hero.variant-a .hero-rail .num { font-family: var(--tw-font-display); color: var(--tw-terracotta); font-size: 2.4rem; line-height: 1; letter-spacing: 0; } .hero.variant-a .hero-rail .label { font-family: var(--tw-font-body); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--tw-forest); font-weight: 700; } @media (max-width: 760px) { .hero.variant-a .inner { grid-template-columns: 1fr; gap: 40px; } .hero.variant-a .hero-rail { border-left: none; border-top: 1px solid var(--tw-linen); padding: 28px 0 0; } } /* Variant B - Forest immersion. Single-column type stack on the wide frame. */ .hero.variant-b { background: var(--tw-forest); color: var(--tw-parchment); padding: 132px 0 144px; overflow: hidden; } .hero.variant-b .inner { display: block; max-width: var(--tw-col-page); } .hero.variant-b h1 { max-width: 22ch; } .hero.variant-b::before { /* Vertical line motif on Forest. Two registers so the eye reads pattern, not glitch. Matches the Closer band treatment. */ content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(254, 252, 245, 0.20) 0px, rgba(254, 252, 245, 0.20) 1px, transparent 1px, transparent 192px), repeating-linear-gradient(90deg, rgba(254, 252, 245, 0.10) 0px, rgba(254, 252, 245, 0.10) 1px, transparent 1px, transparent 64px); pointer-events: none; } .hero.variant-b .eyebrow { color: var(--tw-linen); } .hero.variant-b .eyebrow::before { background: var(--tw-linen); } .hero.variant-b h1 { color: var(--tw-parchment); } .hero.variant-b .lede { color: var(--tw-linen); } .hero.variant-b .secondary { color: var(--tw-linen); border-bottom-color: rgba(232, 217, 188, 0.4); } .hero.variant-b .secondary:hover { color: var(--tw-parchment); border-bottom-color: var(--tw-parchment); } /* Variant C - image-paired. Wide column, 60/40 split. */ .hero.variant-c .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; } .hero.variant-c .image-side { position: relative; aspect-ratio: 4 / 5; background: var(--tw-linen-soft); border: 1px solid var(--tw-linen); border-radius: 4px; overflow: hidden; } .hero.variant-c .image-side image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero.variant-c .caption-strip { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(54, 84, 58, 0.82); color: var(--tw-parchment); padding: 14px 22px; font-family: var(--tw-font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; z-index: 2; pointer-events: none; } @media (max-width: 880px) { .hero.variant-c .inner { grid-template-columns: 1fr; } } /* ============================================================ Section primitive */ section.tw-section { padding: 64px 0; border-top: 1px solid var(--tw-linen); } section.tw-section.no-border { border-top: none; } section.tw-section .inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px; } .section-head { display: grid; grid-template-columns: minmax(160px, 1fr) 2.4fr; gap: 48px; margin-bottom: 56px; align-items: baseline; } .section-head .eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-terracotta); font-weight: 700; padding-top: 8px; display: flex; align-items: baseline; gap: 12px; } .section-head .eyebrow .index { font-family: var(--tw-font-display); font-size: 1.1rem; color: var(--tw-terracotta); letter-spacing: 0; } .section-head h2 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: var(--tw-fs-h2-big); line-height: 1.15; margin: 0; max-width: 22ch; text-wrap: balance; } /* Italic discipline: section h2 emphasis stays upright in body sections. Italic is reserved for the hero/page-lede h1 and the Closer h2. */ .section-head h2 em { font-style: normal; } @media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } } /* Section body: seats prose-only section content under the title column, mirroring .section-head geometry. Alignment utility, 2026-07-03. */ .section-body { display: grid; grid-template-columns: minmax(160px, 1fr) 2.4fr; gap: 48px; } @media (max-width: 760px) { .section-body { grid-template-columns: 1fr; gap: 0; } } /* ============================================================ Offerings (Three doors) */ .offerings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--tw-linen); } .offering { padding: 36px 28px 28px; border-right: 1px solid var(--tw-linen); display: flex; flex-direction: column; gap: 16px; } .offering:last-child { border-right: none; } .offering .num { font-family: var(--tw-font-display); color: var(--tw-terracotta); font-size: 1.4rem; letter-spacing: 0.06em; } .offering h3 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: 1.55rem; line-height: 1.2; margin: 0; } .offering p { color: var(--tw-bark); font-size: 1rem; line-height: 1.7; margin: 0; max-width: 32ch; } .offering .more { margin-top: auto; padding-top: 12px; color: var(--tw-amber); font-weight: 700; font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; } .offering .more:hover { color: var(--tw-amber-dark); border-bottom-color: var(--tw-amber-dark); } @media (max-width: 880px) { .offerings { grid-template-columns: 1fr; } .offering { border-right: none; border-bottom: 1px solid var(--tw-linen); } .offering:last-child { border-bottom: none; } } /* ============================================================ Values block (the five) */ .values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--tw-linen); border-bottom: 1px solid var(--tw-linen); } .value-cell { padding: 32px 24px; border-right: 1px solid var(--tw-linen); display: flex; flex-direction: column; gap: 14px; } .value-cell:last-child { border-right: none; } .value-cell .index { font-family: var(--tw-font-display); color: var(--tw-terracotta); font-size: 1.3rem; line-height: 1; } .value-cell .name { font-family: var(--tw-font-display); font-style: italic; color: var(--tw-forest); font-size: 1.2rem; line-height: 1.25; } .value-cell .gloss { color: var(--tw-bark); opacity: .85; font-size: 0.92rem; line-height: 1.55; } @media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } .value-cell { border-bottom: 1px solid var(--tw-linen); } .value-cell:nth-last-child(-n+2) { border-bottom: none; } .value-cell:nth-child(2n) { border-right: none; } } @media (max-width: 540px) { .values-grid { grid-template-columns: 1fr; } .value-cell { border-right: none; } .value-cell:not(:last-child) { border-bottom: 1px solid var(--tw-linen); } } /* ============================================================ Pull-quote (signature work) */ .pull-quote { display: grid; grid-template-columns: minmax(160px, 1fr) 2.4fr; gap: 48px; align-items: start; } .pull-quote .stamp { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-terracotta); font-weight: 700; } .pull-quote blockquote { margin: 0; border-left: 3px solid var(--tw-terracotta); padding: 0 0 0 28px; max-width: 58ch; } .pull-quote blockquote p { font-family: var(--tw-font-display); font-style: italic; color: var(--tw-forest); font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.4; margin: 0; } .pull-quote .attr { margin-top: 20px; margin-left: 31px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--tw-bark); opacity: .75; } @media (max-width: 760px) { .pull-quote { grid-template-columns: 1fr; gap: 18px; } } /* ============================================================ Closer band (Forest CTA) */ section.closer { background: var(--tw-forest); color: var(--tw-parchment); padding: 104px 0 112px; border-top: none; position: relative; overflow: hidden; } section.closer.with-lines::before { /* Vertical line motif on Forest - committed. Two registers so the eye reads pattern, not glitch: 192px primary at 0.20 opacity (stand of trees); 64px secondary at 0.10 opacity (underbrush). */ content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(254, 252, 245, 0.20) 0px, rgba(254, 252, 245, 0.20) 1px, transparent 1px, transparent 192px), repeating-linear-gradient(90deg, rgba(254, 252, 245, 0.10) 0px, rgba(254, 252, 245, 0.10) 1px, transparent 1px, transparent 64px); pointer-events: none; } section.closer .inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px; position: relative; } section.closer .eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-linen); font-weight: 700; margin-bottom: 24px; } section.closer h2 { font-family: var(--tw-font-display); color: var(--tw-parchment); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.1; margin: 0 0 28px; max-width: 22ch; } section.closer h2 em { font-style: italic; } section.closer p { color: var(--tw-linen); font-size: 1.1rem; line-height: 1.65; max-width: 56ch; margin: 0 0 36px; } section.closer .closer-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } section.closer .cta { display: inline-block; background: var(--tw-amber); color: var(--tw-parchment); border: 1px solid var(--tw-amber); padding: 14px 26px; border-radius: 4px; font-weight: 700; font-size: 1rem; text-decoration: none; } section.closer .cta:hover { background: var(--tw-amber-dark); border-color: var(--tw-amber-dark); color: var(--tw-parchment); } section.closer .contact { color: var(--tw-linen); font-size: 0.98rem; text-decoration: none; border-bottom: 1px solid rgba(232, 217, 188, 0.4); padding-bottom: 2px; } section.closer .contact:hover { color: var(--tw-parchment); border-bottom-color: var(--tw-parchment); } /* ============================================================ Generic page reading body */ .page-lede { max-width: var(--tw-col-page); margin: 0 auto; padding: 96px 32px 56px; } .page-lede .eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-terracotta); font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .page-lede .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--tw-terracotta); } .page-lede h1 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.1; margin: 0 0 28px; max-width: 22ch; text-wrap: balance; } .page-lede h1 em { font-style: italic; } .page-lede .lede { font-family: var(--tw-font-display); font-style: italic; color: var(--tw-forest); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 50ch; } .prose { max-width: var(--tw-col-text); margin: 0 auto; padding: 0 32px 32px; color: var(--tw-bark); font-size: 1.05rem; line-height: 1.7; } .prose h3 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: 1.55rem; line-height: 1.2; margin: 48px 0 16px; } .prose p { margin: 0 0 16px; max-width: 62ch; } .prose ul { padding-left: 22px; margin: 0 0 16px; } .prose li { margin-bottom: 8px; } /* ============================================================ People grid (Who we are) */ .people { max-width: var(--tw-col-page); margin: 0 auto; padding: 24px 32px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .person { display: flex; flex-direction: column; gap: 16px; } .person .portrait { position: relative; aspect-ratio: 4 / 5; background: var(--tw-linen-soft); border: 1px solid var(--tw-linen); border-radius: 4px; overflow: hidden; } .person .portrait image-slot { position: absolute; inset: 0; display: block; } .person .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .person .role { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--tw-terracotta); font-weight: 700; } .person h3 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: 1.5rem; margin: 0; line-height: 1.2; } .person p { color: var(--tw-bark); font-size: 0.98rem; line-height: 1.65; margin: 0; } @media (max-width: 880px) { .people { grid-template-columns: 1fr; } } /* ============================================================ Case study card list */ .case-list { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px 64px; display: grid; grid-template-columns: 1fr; gap: 0; } .case { padding: 48px 0; border-top: 1px solid var(--tw-linen); display: grid; grid-template-columns: minmax(180px, 1fr) 2.4fr; gap: 48px; align-items: start; } .case:last-child { border-bottom: 1px solid var(--tw-linen); } .case .stamp { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tw-terracotta); font-weight: 700; } .case .stamp .num { color: var(--tw-bark); opacity: .55; margin-right: 10px; } .case h3 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: 1.7rem; line-height: 1.2; margin: 0 0 14px; } .case p { color: var(--tw-bark); font-size: 1rem; line-height: 1.7; margin: 0 0 14px; max-width: 60ch; } .case .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .case .tag { background: var(--tw-linen); color: var(--tw-forest); font-size: 0.72rem; padding: 4px 12px; border-radius: 999px; } .case .more { color: var(--tw-amber); font-weight: 700; font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid var(--tw-amber); padding-bottom: 2px; display: inline-block; margin-top: 8px; } .case .more:hover { color: var(--tw-amber-dark); border-bottom-color: var(--tw-amber-dark); } @media (max-width: 760px) { .case { grid-template-columns: 1fr; gap: 14px; } } /* ============================================================ Offering detail (What we do page) */ .offering-detail { padding: 64px 0; border-top: 1px solid var(--tw-linen); } .offering-detail .inner { max-width: var(--tw-col-page); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(180px, 1fr) 2.4fr; gap: 48px; } .offering-detail .stamp { font-family: var(--tw-font-display); color: var(--tw-terracotta); font-size: 2.4rem; line-height: 1; } .offering-detail h2 { font-family: var(--tw-font-display); color: var(--tw-forest); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.15; margin: 0 0 16px; } .offering-detail p { color: var(--tw-bark); font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; max-width: 60ch; } .offering-detail .features, .tw-section .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 24px; border-top: 1px solid var(--tw-linen); } .offering-detail .feature, .tw-section .feature { padding: 20px 0 20px; border-bottom: 1px solid var(--tw-linen); display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: baseline; } .offering-detail .feature:nth-child(odd), .tw-section .feature:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--tw-linen); } .offering-detail .feature:nth-child(even), .tw-section .feature:nth-child(even) { padding-left: 24px; } .offering-detail .feature .label, .tw-section .feature .label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--tw-terracotta); } .offering-detail .feature p, .tw-section .feature p { font-size: 0.95rem; margin: 0; line-height: 1.55; } @media (max-width: 800px) { .offering-detail .inner { grid-template-columns: 1fr; } .offering-detail .features, .tw-section .features { grid-template-columns: 1fr; } .offering-detail .feature:nth-child(odd), .tw-section .feature:nth-child(odd) { border-right: none; padding-right: 0; } .offering-detail .feature:nth-child(even), .tw-section .feature:nth-child(even) { padding-left: 0; } } /* ============================================================ Form / contact */ .contact-form { max-width: var(--tw-col-text); margin: 0 auto; padding: 0 32px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-form .field { display: flex; flex-direction: column; gap: 8px; } .contact-form .field.wide { grid-column: 1 / -1; } .contact-form label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--tw-bark); opacity: .8; } .contact-form input, .contact-form textarea, .contact-form select { font-family: var(--tw-font-body); font-size: 1rem; padding: 12px 14px; background: var(--tw-parchment); border: 1px solid var(--tw-linen); border-radius: 4px; color: var(--tw-bark); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--tw-forest); } .contact-form textarea { min-height: 140px; resize: vertical; } .contact-form .submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 8px; } .contact-form button { font-family: var(--tw-font-body); font-weight: 700; font-size: 1rem; background: var(--tw-amber); color: var(--tw-parchment); border: 1px solid var(--tw-amber); border-radius: 4px; padding: 14px 28px; cursor: pointer; } .contact-form button:hover { background: var(--tw-amber-dark); border-color: var(--tw-amber-dark); } .contact-form .note { font-size: 0.85rem; color: var(--tw-bark); opacity: .7; font-style: italic; } @media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } } /* ============================================================ Held-for-review badge */ .hold-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--tw-terracotta); background: var(--tw-linen-soft); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(217, 101, 37, 0.2); } .hold-flag::before { content: "◆"; font-size: 0.55rem; } /* Image-slot styling: make the portrait slot read editorial */ image-slot { --image-slot-border: 1px solid var(--tw-linen); --image-slot-radius: 4px; }