/* Sundial Row — the light inside a working day
   garden stone / plate / shadow indigo / sun / verdigris / bronze */

:root {
  --stone:  #CFCCC4;
  --plate:  #EEECE7;
  --shadow: #2C2F4A;
  --shadow-2: #545874;
  --sun:    #F0B429;
  --verd:   #4E8C7E;
  --bronze: #8A5A2B;
  --rule:   #B5B1A7;

  --display: 'Marcellus', 'Trajan Pro', serif;
  --body:    'Albert Sans', system-ui, sans-serif;
  --mono:    'Ubuntu Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body { margin: 0; background: var(--stone); color: var(--shadow); font-family: var(--body); font-size: 1.04rem; line-height: 1.66; }
img, svg { display: block; max-width: 100%; }
a { color: var(--verd); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--bronze); }
a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--sun); color: var(--shadow); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- header ---------- */

.gnomon { background: var(--plate); border-bottom: 1px solid var(--shadow); }
.gnomon__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--display); font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--shadow); text-decoration: none; }
.brand svg { width: 34px; height: 20px; }
.brand:hover { color: var(--bronze); }
.gnomon nav { display: flex; gap: 1.5rem; font-family: var(--mono); font-size: .95rem; }
.gnomon nav a { color: var(--shadow); text-decoration: none; }
.gnomon nav a:hover { color: var(--bronze); }
.gnomon__ticks { height: 10px; background: repeating-linear-gradient(90deg, var(--shadow) 0 1px, transparent 1px 32px); opacity: .5; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 1rem; letter-spacing: .02em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: .04em; }

.hour { font-family: var(--mono); font-size: .92rem; color: var(--bronze); margin: 0 0 1rem; letter-spacing: .04em; }
.hour::before { content: '◐ '; color: var(--sun); }
.lede { font-size: 1.18rem; color: var(--shadow-2); max-width: 34em; }
.prose { max-width: 40em; }
.prose p { margin: 0 0 1rem; }

/* ---------- hero ---------- */

.hero { padding: 4.2rem 0 3.5rem; }
.hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.hero h1 span { color: var(--verd); }

.plate-card { background: var(--plate); border: 1px solid var(--shadow); border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px; padding: 2.2rem 1.4rem 1.2rem; }
.plate-card h2 { font-size: 1.15rem; text-align: center; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.plate-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; font-size: .95rem; }
.plate-card dt { font-family: var(--mono); white-space: nowrap; }
.plate-card dd { margin: 0; color: var(--shadow-2); }
.plate-card .b { color: var(--bronze); }
.plate-card .d { color: var(--shadow-2); }
.plate-card p { font-family: var(--mono); font-size: .85rem; color: var(--shadow-2); margin: 1rem 0 0; text-align: center; }

/* ---------- dial (signature) ---------- */

.dial { padding: 4rem 0; background: var(--shadow); color: var(--plate); }
.dial .hour { color: var(--sun); }
.dial .prose { color: #D7D8E2; }
.dial__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.face { margin: 0; }
.face svg { width: 100%; height: auto; }
.face .ring { fill: none; stroke: #6A6E8C; stroke-width: 1; }
.face .line { stroke: #6A6E8C; stroke-width: 1; }
.face .work { fill: #3B3F5E; }
.face .bright { fill: var(--sun); }
.face .dim { fill: #7C83B8; }
.face .gn { fill: var(--bronze); }
.face .shade { fill: rgba(10,12,24,.45); transform-origin: 300px 290px; animation: sweep 14s ease-in-out infinite alternate; }
.face text { font-family: var(--mono); font-size: 12px; fill: #C9CBD8; }
.face figcaption { font-family: var(--mono); font-size: .88rem; color: #B7B9C9; margin-top: .8rem; }
@keyframes sweep { from { transform: rotate(-70deg); } to { transform: rotate(70deg); } }
.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; font-family: var(--mono); font-size: .88rem; margin-top: .8rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend span::before { content: ''; width: 14px; height: 10px; }
.legend .l-work::before { background: #3B3F5E; outline: 1px solid #6A6E8C; }
.legend .l-bright::before { background: var(--sun); }
.legend .l-dim::before { background: #7C83B8; }

/* ---------- hour plate table ---------- */

.table-sec { padding: 4rem 0; }
.tbl-wrap { overflow-x: auto; margin-top: 1.5rem; background: var(--plate); border: 1px solid var(--shadow); }
.tbl { width: 100%; min-width: 760px; border-collapse: collapse; }
.tbl caption { caption-side: top; text-align: left; padding: .8rem 1rem; font-family: var(--mono); font-size: .9rem; color: var(--bronze); border-bottom: 1px solid var(--shadow); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-family: var(--mono); font-weight: 400; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; background: var(--stone); }
.tbl tbody th { font-family: var(--display); font-weight: 400; font-size: 1.08rem; width: 24%; }
.light { display: inline-block; font-family: var(--mono); font-size: .88rem; padding: .05rem .5rem; border-radius: 99px; white-space: nowrap; }
.light.b { background: var(--sun); color: var(--shadow); }
.light.h { background: #E7D9A8; color: var(--shadow); }
.light.d { background: #7C83B8; color: #fff; }

/* ---------- clouds ---------- */

.clouds { padding: 4rem 0; background: var(--plate); border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--shadow); }
.cloud-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.cloud { padding: 1.2rem; border: 1px solid var(--rule); border-top: 4px solid var(--verd); background: var(--stone); }
.cloud__tag { font-family: var(--mono); font-size: .86rem; color: var(--verd); display: block; margin-bottom: .4rem; letter-spacing: .06em; }
.cloud p { margin: 0; font-size: .98rem; color: var(--shadow-2); }

/* ---------- gate ---------- */

.gate { padding: 4rem 0 4.5rem; }
.gate__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.reading { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--shadow); }
.reading li { border-bottom: 1px solid var(--rule); }
.reading a { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .9rem 0; text-decoration: none; color: var(--shadow); }
.reading span { font-family: var(--mono); font-size: .88rem; color: var(--bronze); }
.reading strong { font-weight: 600; }
.reading a:hover strong { color: var(--verd); text-decoration: underline; }

/* ---------- inner pages ---------- */

.page { padding: 3.5rem 0 4.5rem; }
.page article { max-width: 44em; }
.page h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.page h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.page p, .page li { margin: 0 0 1rem; }
.page ul { padding-left: 1.2rem; }
.meta { font-family: var(--mono); font-size: .9rem; color: var(--shadow-2); margin-bottom: 2rem; }
.backlink { display: inline-block; margin-top: 2rem; font-family: var(--mono); font-size: .95rem; }
.aside-box { background: var(--plate); border: 1px solid var(--shadow); border-radius: 0 40px 0 0; padding: 1rem 1.2rem; margin: 1.6rem 0; }

/* ---------- footer ---------- */

.foot { background: var(--shadow); color: #C9CBD8; padding: 2.2rem 0 2.6rem; font-size: .92rem; }
.foot a { color: var(--plate); }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; font-family: var(--mono); font-size: .92rem; margin-bottom: 1rem; }
.foot p { margin: 0; max-width: 60em; }

@media (max-width: 860px) {
  .hero__grid, .dial__grid, .gate__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hide-sm { display: none; }
  .reading a { grid-template-columns: 1fr; gap: .1rem; }
}
@media (prefers-reduced-motion: reduce) { .face .shade { animation: none; } }