/*
Theme Name: North Interiors
Template: aw-base
Description: Child theme for northinteriors.com.au. Option D, the mosaic: edge to edge photography, quiet type, one close block.
Version: 0.1.0
Text Domain: northinteriors
*/

/* ---------- Type ----------
   Self-hosted, no Google Fonts requests. The two family names below are the only
   place a licensed face needs to be named to replace Jost / Instrument Sans. */
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
	--ni-font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--ni-font-brand: "Jost", "Futura", sans-serif;

	--ni-ground: #f6f4f0;
	--ni-ground-alt: #ece7df;
	--ni-white: #ffffff;
	--ni-ink: #24221f;
	--ni-ink-soft: #6a655e; /* 5.3:1 on the ground colour */
	--ni-rule: #d9d3c9;
	--ni-margin: 80px;
	--ni-gutter: 40px;
	--ni-seam: 4px;
	--ni-label: 11px;

	/* Bridge onto the aw-base / aw-forms tokens so anything from the starter picks up the brand. */
	--aw-color-bg: var(--ni-ground);
	--aw-color-text: var(--ni-ink);
	--aw-color-muted: var(--ni-ink-soft);
	--aw-color-border: var(--ni-rule);
	--aw-color-accent: var(--ni-ink);
	--aw-color-accent-text: var(--ni-ground);
	--aw-color-link: var(--ni-ink);
	--aw-font-body: var(--ni-font-ui);
	--aw-font-heading: var(--ni-font-ui);
	--aw-font-weight-heading: 400;
	--aw-radius: 0;
	--aw-button-radius: 0;
}
@media (max-width: 960px) { :root { --ni-margin: 40px; --ni-gutter: 24px; } }
@media (max-width: 700px) { :root { --ni-margin: 20px; --ni-gutter: 12px; --ni-seam: 3px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ni-ground); color: var(--ni-ink); font-family: var(--ni-font-ui); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.ni-white { background: var(--ni-white); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.screen-reader-text, .ni-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ni-skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ni-ink); color: var(--ni-ground); padding: 10px 14px; font-size: 13px; }
.ni-skip:focus { top: 8px; }

.label { font-size: var(--ni-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.caption { font-size: 12px; line-height: 1.45; letter-spacing: .01em; }
.link-line { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-line:hover { opacity: .6; }

/* ---------- Bar ---------- */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 32px; color: var(--ni-ink); position: relative; z-index: 3; }
.bar--over { position: absolute; top: 0; left: 0; right: 0; color: #fff; text-shadow: 0 0 14px rgba(0,0,0,.4); }
.bar--over .bar__logo svg { filter: drop-shadow(0 0 8px rgba(0,0,0,.35)); }
.bar__logo { display: block; width: 210px; line-height: 0; }
.bar__logo svg { width: 100%; height: auto; display: block; }
.bar__right { display: flex; align-items: center; gap: 36px; }
.bar__list { display: flex; gap: 26px; list-style: none; }
.bar a { position: relative; }
.bar__list a:hover, .bar__phone:hover { opacity: .6; }
.bar__list a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bar__mobile { display: none; }
.bar__mobile a, .bar__menu { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
@media (max-width: 960px) { .bar__list { gap: 18px; } .bar__right { gap: 22px; } .bar__logo { width: 180px; } }
@media (max-width: 800px) {
	.bar { padding: 20px 16px; }
	.bar__right { display: none; }
	.bar__mobile { display: flex; align-items: center; gap: 18px; }
	.bar__logo { width: 142px; }
}

.drawer { position: fixed; inset: 0; z-index: 20; background: var(--ni-ground); color: var(--ni-ink); display: flex; flex-direction: column; padding: 20px 16px 32px; overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__top .bar__logo { width: 142px; }
.drawer__close { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.drawer__list { list-style: none; margin-top: 64px; display: grid; gap: 20px; font-size: 26px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.drawer__contact { text-transform: none; letter-spacing: 0; margin-top: auto; padding-top: 48px; display: grid; gap: 6px; font-size: 14px; }
body.drawer-open { overflow: hidden; }

/* ---------- Tiles ---------- */
.tile { position: relative; overflow: hidden; color: #fff; display: block; }
.tile figure { height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.tile:hover img { transform: scale(1.025); }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 15, .08); pointer-events: none; }
.tile figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 12px; line-height: 1.5; text-shadow: 0 0 18px rgba(0,0,0,.5), 0 0 3px rgba(0,0,0,.3); }
.tile figcaption span { display: block; opacity: .9; font-size: 11px; }
.tile:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ni-ink); }
.tile:hover figcaption strong, .tile:focus-visible figcaption strong { border-bottom: 1px solid #fff; }
.tile figcaption strong { font-weight: 400; border-bottom: 1px solid transparent; }
.wide { height: 100vh; height: 100svh; min-height: 560px; }
.wide--inner { height: auto; aspect-ratio: 16 / 8; min-height: 0; margin-top: var(--ni-seam); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ni-seam); margin-top: var(--ni-seam); }
.pair .tile { aspect-ratio: 4 / 5; }
@media (max-width: 700px) {
	.wide { height: 88svh; min-height: 0; }
	.pair { grid-template-columns: minmax(0, 1fr); }
	.wide--inner { height: auto; aspect-ratio: 4 / 5; }
	.tile figcaption { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } .tile:hover img { transform: none; } }

/* ---------- Statement, close ---------- */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--ni-gutter); padding: 150px var(--ni-margin); }
.statement h1 { grid-column: 2 / 7; font-weight: 400; font-size: 30px; line-height: 1.28; }
.statement .body { grid-column: 8 / 12; padding-top: 8px; }
.statement .body p + p { margin-top: 1em; }
.statement .links { margin-top: 26px; display: flex; gap: 26px; }

.close { background: var(--ni-ground-alt); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--ni-gutter); padding: 120px var(--ni-margin) 0; }
.close .ask { grid-column: 2 / 7; font-size: 30px; line-height: 1.28; }
.close .ask a { border-bottom: 1px solid var(--ni-ink); }
.close .ask a:hover { opacity: .6; }
.close .cols { grid-column: 8 / 12; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; font-size: 13px; padding-top: 8px; }
.close .cols .label { color: var(--ni-ink-soft); margin-bottom: 6px; }
.close .cols a:hover { opacity: .6; }
.close .with { grid-column: 2 / 12; margin-top: 90px; font-size: 13px; color: var(--ni-ink-soft); }
@media (max-width: 960px) {
	.grid12, .close { display: block; padding: 80px var(--ni-margin); }
	.statement h1, .close .ask { font-size: 24px; margin-bottom: 24px; }
	.close { padding-bottom: 0; }
	.close .cols { margin-top: 40px; max-width: 420px; }
	.close .with { margin-top: 48px; }
}
@media (max-width: 700px) { .statement h1, .close .ask { font-size: 22px; } }

/* ---------- Footer ---------- */
.footer { padding: 48px var(--ni-margin) 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--ni-ink-soft); }
.footer .credit { opacity: .8; }
.footer a:hover { color: var(--ni-ink); }
.footer__right { display: flex; gap: 24px; }
.footer--close { background: var(--ni-ground-alt); padding-top: 70px; }
@media (max-width: 700px) { .footer { flex-direction: column; gap: 10px; } .footer--close { padding-top: 56px; } }

/* ---------- Pages ---------- */
.page-head { padding: 64px var(--ni-margin) 40px; }
.page-head h1, .prose h1 { font-weight: 400; font-size: 30px; line-height: 1.28; }
.page-head p { margin-top: 12px; max-width: 46ch; color: var(--ni-ink-soft); }
.prose { padding: 64px var(--ni-margin) 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--ni-gutter); }
.prose > * { grid-column: 2 / 9; }
.prose h1 { margin-bottom: 28px; }
.prose h2 { font-weight: 500; font-size: 15px; margin: 2em 0 .4em; }
.prose p, .prose ul, .prose ol { max-width: 62ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose a { border-bottom: 1px solid currentColor; }
@media (max-width: 960px) { .prose { display: block; padding: 48px var(--ni-margin) 80px; } }
.mosaic-section-title { padding: 80px var(--ni-margin) 24px; }
.mosaic-section-title p { margin-top: 6px; color: var(--ni-ink-soft); font-size: 13px; }
.mosaic > .wide--inner:first-child, .mosaic > .pair:first-child { margin-top: 0; }

/* ---------- Single project ---------- */
.project { padding: 120px var(--ni-margin); }
.project__text { grid-column: 2 / 7; }
.project__text h2 { font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ni-ink-soft); margin-bottom: 10px; }
.project__text section + section { margin-top: 44px; }
.project__text p + p { margin-top: 1em; }
.project__text ul { padding-left: 1.2em; margin-top: 1em; }
.facts { grid-column: 8 / 12; font-size: 13px; display: grid; gap: 16px; align-content: start; padding-top: 4px; }
.facts dt { font-size: var(--ni-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ni-ink-soft); }
.project--facts-only { padding-top: 56px; padding-bottom: 56px; }
.project--facts-only .facts { grid-column: 2 / 7; }
@media (max-width: 960px) { .project { display: block; padding: 64px var(--ni-margin); } .facts { margin-top: 48px; } }
.gallery { display: grid; gap: var(--ni-seam); }
.gallery img { width: 100%; height: auto; }
.gallery .g-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ni-seam); align-items: start; }
.gallery .g-solo { width: 50%; margin: 0 auto; }
@media (max-width: 700px) { .gallery .g-pair { grid-template-columns: minmax(0, 1fr); } .gallery .g-solo { width: 100%; } }
.next-label { padding: 100px var(--ni-margin) 20px; color: var(--ni-ink-soft); }
.tile--next { aspect-ratio: 16 / 8; }
@media (max-width: 700px) { .tile--next { aspect-ratio: 4 / 5; } }

/* ---------- Contact ---------- */
.contact { padding: 64px var(--ni-margin) 120px; }
.contact__main { grid-column: 2 / 7; }
.contact__main h1 { font-weight: 400; font-size: 30px; line-height: 1.28; margin-bottom: 12px; }
.contact__intro { color: var(--ni-ink-soft); margin-bottom: 40px; max-width: 46ch; }
.contact__aside { grid-column: 8 / 12; display: grid; gap: 26px; align-content: start; font-size: 13px; padding-top: 8px; }
.contact__aside .label { color: var(--ni-ink-soft); margin-bottom: 6px; }
.contact__aside a:hover { opacity: .6; }
.contact__note { margin-top: 28px; font-size: 12px; color: var(--ni-ink-soft); max-width: 46ch; }
.contact__note a { border-bottom: 1px solid currentColor; }
@media (max-width: 960px) { .contact { display: block; padding: 40px var(--ni-margin) 80px; } .contact__aside { margin-top: 56px; } }

/* aw-forms, restyled: underlined fields, no boxes. */
.contact .aw-form { display: grid; gap: 22px; }
.contact .aw-form__field, .contact .aw-field { display: grid; gap: 6px; }
.contact .aw-form label, .contact .aw-form legend { font-size: var(--ni-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ni-ink-soft); }
.contact .aw-form input[type="text"], .contact .aw-form input[type="email"], .contact .aw-form input[type="tel"], .contact .aw-form input[type="number"], .contact .aw-form select, .contact .aw-form textarea {
	width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ni-ink); border-radius: 0; padding: 8px 0; font: inherit; font-size: 15px; color: var(--ni-ink); -webkit-appearance: none; appearance: none;
}
.contact .aw-form select { background-image: linear-gradient(45deg, transparent 50%, var(--ni-ink) 50%), linear-gradient(135deg, var(--ni-ink) 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.contact .aw-form textarea { min-height: 120px; border: 1px solid var(--ni-ink); padding: 10px; }
.contact .aw-form input:focus-visible, .contact .aw-form select:focus-visible, .contact .aw-form textarea:focus-visible { outline: 2px solid var(--ni-ink); outline-offset: 3px; }
.contact .aw-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.contact .aw-form input[type="radio"] { accent-color: var(--ni-ink); margin-right: 8px; }
.contact .aw-form fieldset label { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ni-ink); }
.contact .aw-form button[type="submit"], .contact .aw-form .aw-form__submit {
	justify-self: start; background: var(--ni-ink); color: var(--ni-ground); border: 1px solid var(--ni-ink); border-radius: 0; padding: 14px 34px; font: inherit; font-size: var(--ni-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.contact .aw-form button[type="submit"]:hover { background: transparent; color: var(--ni-ink); }
.contact .aw-form button[type="submit"]:focus-visible { outline: 2px solid var(--ni-ink); outline-offset: 3px; }
.contact .aw-form__notice { padding: 14px 0; border-top: 1px solid var(--ni-ink); border-bottom: 1px solid var(--ni-ink); margin-bottom: 20px; }
.contact .aw-form__error { color: #8a2a12; font-size: 12px; }

/* ---------- 404 ---------- */
.nf { padding: 120px var(--ni-margin) 160px; }
.nf h1 { font-weight: 400; font-size: 30px; line-height: 1.28; }
.nf p { margin-top: 14px; max-width: 46ch; }
.nf .links { margin-top: 26px; display: flex; gap: 26px; }