/*
Theme Name: Nooscope
Theme URI: https://nooscope.example
Author: Nooscope Studio
Description: A block theme for a studio of visuals and programming for gigs, events and shows. Bold black-and-white identity built around the Nooscope logo, self-hosted fonts (Latin + Greek), a live inverting "lens" hero, and a Projects post type.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nooscope
*/

::selection { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.nsc-deep :where(a, button):focus-visible { outline-color: var(--wp--preset--color--paper); }

/* Header: the mark, then the name */
.nsc-header { border-bottom: 1px solid var(--wp--preset--color--rule); }
.nsc-logo { display: inline-flex; color: var(--wp--preset--color--ink); }
.nsc-logo svg { height: 2.1rem; width: auto; display: block; }
.nsc-logo:hover { color: var(--wp--preset--color--graphite); }

/* Hero: giant type under a static glass lens (see assets/js/lens.js).
   Without JavaScript the headline is simply shown as large text. */
.nsc-hero {
	position: relative; isolation: isolate; background: var(--wp--preset--color--paper);
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: max(34rem, calc(100svh - 4.5rem));
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.nsc-hero > * { margin-block: 0; }
.nsc-hero__canvas { display: none; }
.nsc-hero.is-ready .nsc-hero__canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; }
.nsc-hero__title {
	font-size: var(--wp--preset--font-size--3xl); line-height: .9; letter-spacing: -0.05em;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
/* Once the lens is drawn, the <h1> stays for screen readers and search engines only. */
.nsc-hero.is-ready .nsc-hero__title {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nsc-hero__bar {
	position: relative; z-index: 1; background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 1.1rem var(--wp--preset--spacing--40); gap: 1rem 2rem;
}
.nsc-hero__lede { max-width: 38rem; font-weight: 500; font-size: var(--wp--preset--font-size--sm); line-height: 1.45; }

/* Annotation text: small mono, for captions and meta */
.nsc-note { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--graphite); }

/* Disciplines: columns divided by heavy rules */
.nsc-legend > .wp-block-column { border-top: 4px solid var(--wp--preset--color--ink); padding-top: var(--wp--preset--spacing--30); }

/* Project cards: the image inverts when pointed at */
.nsc-project .wp-block-post-featured-image { background: var(--wp--preset--color--rule); overflow: hidden; }
.nsc-project .wp-block-post-featured-image img { transition: filter .2s; }
.nsc-project:hover .wp-block-post-featured-image img,
.nsc-project:focus-within .wp-block-post-featured-image img { filter: grayscale(1) contrast(1.1); }
.nsc-project .wp-block-post-title { margin-block-start: .75rem; }

/* Inverted section */
.nsc-deep a { color: inherit; }
.nsc-deep .wp-block-button__link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.nsc-deep .wp-block-button__link:hover { background: var(--wp--preset--color--rule); color: var(--wp--preset--color--ink); }
.nsc-deep .nsc-note { color: #A8A8A8; }
.nsc-mark { display: block; width: min(100%, 15rem); height: auto; margin-inline: auto; color: var(--wp--preset--color--paper); }
@media (max-width: 781px) { .nsc-mark { width: 7rem; margin-inline: 0; } }

/* Footer */
.nsc-footer { border-top: 1px solid var(--wp--preset--color--rule); }

/* Long-form content */
.wp-block-post-content :where(p, li) { max-width: 64ch; }
.wp-block-post-content :where(.alignwide, .alignfull) { max-width: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}



/* Small screens */
@media (max-width: 600px) {
	.nsc-slice { --fs: 25vw; }
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
}
.nsc-split__body > .nsc-quiet { margin-top: var(--wp--preset--spacing--40); }


/* Contact form */
.nsc-form-wrap { margin-top: var(--wp--preset--spacing--50); }
.nsc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; max-width: 40rem; }
.nsc-field { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.nsc-field--full { grid-column: 1 / -1; }
.nsc-field label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); line-height: 1.5; color: var(--wp--preset--color--graphite); }
.nsc-field label span { opacity: .75; }
.nsc-field :where(input[type="text"], input[type="email"], select, textarea) {
	width: 100%; font: inherit; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink); border-radius: .5rem; padding: 1rem 1.1rem; line-height: 1.4;
}
.nsc-field textarea { min-height: 10rem; resize: vertical; }
.nsc-field select {
	appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1.1rem center;
}
.nsc-field :where(input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.nsc-field :where(input, textarea)::placeholder { color: #8a8a8a; }
.nsc-consent { flex-direction: row; align-items: flex-start; gap: .85rem; }
.nsc-consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--wp--preset--color--ink); }
.nsc-consent label { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--graphite); line-height: 1.55; }
.nsc-consent label a { color: inherit; }
.nsc-form__submit {
	justify-self: start; cursor: pointer; border: 0; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); font-weight: 600; padding: .95rem 1.6rem;
}
.nsc-form__submit:hover { background: var(--wp--preset--color--graphite); }
.nsc-form__submit:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.nsc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nsc-notice { max-width: 40rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-radius: .5rem; font-weight: 500; }
.nsc-notice--success { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.nsc-notice--error { border: 2px solid var(--wp--preset--color--ink); }
@media (max-width: 600px) { .nsc-form { grid-template-columns: 1fr; } }
.nsc-field .nsc-form__submit { align-self: flex-start; }
main > .wp-block-post-title + .wp-block-post-content { margin-top: var(--wp--preset--spacing--50); }