/* The Solarium as an architect's drawing: fine Mocha lines on cream, real objects inside. */
.page-solarium { background: var(--cream); }
.page-solarium .nav.scrolled { background: color-mix(in srgb, var(--cream) 92%, transparent); }

.sheet { position: relative; padding: clamp(110px, 13vw, 160px) var(--gutter) clamp(48px, 6vw, 80px); background:
  linear-gradient(rgba(79,58,48,.045) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(79,58,48,.045) 1px, transparent 1px) 0 0 / 32px 32px,
  var(--cream); }
.sheet-head { text-align: center; margin-bottom: clamp(20px, 3vw, 40px); }
.sheet-head h1 { font-family: "Unbounded"; font-weight: 900; font-size: clamp(36px, 6.4vw, 104px); line-height: 1; }
.sheet-head h1 span { color: var(--sunglow); -webkit-text-stroke: 2px var(--mocha); }
.sheet-head p { margin: 14px auto 0; max-width: 46ch; font-family: "Instrument Serif", serif; font-style: italic; font-size: clamp(18px, 1.6vw, 22px); }

.sheet-head .sheet-intro { font-family: "Space Grotesk"; font-style: normal; font-size: clamp(15px, 1.2vw, 18px); max-width: 60ch; margin-top: 18px; opacity: .9; }
.drawing-wrap { max-width: 1600px; margin: 0 auto; border: 1.5px solid var(--mocha); background: var(--cream); }
.drawing { display: block; width: 100%; height: auto; }

/* line work */
.lines path, .lines rect, .lines ellipse { fill: none; stroke: var(--mocha); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lines .thin { stroke-width: 1.1; }
.lines .faint path { stroke-width: .9; opacity: .45; }
.lines .glint { stroke: #fff; stroke-width: 2.5; opacity: .7; }
.lines .fill { fill: var(--cream); }
.lines .leafline { stroke: #6f7a14; stroke-width: 1.6; }
.sunlight path { fill: var(--sunglow); opacity: .16; }

/* objects and callouts */
.obj { cursor: pointer; }
.obj .mock { transition: transform .4s ease; transform-box: fill-box; transform-origin: center bottom; }
.obj:hover .mock, .obj:focus-visible .mock { transform: translateY(-8px); }
.obj:focus { outline: none; }
.obj:focus-visible .callout circle { fill: var(--sunglow); }
.callout path { stroke: var(--mocha); stroke-width: 1.2; stroke-dasharray: 3 4; }
.callout circle { fill: var(--cream); stroke: var(--mocha); stroke-width: 1.6; transition: fill .3s ease; }
.obj:hover .callout circle { fill: var(--sunglow); }
.callout .num { font-family: "Unbounded"; font-weight: 600; font-size: 13px; fill: var(--mocha); text-anchor: middle; }
.callout .lbl { font-family: "Instrument Serif", serif; font-style: italic; font-size: 30px; fill: var(--mocha); paint-order: stroke; stroke: var(--cream); stroke-width: 7px; stroke-linejoin: round; }
.callout .lbl-left { text-anchor: end; }
.callout .lbl-mid { text-anchor: middle; }
.paper-name { font-family: "Unbounded"; font-weight: 600; font-size: 9.5px; fill: var(--mocha); }
.paper-sub { font-family: "Space Grotesk"; font-size: 7.5px; fill: #8a7464; }

/* title block, like the corner of a drawing sheet */
.title-block { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, auto); justify-content: end; }
.title-block div { padding: 10px 18px; font-family: "Unbounded"; font-weight: 600; font-size: 13px; border: 1.5px solid var(--mocha); border-top: 0; margin-left: -1.5px; background: var(--cream); }
.title-block small { display: block; font-family: "Space Grotesk"; font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: 2px; }

.pan-hint { display: none; }

/* phone: pan the drawing sideways */
@media (max-width: 760px) { .title-block { grid-template-columns: 1fr 1fr; margin: 0 16px; } .title-block div:nth-child(odd) { margin-left: 0; } }
@media (max-width: 760px) {
  .pan-hint { display: block; text-align: center; font-family: "Instrument Serif", serif; font-style: italic; font-size: 17px; padding: 10px 16px; opacity: .75; }
  .sheet { padding-left: 0; padding-right: 0; }
  .sheet-head { padding: 0 16px; }
  .drawing-wrap { overflow-x: auto; border-left: 0; border-right: 0; scrollbar-width: none; }
  .drawing-wrap::-webkit-scrollbar { display: none; }
  .drawing { width: 230vw; max-width: none; }
}