:root {
  --ink: #18201e;
  --tile: #f5f4ef;
  --grout: #d6d4cb;
  --accent: #c94f3f;
  color: var(--ink);
  background: var(--tile);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.room { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1.2rem, 4vw, 4rem); gap: 1.5rem; }
.site-switcher { display: flex; gap: .9rem; font: 600 .75rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.site-switcher a { color: var(--ink); text-decoration: none; opacity: .48; border-bottom: 1px solid transparent; padding-bottom: .25rem; }
.site-switcher a:hover, .site-switcher a:focus-visible, .site-switcher a[aria-current="page"] { opacity: 1; border-color: var(--accent); }

.perry-ether { position: relative; min-height: 0; display: grid; place-items: center; }
.perry-ether h1 { max-width: none; margin: 0; font: 400 clamp(1.55rem, 3.1vw, 2.5rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.045em; text-transform: lowercase; transition: opacity 1.4s ease-in-out; }
.perry-ether h1[role="button"] { cursor: pointer; }
.perry-ether h1[role="button"]:focus-visible { outline: 1px solid currentColor; outline-offset: .45rem; }
.perry-ether .perry-name--hidden { opacity: 0; pointer-events: none; }
.perry-ether .perry-name--cooling { cursor: default; }
.loren-companion { display: none; pointer-events: none; position: fixed; z-index: 2; right: clamp(.75rem, 3vw, 2.5rem); bottom: 0; width: min(31vw, 25rem); max-height: 38vh; object-fit: contain; object-position: bottom right; }
html[data-site="loren"] { background: #f1f1ee url("loren-mountains.png") center / cover no-repeat fixed; }
html[data-site="loren"] .room { background: transparent; }
html[data-site="loren"] .loren-companion { display: block; }
.ether-quote { position: fixed; inset: 50% auto auto 50%; width: min(80vw, 43rem); margin: 0; color: var(--ink); text-align: center; transform: translate(-50%, -50%); animation: ether-arrival 2.8s ease-out both; }
.ether-quote blockquote { margin: 0; font-size: clamp(1.25rem, 3vw, 2.35rem); font-style: italic; line-height: 1.25; letter-spacing: -.025em; }
.ether-quote figcaption { margin-top: 1.1rem; font: .72rem/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .58; }
.ether-quote--leaving { animation: ether-departure 1.4s ease-in both; }
@keyframes ether-arrival { from { opacity: 0; filter: blur(9px); transform: translate(-50%, -47%); } to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } }
@keyframes ether-departure { from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } to { opacity: 0; filter: blur(10px); transform: translate(-50%, -54%); } }
html[data-site="perry"],
html[data-site="penelope"] { --tile: #fff; --ink: #161616; background: #fff; }
html[data-site="loren"] { --tile: #f1f1ee; --ink: #161616; background-color: #f1f1ee; }
html[data-site="perry"] .room,
html[data-site="loren"] .room,
html[data-site="penelope"] .room { grid-template-rows: 1fr; padding: 0; }
html[data-site="perry"] .site-switcher,
html[data-site="loren"] .site-switcher,
html[data-site="penelope"] .site-switcher,
html[data-site="perry"] footer,
html[data-site="loren"] footer,
html[data-site="penelope"] footer { display: none; }
html[data-site="perry"] .perry-ether,
html[data-site="loren"] .perry-ether,
html[data-site="penelope"] .perry-ether { min-height: 100svh; }

.tile-field { display: grid; align-content: center; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(4rem, 1fr); max-width: 72rem; width: 100%; margin: auto; border-top: 1px solid var(--grout); border-left: 1px solid var(--grout); box-shadow: 12px 14px 0 color-mix(in srgb, var(--grout), transparent 38%); }
.tile { background: color-mix(in srgb, var(--tile), white 24%); border-right: 1px solid var(--grout); border-bottom: 1px solid var(--grout); padding: clamp(1.25rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: end; }
.tile--name { grid-column: span 5; grid-row: span 3; min-height: 19rem; }
.tile--note { grid-column: span 3; grid-row: span 3; background: var(--accent); color: white; justify-content: center; }
.tile--note p { font-size: clamp(1.25rem, 2.6vw, 2.3rem); line-height: 1.14; margin: 0; }
.tile--work { grid-column: 2 / span 6; grid-row: span 2; background: var(--ink); color: var(--tile); min-height: 13rem; justify-content: center; }
.work-image { width: min(100%, 30rem); max-height: 20rem; object-fit: contain; object-position: left center; margin: 0 0 1.25rem; align-self: flex-start; }
.eyebrow, .work-kicker { margin: 0 0 auto; font: 600 .72rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
h1 { font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 400; letter-spacing: -.07em; line-height: .8; margin: 1rem 0 0; max-width: 8ch; }
h2 { font-size: clamp(1.55rem, 3vw, 2.6rem); font-weight: 400; line-height: 1; margin: .5rem 0; }
.tile--work p:not(.work-kicker) { max-width: 50ch; margin: .25rem 0 1.5rem; font-size: 1rem; line-height: 1.45; }
.work-link { color: var(--tile); font: 600 .82rem/1 system-ui, sans-serif; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.work-link:hover, .work-link:focus-visible { color: var(--accent); }
footer { display: flex; gap: .55rem; font: .75rem/1.2 system-ui, sans-serif; opacity: .62; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .room { padding: 1.25rem; } .ether-quote { width: min(86vw, 43rem); } .tile-field { grid-template-columns: repeat(2, 1fr); } .tile--name, .tile--note, .tile--work { grid-column: span 2; grid-row: auto; } .tile--name { min-height: 16rem; } .tile--note { min-height: 10rem; } .tile--work { min-height: 12rem; } }
@media (prefers-reduced-motion: reduce) { .ether-quote, .ether-quote--leaving { animation: none; } }