/* Components of the Averythink Haoqi design system, copied from docs/03-haoqi/design-system/project/components/bundle.css.
   Fonts are loaded by the <link> in each page instead of the @import at the top of bundle.css. */
/* Averythink · Haoqi components: paper grounds, a visible 12-column grid, HUD captions in mono capitals,
   two accents (production orange, tech azure), one dark screen for the warp, square corners.
   Colours and sizes come from tokens.css. */

/* Base */
.avt-root { --avt-margin: var(--grid-margin); --avt-hud: var(--hud-inset); font-family: var(--font-sans); color: var(--ink); background: var(--paper); }
.avt-root :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.avt-muted { color: var(--ink-muted); }
.avt-field-hero { background: var(--glow-tech), var(--glow-production), var(--paper); }
.avt-field-footer { background: var(--glow-tech-footer), var(--glow-production-footer), var(--paper); }

/* Type: the wide display cut, the mono voice and the HUD voice */
.avt-display { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 125%; text-transform: uppercase; }
.avt-display--xl { font-size: clamp(30px, 6.8vw, 98px); line-height: 1.12; }
.avt-display--lg { font-size: clamp(28px, 5.6vw, 96px); line-height: 1.15; }
.avt-display--md { font-size: clamp(26px, 4.2vw, 60px); line-height: 1.2; }
.avt-display--title { font-size: 30px; line-height: 1.15; }
.avt-display--title-sm { font-size: 24px; line-height: 1.2; }
.avt-mono { font-family: var(--font-mono); font-size: 16px; line-height: 1.6; }
.avt-mono--sm { font-size: 14px; }
.avt-hud { font-family: var(--font-hud); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.avt-hud--sm { font-size: 14px; line-height: 20px; }
.avt-hud--lg { font-size: 24px; line-height: 30px; letter-spacing: 0.05em; }
.avt-hud:lang(th), .avt-hud :lang(th) { letter-spacing: 0; }
.avt-hud :lang(en) { letter-spacing: 0.1em; }

/* Tag: production (Agency) by default, avt-tag--tech for Tech */
.avt-tag { display: inline-block; padding: 2px 6px; border-radius: var(--radius-none); background: var(--production); color: var(--on-production); font-family: var(--font-hud); font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; }

/* BracketLink: [label ↗] in tech-text, or production-text with avt-bracket--production */
.avt-bracket { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; color: var(--tech-text); font-family: var(--font-hud); font-size: 16px; line-height: 24px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.avt-bracket::before { content: "["; }
.avt-bracket::after { content: "]"; }
.avt-bracket:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.avt-bracket:lang(th) { letter-spacing: 0; }
.avt-bracket--sm { font-size: 14px; line-height: 20px; }
.avt-bracket--production { color: var(--production-text); }

/* ToggleGroup: work filters (a row) and package tabs (a stack) */
.avt-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); }
.avt-toggles--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.avt-toggle { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--font-hud); font-size: 16px; line-height: 24px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.avt-toggle:lang(th) { letter-spacing: 0; }
.avt-toggle__label { margin: 0 -6px; padding: 2px 6px; }
.avt-toggle__label::before { content: "["; }
.avt-toggle__label::after { content: "]"; }
.avt-toggle__count { margin-left: 0.5em; }
.avt-toggle:hover .avt-toggle__label { color: var(--tech-text); }
.avt-toggle[aria-pressed="true"] .avt-toggle__label { background: var(--ink); color: var(--paper); }

/* GridOverlay: the visible grid with + marks where lines cross */
.avt-gridlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.avt-gridlines__v { position: absolute; top: 0; bottom: 0; width: var(--hairline); background: var(--grid-line); }
.avt-gridlines__v--1 { left: var(--avt-margin); }
.avt-gridlines__v--2 { left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) / 3); }
.avt-gridlines__v--3 { left: calc(var(--avt-margin) + (100% - 2 * var(--avt-margin)) * 2 / 3); }
.avt-gridlines__v--4 { left: calc(100% - var(--avt-margin)); }
.avt-gridlines__h { position: absolute; left: 0; right: 0; height: var(--hairline); background: var(--grid-line); }
.avt-gridlines__h--1 { top: 33.333%; }
.avt-gridlines__h--2 { top: 66.667%; }
.avt-cross { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; }
.avt-cross::before, .avt-cross::after { content: ""; position: absolute; background: var(--crosshair); }
.avt-cross::before { left: 6px; top: 0; width: var(--hairline); height: 13px; }
.avt-cross::after { left: 0; top: 6px; width: 13px; height: var(--hairline); }

/* Hud: the frame that stays on screen */
.avt-hudbar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; padding: 0 var(--avt-margin); }
.avt-hudbar__logo { grid-column: 1 / span 4; justify-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-2); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; }
.avt-hudbar__nav { grid-column: 9 / span 4; display: flex; gap: var(--space-7); padding: 0 var(--space-2); }
.avt-hudbar__nav a, .avt-hudbar__nav button { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer; }
.avt-hudbar__nav a:hover, .avt-hudbar__nav button:hover { color: var(--tech-text); }
.avt-hudbar__nav [aria-current="page"] { color: var(--tech-text); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 6px; }
.avt-hudbar__menu { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--space-2); grid-column: 7 / span 6; justify-self: end; width: var(--target-min); height: var(--target-min); padding: 0; border: 0; background: none; cursor: pointer; }
.avt-hudbar__menu span { display: block; width: 24px; height: 2px; background: var(--ink); }
.avt-hudfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--avt-hud); }
.avt-hudfoot__globe { display: block; width: 46px; height: 24px; }
.avt-hudfoot__dot { display: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--production); }
.avt-hudfoot__rec { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: var(--radius-full); background: var(--production); }
.avt-scrollmark { position: absolute; right: 10px; width: 2px; height: 36px; background: var(--ink); }

/* SectionHeader */
.avt-sechead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-8); }
.avt-sechead__kicker { grid-column: 1 / span 4; margin: 0; padding: var(--space-3) var(--space-2) 0; color: var(--ink-muted); }
.avt-sechead__title { grid-column: 5 / span 8; padding: 0 var(--space-2); }
.avt-sechead__intro { grid-column: 1 / span 4; margin: 0; padding: 0 var(--space-6) 0 var(--space-2); }

/* Statement */
.avt-statement { margin: 0; font-family: var(--font-sans); font-size: clamp(20px, 4.2vw, 60px); line-height: 1.3; font-weight: 400; color: var(--ink); }
.avt-statement--sm { font-size: clamp(20px, 3.2vw, 46px); line-height: 1.35; }
.avt-statement--muted { color: var(--ink-muted); }
.avt-statement a { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--underline-thick); text-underline-offset: 0.13em; }
.avt-statement a:hover { color: var(--tech-text); }

/* SignedPortrait */
.avt-portrait { position: relative; margin: 0; aspect-ratio: 1; }
.avt-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.avt-portrait__sign { position: absolute; left: -30px; top: -30px; color: var(--production); font-family: var(--font-script); font-size: 80px; line-height: 1; white-space: nowrap; transform: rotate(-14deg); pointer-events: none; }

/* WorkCard and the work grid */
.avt-workgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-11); padding: 0 var(--avt-margin); }
.avt-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-2); color: var(--ink); text-decoration: none; }
.avt-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-none); background: var(--paper-raised); }
.avt-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.avt-card__media .avt-tag { position: absolute; top: 0; right: 0; }
.avt-card__caption { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; line-height: 20px; text-transform: uppercase; }
.avt-card__meta { font-family: var(--font-hud); letter-spacing: 0.1em; text-align: right; color: var(--ink-muted); }
.avt-card__meta:lang(th) { letter-spacing: 0; }
.avt-card:hover .avt-card__title { color: var(--tech-text); }
.avt-card__media .avt-tag--tech, .avt-tag--tech { background: var(--tech-text); color: var(--on-tech); }

/* ServiceColumn */
.avt-service { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: 0 var(--space-5) 0 var(--space-2); }
.avt-service__tagline { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 500; }
.avt-service__desc { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }
.avt-service__list { align-self: stretch; margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--divider); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
.avt-service__list li { padding: 10px 0; border-bottom: var(--hairline) solid var(--divider); }
.avt-service__samples { display: flex; flex-direction: column; align-items: flex-start; }
.avt-service__samples a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; }
.avt-service__samples a:hover { color: var(--tech-text); }

/* PackageRow */
.avt-packages { margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--divider); }
.avt-package { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; padding: var(--space-5) 0; border-bottom: var(--hairline) solid var(--divider); }
.avt-package__no { grid-column: 1 / span 1; padding: 0 var(--space-2); color: var(--ink-muted); }
.avt-package__name { grid-column: 2 / span 3; padding: 0 var(--space-4) 0 var(--space-2); }
.avt-package__includes { grid-column: 5 / span 2; display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0 var(--space-4) 0 var(--space-2); list-style: none; color: var(--ink-muted); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }
.avt-package__price { grid-column: 7 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); padding: 0 var(--space-2); text-align: right; }

/* WarpFrame: rays from the centre, one statement at a time, or the rings */
.avt-warp { position: relative; height: var(--screen-height); min-height: 640px; overflow: hidden; background: var(--screen); color: var(--screen-text); }
.avt-warp--last { background: var(--screen-fade); }
.avt-warp .avt-gridlines__v, .avt-warp .avt-gridlines__h { background: var(--grid-line-screen); }
.avt-warp .avt-cross::before, .avt-warp .avt-cross::after { background: var(--crosshair-screen); }
.avt-warp__ray { position: absolute; inset: 0; pointer-events: none; }
.avt-warp__ray--tech { background: repeating-conic-gradient(from 2deg at 50% 50%, var(--ray-tech) 0deg 0.4deg, transparent 0.4deg 5.5deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 8%, #000 28%), repeating-radial-gradient(circle at 50% 50%, #000 0px, #000 150px, transparent 150px, transparent 240px); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at 50% 50%, transparent 8%, #000 28%), repeating-radial-gradient(circle at 50% 50%, #000 0px, #000 150px, transparent 150px, transparent 240px); mask-composite: intersect; }
.avt-warp__ray--production { background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ray-production) 0deg 0.35deg, transparent 0.35deg 9deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 10%, #000 32%), repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 70px, #000 70px, #000 190px); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at 50% 50%, transparent 10%, #000 32%), repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 70px, #000 70px, #000 190px); mask-composite: intersect; }
.avt-warp__ray--paper { background: repeating-conic-gradient(from 1deg at 50% 50%, var(--ray-paper) 0deg 0.45deg, transparent 0.45deg 7deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 9%, #000 30%), repeating-radial-gradient(circle at 50% 50%, #000 0px, #000 120px, transparent 120px, transparent 210px); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at 50% 50%, transparent 9%, #000 30%), repeating-radial-gradient(circle at 50% 50%, #000 0px, #000 120px, transparent 120px, transparent 210px); mask-composite: intersect; }
.avt-warp__label { position: absolute; z-index: 3; top: 108px; left: calc(var(--avt-hud) - 6px); margin: 0; padding: 2px 6px; background: var(--veil); color: var(--screen-text); }
.avt-warp__statement { position: absolute; z-index: 3; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); text-align: center; white-space: pre-line; }
.avt-rings { position: absolute; z-index: 2; left: 50%; top: 50%; width: 440px; height: 440px; transform: translate(-50%, -50%); }
.avt-rings span { position: absolute; left: 50%; box-sizing: border-box; aspect-ratio: 4 / 1; border: var(--focus-width) solid var(--production); border-radius: var(--radius-full); transform: translate(-50%, -50%); }
.avt-rings span:nth-child(1) { top: 16%; width: 40%; }
.avt-rings span:nth-child(2) { top: 28%; width: 70%; }
.avt-rings span:nth-child(3) { top: 39%; width: 90%; }
.avt-rings span:nth-child(4) { top: 50%; width: 100%; }
.avt-rings span:nth-child(5) { top: 61%; width: 90%; }
.avt-rings span:nth-child(6) { top: 72%; width: 70%; }
.avt-rings span:nth-child(7) { top: 84%; width: 40%; }
.avt-warp__float { position: absolute; z-index: 3; margin: 0; padding: 2px 6px; background: var(--veil); color: var(--screen-text); font-size: 22px; line-height: 1.35; }

/* ContactFooter */
.avt-footer { position: relative; height: var(--screen-height); min-height: 640px; overflow: hidden; background: var(--glow-tech-footer), var(--glow-production-footer), var(--paper); }
.avt-footer__title { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); transform: translateY(-50%); }
.avt-footer__title span:first-child { transform: translateX(-12%); }
.avt-footer__title span:last-child { transform: translateX(10%); }
.avt-footer__contact { position: absolute; z-index: 4; left: var(--avt-hud); right: var(--avt-hud); bottom: 92px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.avt-footer__email { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.avt-footer__email > span { user-select: all; }
.avt-footer__social { display: inline-flex; flex-wrap: wrap; gap: 0 28px; }
.avt-footer__social a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); text-decoration: none; }
.avt-footer__social a:hover { color: var(--tech-text); }
.avt-footer .avt-hudfoot { position: absolute; z-index: 4; left: 0; right: 0; bottom: var(--hud-bottom); }

/* ProjectMeta */
.avt-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding-top: var(--space-5); border-top: var(--hairline) solid var(--divider); }
.avt-meta__item { grid-column: span 4; padding: 0 var(--space-5) 0 var(--space-2); }
.avt-meta dt { color: var(--ink-muted); }
.avt-meta dd { margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: 16px; line-height: 1.6; }
.avt-meta dd span { display: block; }

/* PagerNav */
.avt-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--space-5); border-top: var(--hairline) solid var(--divider); }
.avt-pager__link { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.avt-pager__link--next { align-items: flex-end; text-align: right; }
.avt-pager__dir { color: var(--ink-muted); }
.avt-pager__link:hover .avt-pager__title { color: var(--tech-text); }

/* Narrow screens */
@media (max-width: 767px) {
  .avt-root { --avt-margin: var(--grid-margin-mobile); --avt-hud: var(--hud-inset-mobile); }
  .avt-display--title { font-size: 22px; }
  .avt-display--title-sm { font-size: 20px; }
  .avt-gridlines__v--2 { left: 50%; }
  .avt-gridlines__v--3 { display: none; }
  .avt-hudbar { display: flex; justify-content: space-between; padding: 0 var(--avt-margin); }
  .avt-hudbar__nav { display: none; }
  .avt-hudbar__menu { display: inline-flex; }
  .avt-hudfoot__coords { display: none; }
  .avt-hudfoot__globe { display: none; }
  .avt-hudfoot__dot { display: block; }
  .avt-sechead { row-gap: var(--space-5); }
  .avt-sechead > * { grid-column: 1 / -1; }
  .avt-statement { line-height: 1.4; }
  .avt-statement--sm { line-height: 1.5; }
  .avt-portrait__sign { font-size: 72px; }
  .avt-workgrid { row-gap: var(--space-6); }
  .avt-card__caption { font-size: 12px; line-height: 16px; }
  .avt-service { padding: 0 var(--space-2); }
  .avt-service__tagline { font-size: 18px; }
  .avt-service__desc { font-size: 15px; }
  .avt-package { grid-template-columns: 48px minmax(0, 1fr); row-gap: var(--space-3); }
  .avt-package__no { grid-column: 1; }
  .avt-package__name, .avt-package__includes, .avt-package__price { grid-column: 2; padding: 0 var(--space-2); }
  .avt-package__price { align-items: flex-start; text-align: left; }
  .avt-warp__label { top: 84px; }
  .avt-rings { width: 280px; height: 280px; }
  .avt-warp__float { font-size: 17px; }
  .avt-footer__contact { bottom: 88px; flex-direction: column; align-items: flex-start; }
  .avt-meta { display: block; padding-top: 0; }
  .avt-meta__item { padding: var(--space-4) var(--space-2); border-bottom: var(--hairline) solid var(--divider); }
  .avt-meta dd { font-size: 15px; }
  .avt-pager { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .avt-pager__link { padding: var(--space-4) var(--space-2); border-bottom: var(--hairline) solid var(--divider); }
}