:root {
  color-scheme: light;
  --background: #f3ebdd;
  --surface: #fffaf2;
  --accent: #ff6603;
  --ink: #181a18;
  --muted: #615b52;
  --border: #d8ccba;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
a { -webkit-tap-highlight-color: transparent; }

.links-page {
  width: min(100%, 480px);
  margin-inline: auto;
  padding: 32px 20px 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* Decorative blueprint layers belong only to /links. */
.links-page { isolation: isolate; }
.links-page::before,
.links-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.links-page::before {
  z-index: -2;
  background-image:
    linear-gradient(rgb(97 91 82 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(97 91 82 / 6%) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 42%, transparent 28%, #000 100%);
}
.links-page::after {
  z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%23615b52' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M24 92V24h120M12 40h56M40 12v56M40 164h124M164 40v124'/%3E%3Ccircle cx='164' cy='164' r='48'/%3E%3Ccircle cx='164' cy='164' r='36' stroke-dasharray='3 6'/%3E%3Cpath d='M100 164h128M164 100v128' stroke-dasharray='2 6'/%3E%3C/g%3E%3Cpath d='M88 24h24M24 88v24' stroke='%23ff6603' stroke-opacity='.25'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%23615b52' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M216 148v68H96M172 200h56M200 172v56M76 76h124M76 76v124'/%3E%3Ccircle cx='76' cy='76' r='48'/%3E%3Ccircle cx='76' cy='76' r='36' stroke-dasharray='3 6'/%3E%3Cpath d='M12 76h128M76 12v128' stroke-dasharray='2 6'/%3E%3C/g%3E%3Cpath d='M128 216h24M216 128v24' stroke='%23ff6603' stroke-opacity='.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 160px 160px;
  background-position: left -40px top 8px, right -40px bottom 8px;
}
@media (min-width: 768px) {
  .links-page::after {
    background-size: 240px 240px;
    background-position: left 40px top 40px, right 40px bottom 40px;
  }
}
@media (forced-colors: active) {
  .links-page::before, .links-page::after { display: none; }
}

.identity { text-align: center; margin-bottom: 24px; }
/* One wood-growth detail, clipped by its own background box at the page edge.
   Document positioning keeps it below the buttons on mobile, never behind them. */
body:has(> .links-page) { position: relative; }
body:has(> .links-page)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(28vw, 108px);
  height: 120px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23615b52%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%221%22%20transform%3D%22translate(160%20160)%22%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(0%200)%20scale(1)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(-1%202)%20scale(.84)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(2%201)%20scale(.68)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(0%20-2)%20scale(.52)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(-2%201)%20scale(.36)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M-8-139%20C36-146%2082-126%20111-91%20C145-58%20146-17%20135%2023%20C139%2060%20111%20102%2072%20120%20C39%20146-7%20137-43%20133%20C-89%20128-122%2096-135%2055%20C-148%2022-140-20-132-52%20C-125-97-89-125-50-130%20C-34-140-20-134-8-139Z%22%20transform%3D%22translate(1%20-1)%20scale(.2)%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 180px 180px;
  background-position: left -84px bottom -65px;
}
@media (min-width: 768px) {
  body:has(> .links-page)::after {
    width: clamp(96px, calc((100vw - 500px) / 2 - 32px), 280px);
    height: 260px;
    background-size: 320px 320px;
    background-position: left -95px bottom -95px;
  }
}
@media (forced-colors: active) {
  body:has(> .links-page)::after { display: none; }
}
.logo-frame { position: relative; width: 168px; margin: 0 auto 20px; padding: 12px 24px; }
.logo-frame::before, .logo-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--accent);
  border-style: solid;
}
.logo-frame::before { top: 0; right: 0; border-width: 1px 1px 0 0; }
.logo-frame::after { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.logo { display: block; width: 120px; height: auto; }
h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.5; }
.tagline { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; text-wrap: balance; }
.identity-rule { position: relative; width: 64px; height: 1px; background: var(--border); margin: 24px auto 0; }
.identity-rule span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); inset: -2px 0 auto auto; }
.link-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.link-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  box-shadow: 0 4px 16px rgb(24 26 24 / 3%);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.icon-box { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: #f1eadd; }
.icon-box img { display: block; width: 21px; height: 21px; }
.link-label { min-width: 0; text-align: start; font-size: 15px; font-weight: 600; line-height: 1.65; overflow-wrap: anywhere; }
.link-label[dir="ltr"] { text-align: right; }
.link-label bdi { display: inline-block; }
.link-copy { min-width: 0; display: grid; gap: 4px; }
.link-secondary { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.7; }
.link-secondary[dir="ltr"] { text-align: right; }
.link-arrow { font-family: Arial, sans-serif; font-size: 21px; line-height: 1; }
.primary { min-height: 68px; background: var(--accent); border-color: #a94000; box-shadow: 0 4px 12px rgb(164 67 0 / 10%); }
.primary .icon-box { background: rgb(255 255 255 / 19%); }
.featured { border-color: rgb(255 102 3 / 45%); background: #fff8ed; }
.featured .icon-box { background: #ffead6; }
.link-card:focus-visible, .profile-title:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
  .link-card:hover { transform: translateY(-2px); border-color: #8a7760; background: #ffffff; box-shadow: 0 6px 18px rgb(24 26 24 / 7%); }
  .primary:hover { background: #f57722; border-color: #803600; }
  .featured:hover { background: #fff0df; border-color: #a94000; }
}
.link-card:active { transform: translateY(1px); box-shadow: none; background: #eadecb; }
.primary:active { background: #e85a00; }
.no-script { line-height: 1.8; text-align: center; }
.brand-footer { margin-top: 32px; text-align: center; }
.brand-footer .identity-rule { margin: 0 auto 20px; }
.footer-name { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.7; letter-spacing: 1.2px; }
.footer-domain { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.profile-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.profile-header { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: center; }
.profile-header h1 { font-size: 18px; line-height: 1.7; }
.profile-title { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 5px; }
.profile-viewer { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: var(--surface); }

@media (min-width: 768px) {
  .links-page { width: min(100%, 500px); padding-top: 48px; padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .link-card { transition: none; }
  .link-card:hover, .link-card:active { transform: none; }
}
@media (forced-colors: active) {
  .link-card { border: 1px solid ButtonText; }
  .icon-box { forced-color-adjust: none; background: white; }
}