/*
 * Base styles: reset, typography, links, buttons, focus, motion.
 * Uses only tokens from tokens.css. Use logical properties
 * (margin-inline, padding-block, inset-inline-start, text-align: start…)
 * — never left/right — so Hebrew (RTL) mirrors automatically.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-cream);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--c-accent);
	color: var(--c-white);
}

/* ---- Typography ---- */

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--c-text);
}

h1 {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
}

h2 {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

h3 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}

p {
	margin: 0 0 1em;
	color: var(--c-body);
	text-wrap: pretty;
}

/* Secondary lines: project location, service description, meta. */
.small {
	font-size: var(--fs-small);
	line-height: 1.75;
	color: var(--c-muted);
}

.eyebrow {
	display: block;
	margin-block-end: 4px;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* Section eyebrow (inside a page): wider tracking, more space below. */
.eyebrow--section {
	margin-block-end: 16px;
	letter-spacing: var(--tracking-eyebrow-wide);
}

/* Small uppercase label above a detail (STUDIO, EMAIL…). */
.label {
	display: block;
	margin: 0 0 10px;
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* ---- Links ---- */

a {
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--dur-fast);
}

a:hover {
	color: var(--c-accent);
}

/* Links inside running text are underlined so they're recognisable. */
.prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---- Buttons ---- */

.button {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--c-text);
	background: var(--c-text);
	color: var(--c-white);
	font-family: inherit;
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-button);
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.button:hover {
	border-color: var(--c-accent);
	background: var(--c-accent);
	color: var(--c-white);
}

.button--outline {
	background: transparent;
	color: var(--c-text);
}

.button--outline:hover {
	border-color: var(--c-text);
	background: var(--c-text);
	color: var(--c-white);
}

.button:disabled,
.button[aria-disabled="true"] {
	border-color: var(--c-muted);
	background: var(--c-muted);
	color: var(--c-white);
	cursor: default;
}

/* ---- Photo thumbnails ----
   <a class="thumb"> wrapping an <img> (or a .thumb__placeholder): the photo
   zooms inside its frame on hover/keyboard focus. Used by project and press
   thumbnails. Set the frame's shape with aspect-ratio where it's used. */

.thumb {
	display: block;
	overflow: hidden;
	background: var(--c-sand);
}

.thumb > img,
.thumb > .thumb__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-zoom) var(--ease-out);
}

.thumb:focus-visible > img,
.thumb:focus-visible > .thumb__placeholder {
	transform: scale(var(--zoom-scale));
}

/* Hover only where there's a real mouse: on phones a tap "sticks" as hover. */
@media (hover: hover) {
	.thumb:hover > img,
	.thumb:hover > .thumb__placeholder {
		transform: scale(var(--zoom-scale));
	}
}

/* Stand-in until real photos exist: sand with faint diagonal lines. */
.thumb__placeholder {
	display: block;
	background: repeating-linear-gradient(45deg, var(--c-sand) 0 14px, var(--c-line) 14px 15px);
}

/* ---- Layout helpers ---- */

.container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--page-pad-x);
}

.hairline {
	height: 0;
	margin: 0;
	border: 0;
	border-block-start: 1px solid var(--c-line);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	background: var(--c-text);
	color: var(--c-white);
}

/* ---- Keyboard focus ----
   Only show a ring for keyboard users (:focus-visible), never on mouse click. */

:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--c-accent-text);
	outline-offset: 4px;
	border-radius: 1px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--c-accent-text);
	outline-offset: 3px;
}

/* ---- Reduced motion ----
   Respect the visitor's OS setting: switch off animations and transitions. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.thumb:hover > img,
	.thumb:hover > .thumb__placeholder,
	.thumb:focus-visible > img,
	.thumb:focus-visible > .thumb__placeholder {
		transform: none;
	}
}

/* "Opens in a new tab" arrow (↗) — points the reading direction, so ↖ in Hebrew. */
/* Sized with the text; -0.16em puts its middle on the middle of the letters
   (English capitals and Hebrew letters alike). */
.icon--external {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.16em;
}

/* Hebrew letters sit a little lower than English capitals. */
:lang(he) .icon--external {
	vertical-align: -0.19em;
}

[dir="rtl"] .icon--external {
	transform: scaleX(-1);
}

/* English UPPERCASE labels on phones: capitals look bigger than lowercase, so
   they may go a bit under the 16px phone minimum. Hebrew has no capitals and
   keeps 16px; the phone menu keeps its size. From 768px each keeps its own size. */
@media (max-width: 767.98px) {
	:lang(en) :is(
		.eyebrow, .label, .button,
		.hero__button, .selected-work__all,
		.site-footer__label, .site-footer__social li > span,
		.link-rows__label, .about-stats__label, .award__type,
		.press-row__more, .project-card__scrim span,
		.project-details__label, .project-press__label, .project-press__more,
		.project-pager__label
	) {
		font-size: var(--fs-caps-phone);
	}
}

/* Photo fade-in while loading (assets/js/header.js). Also keeps the .thumb zoom. */
img.img-fade {
	opacity: 0;
	transition: opacity 0.6s ease, transform var(--dur-zoom) var(--ease-out);
}

img.img-fade.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	img.img-fade {
		transition: none;
	}
}

/* Bigger tap area (44px tall) for small stand-alone links, without moving
   anything: padding adds the area, the same negative margin takes the space
   back (phone QA, 2026-09-27). */
.site-footer__text a,
.contact-info__text a,
.project-back a {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

.site-header__logo {
	padding-block: 14px;
	margin-block: -14px;
}