/* ===========================================================================
   Techno Goober — site look layer
   ---------------------------------------------------------------------------
   Brings the home page's design language ("Built by AI. Backed by the Goobers.")
   to the rest of the site WITHOUT rewriting page markup.

   HOW THIS WORKS
   The interior pages are Tailwind markup from the theme build plus a handful of
   component classes the theme defines: .btn / .btn-primary / .btn-outline,
   .card, .eyebrow, .container-tg, .reveal, .rise, .section-tint. This file
   restyles those components to match the home page and adds the home page's
   alternating dark / warm-paper section rhythm, so no page needs editing.

   LOAD ORDER — this file must come AFTER:
       wp-content/themes/techno-goober/dist/styles.css   (the Tailwind build)
       assets/tg-theme.css                               (the palette tokens)
   Tailwind utilities and this file have comparable specificity, so source order
   is what decides. Every rule that has to beat a bare utility (.text-white) is
   written with a scoping ancestor so it wins on specificity too, not just order.

   WHAT IT DOES NOT DO
   It does not touch copy, structure, or the header and footer. It is additive
   and fully reversible: delete the two link/script tags and the site returns to
   the previous theme exactly.

   DURABILITY — a fresh WordPress export will not carry this file or its link
   tags. Same caveat as assets/tg-theme.css; see assets/THEME-SOURCE-PATCH.md.
   =========================================================================== */

:root{
	/* The home page's names, mapped onto the tokens tg-theme.css already sets.
	   Anything authored later can use either vocabulary and get the same colour. */
	--tg-charcoal:      #171C1A;
	--tg-charcoal-2:    #1F2624;
	--tg-charcoal-3:    #2A322F;
	--tg-cream:         #F7F3EA;
	--tg-cream-2:       #EFE8D9;
	--tg-cream-3:       #E3DAC7;

	--tg-green:         #4AB683;
	--tg-green-dk:      #2C7654;
	--tg-green-lt:      #7FDCAE;
	--tg-amber:         #FFB13B;
	--tg-amber-dk:      #C97C10;
	--tg-blue:          #2D7FF9;
	--tg-blue-dk:       #1A5FC8;
	--tg-blue-lt:       #7FB0FF;

	--tg-on-dark:       #F4F1E9;
	--tg-on-dark-mute:  #A6B2AD;
	--tg-on-light:      #171C1A;
	--tg-on-light-mute: #5A6461;

	--tg-mono: ui-monospace, "SF Mono", Menlo, monospace;
	--tg-r-lg: 1.5rem;
	--tg-r-md: 1.1rem;
}

/* ===========================================================================
   1. TYPE
   The home page runs tighter tracking and a flatter leading on display type
   than the theme did. Matching it is most of why the two now read as one site.
   =========================================================================== */

body{ font-size:17px; }

main h1, main h2, main h3, main h4,
footer h2, footer h3{
	font-family:var(--font-display, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif);
	letter-spacing:-0.025em;
}
main h1{ line-height:.96; letter-spacing:-0.03em; }
main h2{ line-height:1.02; }
main h3{ line-height:1.12; letter-spacing:-0.02em; }

/* Section headings on interior pages were set with fixed Tailwind steps
   (text-3xl md:text-4xl). The home page uses a fluid clamp, which is what keeps
   a heading from looking undersized on a wide screen and cramped on a phone. */
main h1.text-4xl{ font-size:clamp(2.5rem, 6.4vw, 4.6rem); }
main h2.text-3xl{ font-size:clamp(2rem, 4.2vw, 3.1rem); }
main h2.text-4xl{ font-size:clamp(2.15rem, 4.7vw, 3.6rem); }

/* Body copy: the home page's measure and rhythm. */
main p.text-lg,
main p.md\:text-xl{ line-height:1.65; }

/* ---- the mono kicker -----------------------------------------------------
   The theme's .eyebrow was already a tracked mono label. The home page's
   version adds the short rule before it — a small thing that appears on every
   section of the home page, so its absence everywhere else was conspicuous. */
.eyebrow{
	font-size:.72rem; letter-spacing:.2em; font-weight:600; gap:.6rem;
	color:var(--tg-green);
}
.eyebrow::before{
	content:""; width:1.75rem; height:2px; flex:none;
	background:currentColor; border-radius:2px; opacity:.55;
}

/* ---- accent words --------------------------------------------------------
   Available for authoring; the home page picks one word out of a heading. */
.hl-green{ color:var(--tg-green); }
.hl-amber{ color:var(--tg-amber); }
.hl-blue{ color:var(--tg-blue-lt); }

/* ---- marker highlight ----------------------------------------------------
   The word sits above the sweep and is always readable, so if JS never runs the
   copy is unaffected. .mark-armed / .mark-in are set by tg-motion.js. */
.mark{ position:relative; white-space:nowrap; }
.mark > span{ position:relative; z-index:1; }
.mark::after{
	content:""; position:absolute; left:-.16em; right:-.16em; bottom:.02em; height:.42em;
	background:var(--tg-amber); border-radius:.28em; z-index:0;
	transform:scaleX(1); transform-origin:left center;
}
.mark--blue::after{ background:var(--tg-blue-lt); }
.mark--green::after{ background:var(--tg-green-lt); }
.mark.mark-armed::after{ transform:scaleX(0); }
.mark.mark-in::after{ transform:scaleX(1); transition:transform .5s cubic-bezier(.22,.8,.2,1); }

/* ===========================================================================
   2. BUTTONS
   The single loudest signature of the home page: a fat pill sitting on a hard
   offset shadow that compresses when pressed. The theme's buttons were soft
   rounded rectangles with a blurred glow — a different product entirely.
   =========================================================================== */

.btn{
	font-weight:700; font-size:1rem; line-height:1;
	padding:1.05rem 1.65rem; border-radius:999px;
	border:2px solid transparent;
	transition:transform .16s ease, box-shadow .22s ease,
	           background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{
	background:var(--tg-green); color:#08251A;
	box-shadow:0 .55rem 0 -.05rem var(--tg-green-dk);
}
.btn-primary:hover{
	background:var(--tg-green); color:#08251A;
	transform:translateY(-3px); box-shadow:0 .8rem 0 -.05rem var(--tg-green-dk);
}
.btn-primary:active{ transform:translateY(2px); box-shadow:0 .25rem 0 -.05rem var(--tg-green-dk); }

.btn-outline{
	background:transparent; border:2px solid rgba(244,241,233,.28); color:var(--tg-on-dark);
}
.btn-outline:hover{
	background:transparent; border-color:var(--tg-green); color:#fff; transform:translateY(-2px);
}

/* Weights the home page introduced. Nothing references them yet; they exist so
   a second amber is never invented on the next page somebody builds. */
.btn-amber{ background:var(--tg-amber); color:#3A2405; box-shadow:0 .55rem 0 -.05rem var(--tg-amber-dk); }
.btn-amber:hover{ transform:translateY(-3px); box-shadow:0 .8rem 0 -.05rem var(--tg-amber-dk); }
.btn-amber:active{ transform:translateY(2px); box-shadow:0 .25rem 0 -.05rem var(--tg-amber-dk); }
.btn-ink{ background:var(--tg-charcoal); color:var(--tg-cream); box-shadow:0 .55rem 0 -.05rem #000; }
.btn-ink:hover{ transform:translateY(-3px); box-shadow:0 .8rem 0 -.05rem #000; }

/* The header's buttons stay compact — a 1.05rem pill would break the 4.5rem bar. */
header .btn{ padding:.7rem 1.15rem; font-size:.9rem; border-width:2px; }
header .btn-primary{ box-shadow:0 .35rem 0 -.05rem var(--tg-green-dk); }
header .btn-primary:hover{ box-shadow:0 .5rem 0 -.05rem var(--tg-green-dk); }

/* Amber focus ring, matching the home page. */
:focus-visible{ outline:3px solid var(--tg-amber); outline-offset:3px; border-radius:6px; }

/* ===========================================================================
   3. CARDS
   The theme card carried a green gradient border and a glow on hover. The home
   page's cards are quieter — flat surface, honest hairline, a lift. Quieter is
   right when six of them sit in a row.
   =========================================================================== */

main .card{
	background:var(--tg-charcoal-2);
	border:1px solid rgba(244,241,233,.10);
	border-radius:var(--tg-r-md);
	box-shadow:none;
}
main .card:hover{
	transform:translateY(-4px);
	border-color:rgba(74,182,131,.45);
	box-shadow:0 1.25rem 2.5rem -1.5rem rgba(0,0,0,.85);
}
main .card::before{ display:none; }

/* The mono index number the home page puts above each card title. */
.tg-num{
	font-family:var(--tg-mono); font-size:.7rem; font-weight:700; letter-spacing:.18em;
	color:var(--tg-green); display:block; margin-bottom:.9rem;
}

/* ---- the margin note -----------------------------------------------------
   Carried over from the home page and the concept pages. Every service has an
   honest qualifier that normally gets buried; this is where it goes. */
.tg-note{
	position:relative; margin-top:2rem; padding:1.15rem 1.35rem 1.15rem 1.5rem;
	border-left:3px solid var(--tg-amber); border-radius:0 var(--tg-r-md) var(--tg-r-md) 0;
	background:rgba(255,177,59,.07); font-size:.97rem; line-height:1.6;
}
.tg-note b, .tg-note strong{
	display:block; font-family:var(--tg-mono); font-size:.68rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--tg-amber); margin-bottom:.45rem; font-weight:700;
}

/* ---- hand-drawn doodles --------------------------------------------------
   Same contract as the home page: stroke only, drawn on by tg-motion.js. */
.doodle{ position:absolute; pointer-events:none; overflow:visible; }
.doodle path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.doodle--amber path{ stroke:var(--tg-amber); }
.doodle--green path{ stroke:var(--tg-green); }
.doodle--blue path{ stroke:var(--tg-blue); }

/* ===========================================================================
   4. SECTION RHYTHM
   The home page alternates charcoal and warm paper. Interior pages were dark
   top to bottom, which is the main reason they still felt like a different
   site even after the palette was unified.

   Every other content section becomes paper. The hero keeps the dark ground
   and the closing CTA keeps its own treatment, so the alternation runs through
   the middle of the page where the content is. Opt a section out with
   data-tg-dark, or force one in with data-tg-paper. A page that ships its own
   page-level design system opts out wholesale with data-tg-plain on <main>
   (ai-websites does this — it already alternates on its own terms).
   =========================================================================== */

/* The hero and the closing CTA carry their own tuned spacing; everything
   between them gets the home page's section rhythm. */
main > section:not(:first-of-type):not(:last-of-type){ padding-block:clamp(3.5rem, 7vw, 6rem); }

main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]),
main:not([data-tg-plain]) > section[data-tg-paper]{
	background:var(--tg-cream);
	color:var(--tg-on-light);
	border-top-color:rgba(23,28,26,.10);
}
/* A tinted section that lands on a paper beat must not paint over it. */
main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]).section-tint{
	background:var(--tg-cream-2);
}

/* ---- everything inside a paper band -------------------------------------
   The Tailwind colour utilities in the markup all assume a dark ground. Each
   one is remapped here rather than in the markup, so no page is edited and the
   whole inversion can be undone by deleting this block. */
:is(main:not([data-tg-plain]) > section:nth-of-type(2n):not(:first-of-type):not(:last-of-type):not([data-tg-dark]),
    main:not([data-tg-plain]) > section[data-tg-paper]){

	& .text-white,
	& .text-cream{ color:var(--tg-on-light); }
	& .text-cream\/90{ color:rgba(23,28,26,.90); }
	& .text-cream\/80{ color:rgba(23,28,26,.78); }
	& .text-muted{ color:var(--tg-on-light-mute); }
	& .text-brand,
	& .text-brand-300{ color:var(--tg-green-dk); }
	& .text-line{ color:var(--tg-cream-3); }
	& .text-brand\/40{ color:rgba(44,118,84,.40); }
	& .text-gradient{
		background:none; -webkit-background-clip:border-box; background-clip:border-box;
		color:var(--tg-green-dk);
	}

	& .border-line,
	& .border-line\/60{ border-color:rgba(23,28,26,.12); }
	& .border-brand\/30{ border-color:rgba(44,118,84,.35); }

	& .bg-white\/\[0\.02\]{ background-color:rgba(23,28,26,.03); }
	& .bg-ink-900{ background-color:var(--tg-cream-2); }
	& .bg-brand\/12{ background-color:rgba(74,182,131,.16); }
	& .bg-brand\/15{ background-color:rgba(74,182,131,.18); }
	& .bg-brand\/10{ background-color:rgba(74,182,131,.14); }
	& .ring-white\/5{ --tw-ring-color:rgba(23,28,26,.07); }
	& .hover\:bg-white\/5:hover{ background-color:rgba(23,28,26,.05); }

	& .eyebrow{ color:var(--tg-green-dk); }
	& .hl-green{ color:var(--tg-green-dk); }
	& .hl-amber{ color:var(--tg-amber-dk); }
	& .hl-blue{ color:var(--tg-blue-dk); }

	/* Hover states written as "go brighter" have to become "go darker". */
	& .hover\:text-white:hover{ color:#000; }
	& .hover\:text-brand-300:hover,
	& .group:hover .group-hover\:text-brand-300{ color:var(--tg-green-dk); }
	& .hover\:border-brand\/50:hover{ border-color:rgba(44,118,84,.55); }

	/* Cards on paper are white with a warm hairline, as on the home page. */
	& .card{
		background:#fff;
		border:2px solid var(--tg-cream-3);
		box-shadow:none;
	}
	& .card:hover{
		border-color:rgba(44,118,84,.45);
		box-shadow:0 1.1rem 2.2rem -1.4rem rgba(23,28,26,.35);
	}

	& .btn-outline{ border-color:rgba(23,28,26,.22); color:var(--tg-on-light); background:transparent; }
	& .btn-outline:hover{ border-color:var(--tg-on-light); color:var(--tg-on-light); background:transparent; }
	& .btn-ghost{ color:var(--tg-on-light); }
	& .btn-ghost:hover{ color:var(--tg-green-dk); }

	& .prose-tg{ color:#3A4441; }
	& .prose-tg h2, & .prose-tg h3, & .prose-tg h4, & .prose-tg strong{ color:var(--tg-on-light); }
	& .prose-tg a{ color:var(--tg-green-dk); }
	& .prose-tg a:hover{ color:#1D5238; }
	& .prose-tg blockquote{ color:var(--tg-on-light-mute); border-left-color:var(--tg-green-dk); }

	& .tg-num{ color:var(--tg-green-dk); }
	& .tg-note{ background:rgba(201,124,16,.09); border-left-color:var(--tg-amber-dk); }
	& .tg-note b, & .tg-note strong{ color:var(--tg-amber-dk); }
	& .doodle--amber path{ stroke:var(--tg-amber-dk); }
	& .doodle--green path{ stroke:var(--tg-green-dk); }

	/* The theme paints a dark scrim over card images; on paper it reads as dirt. */
	& .bg-gradient-to-t.from-ink-900\/70{ background-image:none; }
}

/* ---- hero ----------------------------------------------------------------
   The home page's two soft glows — blue on the left, green on the right. The
   theme's body gradient is a single green wash; this is what gives the top of
   the page the same depth the home page has. */
main:not([data-tg-plain]) > section:first-of-type{ position:relative; overflow:hidden; }
main:not([data-tg-plain]) > section:first-of-type::before{
	content:""; position:absolute; z-index:0; inset:-45% 48% 30% -25%; pointer-events:none;
	background:radial-gradient(closest-side, rgba(45,127,249,.18), transparent 72%); filter:blur(10px);
}
main:not([data-tg-plain]) > section:first-of-type::after{
	content:""; position:absolute; z-index:0; inset:18% -22% -40% 50%; pointer-events:none;
	background:radial-gradient(closest-side, rgba(74,182,131,.20), transparent 72%); filter:blur(10px);
}
main:not([data-tg-plain]) > section:first-of-type > *{ position:relative; z-index:1; }

/* ---- the closing CTA band ------------------------------------------------
   Shared across every page, and it sits OUTSIDE <main>, as a sibling just
   before the footer — which is why it is addressed here as `main ~ section`
   rather than as the last section of the page. The home page ends on flat
   green, so this does too: the last thing on the page should be loud. */
main ~ section .rounded-\[2rem\]{
	background:var(--tg-green);
	background-image:none;
	border-color:rgba(8,37,26,.25);
	color:#08251A;
}
main ~ section .rounded-\[2rem\] :is(h2,h3,.text-white,.text-cream){ color:#08251A; }
main ~ section .rounded-\[2rem\] :is(.text-muted,.text-cream\/80){ color:#14402E; }
/* The gradient span paints through background-clip; on green it would vanish. */
main ~ section .rounded-\[2rem\] .text-gradient{
	background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#0B3D28;
}
main ~ section .rounded-\[2rem\] .eyebrow{ color:#14402E; }
main ~ section .rounded-\[2rem\] .btn-primary{
	background:var(--tg-charcoal); color:var(--tg-cream); box-shadow:0 .55rem 0 -.05rem #000;
}
main ~ section .rounded-\[2rem\] .btn-primary:hover{ background:var(--tg-charcoal); box-shadow:0 .8rem 0 -.05rem #000; }
main ~ section .rounded-\[2rem\] .btn-outline{ border-color:rgba(8,37,26,.4); color:#08251A; }
main ~ section .rounded-\[2rem\] .btn-outline:hover{ border-color:#08251A; color:#08251A; background:transparent; }
/* Decorative glows behind the old dark panel read as smudges on flat green. */
main ~ section .rounded-\[2rem\] [class*="blur-"],
main ~ section .rounded-\[2rem\] .bg-gradient-to-t{ display:none; }

/* ===========================================================================
   5. MOTION SAFETY
   Nothing here hides content. tg-motion.js sets every "before" state itself,
   and only once GSAP has actually loaded, so a blocked or failed script leaves
   a fully readable page. The theme's own CSS reveal is stood down in favour of
   the GSAP one — see tg-motion.js — but only by the script, never by CSS.
   =========================================================================== */

@media (prefers-reduced-motion: reduce){
	.btn, main .card{ transition:none; }
	.mark.mark-armed::after{ transform:scaleX(1); }
}