{ "id": "v1-gf-3333", "long_id": "v1.game-fantasy.forum.s03.p03.t03.u03", "name": "Game fantasy guild hall (frosted steel, ice blue)", "era": { "slug": "game-fantasy", "code": "gf", "name": "Game fantasy", "years": [ 2004, 2026 ], "description": "Game sites from 2004 to today: carved and gilded frames, parchment, dark stone and metal, ornate display capitals over a plain reading face, banners, crests and coloured item names. The older ones are built like the game's own windows; the newer ones are dark, wide and cinematic, with the ornament kept for titles, buttons and dividers." }, "archetype": "forum", "mode": "pure", "viewport": { "width": 1024, "fluid": false }, "summary": "The site of a guild or clan with its forums, as players built them in the early years, 2004 to 2012, of an era that runs from 2004 to 2026, on the model of the game's own site: a banner with the crest in its middle, pennants hanging under it as navigation, and a pale steel sheet of forum tables, rosters with class crests, an event calendar and threads with the author's portrait down the side. Three separate slabs lie on a night-blue page. It was the common look of guild sites and game forums of those years, made for a 1024px screen.", "url": "https://chrono.skin/s/v1-gf-3333", "preview_url": "https://chrono.skin/s/v1-gf-3333/specimen.html", "files": { "STYLE.md": "# Game fantasy guild hall (frosted steel, ice blue)\n\n## Summary\n\nThe site of a guild or clan with its forums, as players built them in the early years, 2004 to 2012, of an era that runs from 2004 to 2026, on the model of the game's own site: a banner with the crest in its middle, pennants hanging under it as navigation, and a pale steel sheet of forum tables, rosters with class crests, an event calendar and threads with the author's portrait down the side. Three separate slabs lie on a night-blue page. It was the common look of guild sites and game forums of those years, made for a 1024px screen.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 980px (`.ds-page__wrap`). Three slabs lie on the page `--space-3` apart: the banner, the sheet and the foot plate, each with its own frame-metal border and corner radius.\n- The banner is a three-part grid: the motto on the left, the `.ds-brand` in the middle (crest above the name), the signed-in member on the right. The navigation hangs centred under it as pennants (`--size-pennant`, 44px) that overlap the top of the sheet; the sheet has `--space-7` of top padding to clear them.\n- Home page, top to bottom in the sheet: the hero (the guild's standard, the call for recruits, raid progress), the `.ds-stats` strip of five figures, then two columns: the forum index table and the four recruiting cells (flexible, about 690px) beside a column of side boxes (`--size-aside`, 236px) on the right.\n- Inner pages keep the banner, the pennants and the foot plate; the hero is left out. They start with the breadcrumb, then `.ds-page-header` (title and one line on the left, one or two plates on the right), then the working parts: centred `.ds-tabs` standing on the framed roster table, the calendar frame beside a dialog and an empty slot in the 236px column, a stack of `.ds-post` frames, or the application form beside a panel and an accordion.\n- Views: `home` (hero, figures, forum index, recruiting cells, members online, this week's events, the guild chest, the closing band), `roster` (tabs by rank, the member table with crests, item tooltips and attendance bars, pagination), `calendar` (the month in cells, the sign-up dialog, an empty day), `thread` (two posts with author columns, a quote, pagination and reply), `apply` (notices, the application form with its buttons, requirements and an accordion of questions).\n- Spacing scale: `--space-1` 2px (between a label and its bar), `--space-2` 4px (cell padding, between pennants), `--space-3` 8px (row padding, between slabs and buttons), `--space-4` 12px (panel padding), `--space-5` 16px (between blocks and columns, sheet padding), `--space-6` 24px (large button sides), `--space-7` 36px (top of the sheet under the pennants, sides of a title ribbon).\n- Control heights: `--size-control-small` 20px, `--size-control` 26px, `--size-control-large` 40px. `--size-author` 132px is the author column of a post, `--size-day` 76px the least height of a calendar day.\n\n## Typography and colour roles\n\n- Two families and a monospace. `--font-heading` and `--font-ui` are a Garamond (EB Garamond where installed, else Hoefler Text, Garamond, Times New Roman) at weight 600: headings in ordinary case, navigation, buttons and table heads in capitals (`--ui-transform`). `--font-body` is Trebuchet MS for everything read. The references used commercial book and inscriptional faces; this stack is the closest free one.\n- Sizes: `--text-base` 13px at `--line-body` 1.4; `--text-small` 11px; `--text-ui` 14px; `--text-large` 17px; `--text-h3` 17px, `--text-h2` 22px, `--text-h1` 30px; `--text-display` 42px with 1px tracking for the hero title only.\n- Palette: night-blue page, pale steel sheet and near-white slabs, a deep blue banner and table heads with ice-white lettering (`--color-bar`), dark slate pennants, hero and foot plate (`--color-bar-alt`), slate text, navy headings, steel frames, a blue primary plate and an ice-blue accent for the current pennant and tab. A dull gold (`--color-accent-alt`) is the one warm colour, in frame corners and \"new\" markers.\n- Surface: a 3px ridge border that the browser bevels into lit and dark halves, rounded corners (4px controls, 8px frames, 12px slabs and labels), deep soft shadows under frames, glossy plates and bars split at half height, slabs with a diagonal sheen (`--fill-panel`), a page of faint diagonal frost streaks under a pale glow.\n- The era's rule for text on fills, kept by every layout and every token set: on `--color-canvas` and on the three surfaces (`--color-surface`, `--color-surface-alt`, `--color-surface-strong`, and `--fill-panel`) text is `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours; on `--fill-bar` only `--color-bar-text`; on `--fill-bar-alt` only `--color-bar-alt-text`; on `--fill-inverse` only `--color-inverse-text`; on `--fill-accent` only `--color-accent-text`; on `--fill-button` `--color-button-text`, on `--fill-button-secondary` `--color-button-secondary-text`; in a form well `--color-input-text`; on `--color-notice` `--color-notice-text` and on `--color-danger-surface` `--color-danger`.\n- No text is written straight on `--color-page`: the page only shows as stone around the slabs.\n- `--color-fill-1` to `--color-fill-4`, `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` are inks: every palette of the era keeps them readable on its surfaces. They colour item names by rarity (`.ds-item`: common `--color-text`, uncommon `--color-success`, rare `--color-fill-1`, epic `--color-fill-2`, legendary `--color-fill-3`, set `--color-fill-4`), class crests, status labels and bars. They are never used as a fill under text; a grid cell is the surface tinted by 24% of its fill colour, and a status badge is the surface tinted by 16% of its status colour with the colour itself as ink and border.\n- `--color-border-strong` is the metal of every frame (gold, brass or steel); `--color-border` the ordinary rule; `--color-border-muted` the faint rule between rows. `--color-accent-alt` is the small stone set in each frame corner, the \"new\" marker and the edge of a learned or current cell; it is never a fill under text.\n- `--color-accent` (through `--fill-accent`) marks the current navigation plate, the current tab, the current page number, the default badge and the default bar of a progress bar.\n- The destructive button is the secondary plate lettered and edged in `--color-danger`, because the primary plate of a palette may itself be red.\n- Hero blocks are filled with `--fill-bar-alt` under a glow of `--color-accent` and written in `--color-bar-alt-text`; the banner and table heads take `--fill-bar`; the footer takes `--fill-bar-alt`. `--fill-inverse` with `--color-inverse-text` is the closing band of the home page (`.ds-band`): a strip of the opposite material, parchment on a dark set and dark stone on a light one.\n- One-off values built in `components.css` from tokens: the faceted corner caps of `.ds-frame` (the frame metal against the same colour mixed 45% toward `--color-shadow`), button and plate edges (the fill colour mixed 60% toward `--color-shadow`), the 24% and 16% tints named above, alternate rows and wells as `--color-surface-alt` at 70% over the panel fill, `50%` radius for lamps and the round play plate, and `clip-path` polygons for ribbons, pennants, standards and the drawn landscape.\n\n## Components\n\n- `.ds-page`: on ``; paints the page. `.ds-page__wrap` is the 980px column of three slabs, `.ds-page__body` the sheet, `.ds-page__inner` the stack of a view, `.ds-page__columns` the main column and the 236px column, `.ds-page__main` and `.ds-page__aside` their stacks.\n- `.ds-nav`: the banner and the pennants. `.ds-nav__banner` holds `.ds-nav__motto` (with `.ds-nav__realm`), the `.ds-brand` and `.ds-nav__account` with `.ds-nav__action` links; `.ds-nav__links` is the centred row of `.ds-nav__link` pennants, cut to a point with `clip-path`, the current one in `--fill-accent` (`is-current`, or in the specimen one selector per view). One item is a `.ds-menu`.\n- `.ds-brand`: the mark above the name in the middle of the banner. `.ds-brand__mark` is a 60px shield (square top, round foot) dressed as the primary plate (`--fill-button`, `--color-button-text`, the frame-metal border, `--radius-control`, `--shadow-control`); `.ds-brand__name` the name in the heading face at h1 size in `--color-bar-text`. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: a frame in three parts: `.ds-hero__standard` (the mark on a swallow-tailed standard in the primary plate's fill), `.ds-hero__copy` with `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (one large plate, one secondary), and `.ds-hero__next`, a plain frame of raid progress bars. Once, at the top of the home page.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__text`, `.ds-page-header__actions` on the right, a frame-metal rule below.\n- `.ds-panel`: in this layout the `.ds-panel__title` is a ribbon in `--fill-bar` with notched ends, laid over the middle of the frame's top edge.\n- `.ds-sidebar`: a framed side box: `.ds-sidebar__title` centred between two rules, `.ds-sidebar__list` of `.ds-sidebar__item` rows (a small crest, a `.ds-sidebar__link`, a `.ds-sidebar__meta`). It may hold a `.ds-list--tight` in place of the list.\n- `.ds-post`: one post of a thread, a frame in two columns: `.ds-post__author` (a large crest, `.ds-post__name`, a rank badge, two lines of figures) on `--color-surface-strong`, and `.ds-post__main` with `.ds-post__head` (date and number), `.ds-post__body` (a `.ds-prose`) and `.ds-post__foot` (links and a note).\n- `.ds-calendar`: a month in a frame: seven `.ds-calendar__head` cells in `--fill-bar`, then `.ds-calendar__day` cells with a `.ds-calendar__date`, `.ds-calendar__event` links and sign-up badges; `is-today` is edged in `--color-accent-alt`, `is-other` belongs to a neighbouring month.\n- `.ds-footer`: the foot plate in `--fill-bar-alt`: `.ds-footer__links` of `.ds-footer__link` on the left, `.ds-footer__note` on the right.\n- Period components carried: `.ds-menu`, `.ds-avatar` (members online, roster, post authors), `.ds-progress` (raid progress, attendance), `.ds-tooltip` (the best piece in the roster), `.ds-accordion`. A carousel was left out because a guild's site of the period showed no gallery on these pages; a switch did not exist.\n- `.ds-view`: one screen of the example site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` shows when none is named. It is always a plain block; an inner wrapper (`.ds-page__inner`) does the layout.\n- `.ds-frame`: the game window every box is built from. `--fill-panel` inside a border of `--border-width-strong` in `--color-border-strong`, with `--shadow-panel` for its inner lines and lip, and two pseudo-elements that set a faceted cap and a small `--color-accent-alt` stone on each corner (`--size-corner`, 8px). Add it to a panel, a table wrapper, a side box, the hero. `.ds-frame--plain` leaves the corner caps off for a lighter box inside another frame or a strip of figures.\n- `.ds-prose`: running text: h1, h2 (ruled underneath), h3 (in `--color-heading-alt`), paragraphs, lists, `code`, links. `.ds-prose__lead` is the opening line in the heading face; `.ds-prose__quote` a quoted passage with a `cite` line.\n- `.ds-link`: text link; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta and tool links. `.ds-links` is a wrapping row of links.\n- `.ds-button`: a bevelled metal plate, 26px high, with a lit top edge and a dark lip from `--shadow-control`. `.ds-button--secondary` is the second metal; `.ds-button--danger` the destructive plate (secondary metal, danger ink and edge); `.ds-button--large` the 40px call in the heading face (\"Play free\", \"Apply to join\"); `.ds-button--small` 20px. States `is-hover` (takes `--shadow-control-hover`, which is where a set's glow shows), `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row.\n- `.ds-form`: rows (`.ds-form__row`) of a right-aligned `.ds-form__label` (130px, in the UI face) and a `.ds-form__field`. `.ds-form__input`, `.ds-form__select` and `.ds-form__textarea` are wells sunk with `--shadow-control-pressed`; `.ds-form__input--short` is a 140px well; `is-error` with `.ds-form__error` under it; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions`, where `.ds-form__actions-end` pushes the destructive plate to the right. `.ds-form--search` is one well and one plate in a line.\n- `.ds-table`: a data table, always inside a `.ds-frame`. Head cells take `--fill-bar`; rows are ruled with `--color-border-muted` and every second row is tinted; `is-numeric` right-aligns a column, `is-centre` centres it; `.ds-table__group` is a category row in `--color-surface-strong`; `.ds-table__sub` a small second line in a cell; `.ds-table__who` a crest beside a name.\n- `.ds-list`: ruled rows. `.ds-list__item` holds a `.ds-list__body` with `.ds-list__title`, `.ds-list__text` and `.ds-list__meta`, and may end in a badge. `.ds-list--tight` is the dense form for side boxes and item lists.\n- `.ds-panel`: a box with a `.ds-panel__title` and a `.ds-panel__body` (`--flush` for a table or list that runs to the edges), `.ds-panel__text`, `.ds-panel__foot`. Use it together with `.ds-frame`.\n- `.ds-stat`: one figure: `.ds-stat__value` (h1 size, heading face) over `.ds-stat__label` (small, UI face). Three to five sit in a `.ds-stats` row, one framed strip divided by rules.\n- `.ds-grid`: four `.ds-grid__cell` blocks across (`.ds-grid--two` for two); the base cell is tinted and edged with `--color-fill-1`, `.ds-grid__cell--2`, `--3`, `--4` with the others. Inside: `.ds-grid__icon` (a crest in the fill colour), `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__more` or a badge.\n- `.ds-tabs`: plates standing on the top edge of the frame that follows them; `.ds-tabs__tab`, the `is-current` one taller and in `--fill-accent`; `.ds-tabs__count` for a number.\n- `.ds-badge`: a small label in `--fill-accent`. Status variants `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` (ink on a tint of itself), `.ds-badge--quiet` (a rank or a plain tag), `.ds-badge--new` (outlined in `--color-accent-alt`). `.ds-badges` is a row; `.ds-dot` with `--success`, `--warning`, `--danger` is a status lamp.\n- `.ds-item`: an item name in its rarity colour: plain for common, `--uncommon`, `--rare`, `--epic`, `--legendary`, `--set`. Always bold, never underlined.\n- `.ds-tooltip`: the item window, the era's signature. The trigger wraps a `.ds-tooltip__tip`, a small frame with `--shadow-dialog` that shows on hover or focus (`is-open` shows it by class; `.ds-tooltip--end` hangs it from the right edge). Inside: `.ds-tooltip__name` (with a `.ds-item` rarity class), `.ds-tooltip__line` rows, `--bonus` in `--color-success`, `--muted`, `--lore` in italics. `.ds-tooltip--card` writes the same window into the page.\n- `.ds-progress`: a sunk track with a `.ds-progress__bar`; width by `.ds-progress--10`, `--25`, `--40`, `--60`, `--75`, `--90`, `--100`; colour by `--health` (`--color-success`), `--xp` (`--color-fill-2`), `--rep` (`--color-warning`), `--danger`. `.ds-progress__label` is the line above it, name left and figure right.\n- `.ds-avatar`: a portrait as a framed crest: an inline SVG class crest on a `--color-surface-strong` tile with the frame border. `.ds-avatar--small` (26px), default 36px, `.ds-avatar--large` (72px); `.ds-avatar--1` to `--4` colour the crest with a fill colour.\n- `.ds-accordion`: `
` sections; `.ds-accordion__item`, `.ds-accordion__summary` with a small plate that reads + or -, `.ds-accordion__meta` at its right, `.ds-accordion__body`.\n- `.ds-menu`: the drop-down under a navigation item: a `.ds-menu__list` of `.ds-menu__item` links in a small frame, shown on hover or focus of the item (`is-open` by class). `.ds-menu__caret` is the small arrow in the item.\n- `.ds-notice`: a ruled message with `.ds-notice__title` and `.ds-notice__text`; `.ds-notice--error` for errors. `.ds-notices` stacks several.\n- `.ds-pagination`: small secondary plates, `.ds-pagination__link`; `is-current` in `--fill-accent`, `is-disabled` flat.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (a double chevron) and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small game window: `.ds-dialog__title` plate in `--fill-bar` with a square `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__text`, `.ds-dialog__actions` centred. `.ds-dialog__backdrop` is the dimmed area behind it where the view has room for one.\n- `.ds-empty`: an empty slot sunk into the sheet: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary plate.\n- `.ds-band`: the closing call of the home page, a strip in `--fill-inverse`: `.ds-band__title` and `.ds-band__text` on the left, one primary plate on the right. At most one per page.\n- `.ds-heading`: a section title followed by a fading rule (`--centre` puts a rule on both sides); `.ds-rule` a rule with a diamond in its middle.\n- `.ds-stack`, `.ds-split` (`--wide` 3 to 2, `--even` equal heights), `.ds-row` (`--between`), `.ds-muted`, `.ds-icon`: small layout helpers.\n\n## Never\n\n- `content-width <= 980px`: the page is a fixed column made for a 1024px screen.\n- `font-size <= 42px`: the hero title is the largest text.\n- `font-size >= 11px`: meta text is 11px and nothing is smaller.\n- `line-height <= 1.5`: body text is set at 1.4.\n- `font-families <= 3`: a Garamond, Trebuchet MS and a monospace.\n- `letter-spacing <= 1px`: only the hero title is tracked.\n- `border-radius <= 12px`: slabs and labels are rounded to 12px at most; only lamps and the foot of the crest are round.\n- `border-width <= 3px`: the ridge frame is 3px, every rule 1px.\n- `box-shadow-blur <= 24px`: shadows are deep but short; nothing floats on a wide haze.\n- `transition = none`: nothing on these pages eased; a plate changed its fill at once.\n- `animation = none`: movement belonged to the game, not to its site.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything that stands as a box is a `.ds-frame`: do not draw a new border, add the class. A raised thing (a plate, a title, a crest) takes a `--fill-*` gradient, an edge mixed toward `--color-shadow` and `--shadow-control`; a sunk thing (a well, a track, an empty slot) takes `--fill-input` or the tinted alternate surface and `--shadow-control-pressed`. Keep the era's rule for text on fills from the section above: bar text on bars, surface text on surfaces, and the rarity and status colours as ink only. A new banner or ribbon is cut with `clip-path` from a bar or accent fill. Do not add images, soft cards without a frame, transitions, or a colour that is not a token.\n", "components.css": "/* Layout tokens (structure part). A fixed 980px guild site on a 1024px\n screen: three slabs on the stone, a banner with the crest in its middle\n and pennants hanging under it, the sheet with a 236px column of side boxes\n on the right, and a foot plate. */\n:root {\n --size-page: 980px;\n --size-aside: 236px;\n --size-brand: 60px;\n --size-pennant: 44px;\n --size-author: 132px;\n --size-day: 76px;\n --size-hair: 1px;\n --size-corner: 8px;\n --size-control: 26px;\n --size-control-small: 20px;\n --size-control-large: 40px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-crest: 36px;\n --size-crest-large: 72px;\n --size-bar: 12px;\n --size-label: 130px;\n --size-field-short: 140px;\n --size-textarea: 90px;\n --size-dialog: 380px;\n --size-tip: 250px;\n --size-menu: 170px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --space-7: 36px;\n}\n\n/* ---------- views: one screen of the example site at a time ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- frame: the game window every box is built from ----------\n The border is the metal of the frame, the surface token --shadow-panel\n adds its inner lines and lip, and two pseudo-elements set a faceted cap\n with a small stone on each corner. */\n.ds-frame {\n position: relative;\n box-sizing: border-box;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-frame::before,\n.ds-frame::after {\n content: \"\";\n position: absolute;\n inset: calc((var(--border-width-strong) + var(--space-1)) * -1);\n z-index: 2;\n pointer-events: none;\n border-radius: var(--radius-panel);\n}\n.ds-frame::before {\n background:\n linear-gradient(135deg, var(--color-border-strong) 50%, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%) top left / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(225deg, var(--color-border-strong) 50%, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%) top right / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(45deg, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%, var(--color-border-strong) 50%) bottom left / var(--size-corner) var(--size-corner) no-repeat,\n linear-gradient(315deg, color-mix(in srgb, var(--color-border-strong), var(--color-shadow) 45%) 50%, var(--color-border-strong) 50%) bottom right / var(--size-corner) var(--size-corner) no-repeat;\n}\n.ds-frame::after {\n background:\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) top left / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) top right / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) bottom left / var(--size-corner) var(--size-corner) no-repeat,\n radial-gradient(circle, var(--color-accent-alt) 0, var(--color-accent-alt) 28%, transparent 34%) bottom right / var(--size-corner) var(--size-corner) no-repeat;\n}\n.ds-frame--plain::before,\n.ds-frame--plain::after {\n display: none;\n}\n\n/* ---------- small layout helpers ---------- */\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-row--between {\n justify-content: space-between;\n}\n.ds-muted {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n/* An ornamental heading: the title between two fading rules. */\n.ds-heading {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-heading::after {\n content: \"\";\n flex: 1;\n height: var(--size-hair);\n background: linear-gradient(to right, var(--color-border-strong), transparent);\n}\n.ds-heading--centre::before {\n content: \"\";\n flex: 1;\n height: var(--size-hair);\n background: linear-gradient(to left, var(--color-border-strong), transparent);\n}\n/* A rule with a diamond set in its middle. */\n.ds-rule {\n position: relative;\n height: var(--size-hair);\n margin: var(--space-3) 0;\n background: linear-gradient(to right, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);\n}\n.ds-rule::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: var(--size-corner);\n height: var(--size-corner);\n background: var(--color-border-strong);\n box-shadow: var(--shadow-control);\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 {\n padding-bottom: var(--space-2);\n font-size: var(--text-h2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-6);\n}\n.ds-prose li { margin-bottom: var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n/* A quoted passage: a ruled inset in the alternate surface. */\n.ds-prose__quote {\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-prose__quote cite {\n display: block;\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\n}\n\n/* ---------- buttons: bevelled metal plates ---------- */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n box-sizing: border-box;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 60%);\n text-shadow: none;\n}\n/* The destructive plate: the secondary metal, lettered and edged in the\n danger colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n letter-spacing: var(--heading-tracking);\n}\n.ds-button--small {\n min-height: var(--size-control-small);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: right;\n text-transform: var(--ui-transform);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-form__textarea {\n min-height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input--short {\n width: var(--size-field-short);\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n}\n.ds-form__checkbox {\n width: var(--size-icon);\n height: var(--size-icon);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__actions-end {\n margin-left: auto;\n}\n/* A search line: one well and one plate. */\n.ds-form--search {\n flex-direction: row;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding: var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table tbody th {\n font-weight: var(--weight-bold);\n}\n.ds-table tbody tr:nth-child(even) {\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody tr:hover,\n.ds-table tbody tr.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-table .is-numeric {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .is-centre {\n text-align: center;\n}\n.ds-table a:not(.ds-item) {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:not(.ds-item):hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-table__group th,\n.ds-table__group td {\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-table__sub {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-table__who {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--heading-transform);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n margin: var(--space-2) 0 0;\n color: var(--color-text);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list--tight .ds-list__item {\n align-items: center;\n padding: var(--space-2) var(--space-4);\n}\n.ds-list--tight .ds-list__title {\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n flex: 1;\n padding: var(--space-4);\n font-size: var(--text-base);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* ---------- stats ---------- */\n.ds-stats {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1;\n padding: var(--space-3) var(--space-4);\n text-align: center;\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- grid: cells tinted with the four rarity colours ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid--two {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n padding: var(--space-4);\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-1) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-control);\n font-size: var(--text-base);\n}\n.ds-grid__cell--2 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-2) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-3) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-fill-4) 24%, var(--color-surface)) 0, var(--color-surface) 70%);\n border-top-color: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-crest);\n height: var(--size-crest);\n color: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__icon { color: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__icon { color: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__icon { color: var(--color-fill-4); }\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n flex: 1;\n margin: 0;\n}\n.ds-grid__cell .ds-badge {\n align-self: flex-start;\n}\n.ds-grid__more {\n color: var(--color-link);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- tabs: plates standing on the edge of the window below ---------- */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-tabs__tab.is-current {\n padding: var(--space-3) var(--space-5);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__count {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%);\n border-radius: var(--radius-pill);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* Status labels: the status colour as ink on a tint of itself. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger,\n.ds-badge--quiet {\n background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));\n color: var(--color-success);\n border-color: var(--color-success);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));\n color: var(--color-warning);\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-color: var(--color-border);\n}\n.ds-badge--new {\n background: transparent;\n color: var(--color-accent-alt);\n border-color: var(--color-accent-alt);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n/* A status lamp for a realm or a member. */\n.ds-dot {\n display: inline-block;\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n vertical-align: middle;\n}\n\n/* ---------- item names in the rarity colours ---------- */\n.ds-item {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-item--uncommon { color: var(--color-success); }\n.ds-item--rare { color: var(--color-fill-1); }\n.ds-item--epic { color: var(--color-fill-2); }\n.ds-item--legendary { color: var(--color-fill-3); }\n.ds-item--set { color: var(--color-fill-4); }\n\n/* ---------- tooltip: the item window ---------- */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n top: calc(100% + var(--space-2));\n left: 0;\n z-index: 8;\n display: none;\n box-sizing: border-box;\n width: var(--size-tip);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n}\n/* The same window written into the page, on an item's own sheet. */\n.ds-tooltip--card {\n display: block;\n cursor: default;\n}\n.ds-tooltip--card .ds-tooltip__tip {\n position: static;\n display: block;\n width: auto;\n}\n.ds-tooltip__name {\n display: block;\n margin-bottom: var(--space-1);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-tooltip__line {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-tooltip__line--bonus {\n color: var(--color-success);\n}\n\n/* ---------- progress: health, experience and reputation bars ---------- */\n.ds-progress {\n display: block;\n box-sizing: border-box;\n height: var(--size-bar);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n box-shadow: var(--shadow-control);\n}\n.ds-progress--10 .ds-progress__bar { width: 10%; }\n.ds-progress--25 .ds-progress__bar { width: 25%; }\n.ds-progress--60 .ds-progress__bar { width: 60%; }\n.ds-progress--75 .ds-progress__bar { width: 75%; }\n.ds-progress--90 .ds-progress__bar { width: 90%; }\n.ds-progress--100 .ds-progress__bar { width: 100%; }\n.ds-progress--health .ds-progress__bar { background: var(--color-success); }\n.ds-progress--rep .ds-progress__bar { background: var(--color-warning); }\n.ds-progress--danger .ds-progress__bar { background: var(--color-danger); }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-1);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-progress__label + .ds-progress {\n margin-bottom: var(--space-3);\n}\n.ds-progress__label + .ds-progress:last-child {\n margin-bottom: 0;\n}\n\n/* ---------- avatar: a portrait as a framed crest ---------- */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-crest);\n height: var(--size-crest);\n padding: var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-avatar svg {\n width: 100%;\n height: 100%;\n}\n.ds-avatar--small {\n width: var(--size-control);\n height: var(--size-control);\n padding: var(--space-1);\n border-width: var(--border-width);\n}\n.ds-avatar--large {\n width: var(--size-crest-large);\n height: var(--size-crest-large);\n padding: var(--space-3);\n}\n.ds-avatar--1 { color: var(--color-fill-1); }\n.ds-avatar--2 { color: var(--color-fill-2); }\n.ds-avatar--3 { color: var(--color-fill-3); }\n.ds-avatar--4 { color: var(--color-fill-4); }\n\n/* ---------- accordion ---------- */\n.ds-accordion {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-accordion__item {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-1) * 4) var(--space-1) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-1) calc(var(--space-1) * 4) no-repeat,\n var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-1) * 4) var(--space-1) no-repeat,\n var(--fill-button-secondary);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-heading);\n}\n.ds-accordion__meta {\n margin-left: auto;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n.ds-accordion__body {\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: var(--size-control-small);\n min-height: var(--size-control-small);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary), var(--color-shadow) 60%);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: color-mix(in srgb, var(--color-accent), var(--color-shadow) 50%);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-pagination__link.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a small game window with a title plate ---------- */\n.ds-dialog__backdrop {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n position: relative;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control-small);\n height: var(--size-control-small);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button), var(--color-shadow) 60%);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-size: 0;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n width: calc(var(--space-1) * 5);\n height: calc(var(--space-1) * 5);\n background: linear-gradient(currentColor, currentColor) center / 100% var(--space-1) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-1) 100% no-repeat;\n rotate: 45deg;\n}\n.ds-dialog__body {\n padding: var(--space-4);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-3);\n}\n.ds-dialog__text:last-child {\n margin-bottom: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n\n/* ---------- empty state: an empty slot ---------- */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-6) var(--space-5);\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-crest);\n height: var(--size-crest);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0;\n max-width: 44ch;\n}\n\n/* ---------- menu: the drop-down under a navigation plate ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 9;\n display: none;\n box-sizing: border-box;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-menu__list li:last-child .ds-menu__item {\n border-bottom: 0;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-link-hover);\n}\n.ds-menu__caret {\n font-family: var(--font-body);\n font-size: var(--text-small);\n}\n\n/* ---------- page header of an inner page ---------- */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* ---------- brand: the mark as a crest ---------- */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-brand);\n height: var(--size-brand);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- band: the closing call, a strip of the inverse material ---------- */\n.ds-band {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control);\n font-size: var(--text-base);\n}\n.ds-band__title {\n display: block;\n margin: 0;\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-band__text {\n margin: 0;\n}\n\n/* ---------- shell: three slabs on the stone ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) 0 var(--space-6);\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page__wrap {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n}\n.ds-page__body {\n padding: var(--space-7) var(--space-5) var(--space-5);\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-page__main,\n.ds-page__aside {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- nav: the banner, the crest in its middle, pennants below ---------- */\n.ds-nav {\n position: relative;\n z-index: 3;\n margin-bottom: calc((var(--size-pennant) - var(--space-4)) * -1);\n}\n.ds-nav__banner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-accent-alt) 24%, transparent) 0, transparent 60%), var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__motto {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-style: italic;\n letter-spacing: var(--heading-tracking);\n}\n.ds-nav__realm {\n display: block;\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-style: normal;\n letter-spacing: 0;\n}\n.ds-nav__account {\n text-align: right;\n}\n.ds-nav__action {\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n.ds-brand {\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-brand__mark {\n border-radius: var(--radius-control) var(--radius-control) 50% 50%;\n}\n.ds-nav__links {\n display: flex;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n min-width: 13ch;\n height: var(--size-pennant);\n padding: var(--space-3) var(--space-4) 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__link.is-current,\n.ds-page:has(#roster:target) .ds-nav__link[href=\"#roster\"],\n.ds-page:has(#calendar:target) .ds-nav__link[href=\"#calendar\"],\n.ds-page:has(#thread:target) .ds-nav__link[href=\"#thread\"],\n.ds-page:has(#apply:target) .ds-nav__link[href=\"#apply\"],\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu__list {\n top: calc(100% - var(--space-4));\n}\n\n/* ---------- hero: the guild's standard and its call for recruits ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) var(--size-aside);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-5);\n background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--color-accent) 50%, transparent) 0, transparent 60%), var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* A standard hanging from its pole, cut to a swallow tail. */\n.ds-hero__standard {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-crest-large);\n height: calc(var(--size-crest-large) * 1.7);\n padding: var(--space-4) var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);\n}\n.ds-hero__standard svg {\n width: 100%;\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__next {\n align-self: stretch;\n}\n\n/* ---------- sidebar: a side box with a centred title between rules ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n}\n.ds-sidebar__title {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n white-space: nowrap;\n}\n.ds-sidebar__title::before,\n.ds-sidebar__title::after {\n content: \"\";\n flex: 1;\n height: var(--size-hair);\n background: var(--color-border-strong);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n}\n.ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__link {\n flex: 1;\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- panel: the title is a ribbon laid over the top edge ---------- */\n.ds-panel__title {\n align-self: center;\n margin-top: calc(var(--space-4) * -1);\n padding: var(--space-2) var(--space-7);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: 0;\n text-shadow: var(--shadow-text);\n clip-path: polygon(0 0, 100% 0, calc(100% - var(--space-3)) 50%, 100% 100%, 0 100%, var(--space-3) 50%);\n position: relative;\n z-index: 3;\n}\n.ds-panel {\n margin-top: var(--space-3);\n}\n.ds-tabs {\n border-bottom: 0;\n justify-content: center;\n}\n\n/* ---------- thread: a post is a frame with the author down its side ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-author) minmax(0, 1fr);\n}\n.ds-post__author {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-post__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-post__main {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-post__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n color: var(--color-text-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-post__body {\n flex: 1;\n padding: var(--space-4);\n}\n.ds-post__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- calendar: a month of cells ---------- */\n.ds-calendar {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n}\n.ds-calendar__head {\n padding: var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: center;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-calendar__day {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n box-sizing: border-box;\n min-height: var(--size-day);\n padding: var(--space-2);\n border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-calendar__day:nth-child(7n) {\n border-right: 0;\n}\n.ds-calendar__date {\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n line-height: var(--line-heading);\n}\n.ds-calendar__day.is-other {\n background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);\n}\n.ds-calendar__day.is-other .ds-calendar__date {\n color: var(--color-text-muted);\n}\n.ds-calendar__day.is-today {\n background: var(--color-surface-strong);\n box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-accent-alt);\n}\n.ds-calendar__event {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-calendar__event:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- footer: the foot plate ---------- */\n.ds-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__note {\n margin: 0;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a guild's site and forums, specimen\n\n\n\n\n
\n\n
\n
\n \"We hold the gate.\"A warband guild of the Ashenford realm, since 2006\n \n \n chronoskin\n \n Signed in as Brannoc, officer
2 new replies, 1 raid sign-up waiting\n
\n \n
\n\n
\n\n
\n
\n
\n \n
\n

Twelve at the gate, three nights a week

\n

We are sixty-four grown people with jobs who still clear the Ember Gate. Two menders and a ranger would make it easier.

\n
\n Apply to join\n Read the charter\n
\n
\n
\n
\n
Ember Gate7 of 9 foes
\n \n
Cinder Reach4 of 4 foes
\n \n
Next raid: Wednesday 20:009 / 12
\n \n
\n
\n
\n\n
    \n
  • 64Members
    • \n
  • 11Online now
    • \n
  • 7 / 9Ember Gate
    • \n
  • 3rdOn the realm
    • \n
  • 2006Founded
    • \n
\n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
ForumThreadsPostsLast post
The hall
AnnouncementsRaid times, rule changes and who has the keys.48612Today 19:02by Brannoc
Raid tactics NewOne thread for every foe. Read before Wednesday.311,204Today 18:40by Ysolde
ApplicationsOpen to guests. Officers answer within a week.120873Yesterdayby Perrin
The tavern
Tavern talkEverything that is not the game.4029,118Today 19:11by Maelis
Trades and craftingWho can make what, and what it costs a guild mate.775405 Octoberby Odalric
\n
\n\n

We are looking for

\n
    \n
  • \n \n

    Wardens

    \n

    Closed. We have three and they get on.

    \n Closed\n
    • \n
  • \n \n

    Arcanists

    \n

    One place, for somebody who likes frost.

    \n One place\n
    • \n
  • \n \n

    Rangers

    \n

    Open. Bring a pet that listens.

    \n Open\n
    • \n
  • \n \n

    Menders

    \n

    Open, twice over. We will feed you.

    \n Open\n
    • \n
\n
\n\n \n
\n\n
\n
From the charter

Turn up, bring your own arrows, and never laugh at a wipe before the mender does.

\n Read the charter\n
\n
\n
\n\n
\n
\n
    \n
  1. Hall
    2. \n
  2. »
    3. \n
  3. Roster
    4. \n
  4. »
    5. \n
  5. All members
    6. \n
\n
\n
\n

Roster

\n

64 members, 11 of them in the game now. Attendance counts the last twelve raids.

\n
\n
Apply to join
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n
MemberRankBest pieceLast seenLevelAttendance
BrannocWardenOfficerGatekeeper's BulwarkGatekeeper's BulwarkOff handShield2,840 armour+31 staminaOnline60
YsoldeArcanistRaiderAshfall, the Last EmberOnline60
PerrinRangerRaiderCinderwalker GreavesAway60
MaelisMenderRaiderVigil BreastplateOnline59
OdalricWardenFriendWarden's Travel Cloak3 October52
SunnivaArcanistFriendPlain Iron BandLeft the realm44
\n
\n
\n
\n \n Members 1 to 6 of 64, by rank and then by name.\n
\n
\n
\n\n
\n
\n
    \n
  1. Hall
    2. \n
  2. »
    3. \n
  3. Calendar
    4. \n
  4. »
    5. \n
  5. October
    6. \n
\n
\n
\n

October

\n

Raids on Wednesday and Sunday at 20:00, server time. Sign up by noon.

\n
\n
SeptemberNovember
\n
\n
\n
\n
\n
\n MonTueWedThuFriSatSun\n
28
\n
29
\n
30Ember Gate
\n
1
\n
2
\n
3
\n
4Cinder Reach
\n
5
\n
6Officers meet
\n
7Ember Gate9 / 12
\n
8
\n
9Fishing contest
\n
10
\n
11Cinder Reach4 / 12
\n
12
\n
13
\n
14Ember Gate12 / 12
\n
15
\n
16
\n
17Harvest fair
\n
18Cinder Reach
\n
19
\n
20Officers meet
\n
21Ember Gate
\n
22
\n
23
\n
24
\n
25Cinder Reach
\n
26
\n
27
\n
28Ember Gate
\n
29
\n
30
\n
31Night of masks
\n
1
\n
\n
\n
\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Forums
    2. \n
  2. »
    3. \n
  3. Raid tactics
    4. \n
  4. »
    5. \n
  5. The Gate Warden
    6. \n
\n
\n
\n

The Gate Warden, foe nine

\n

Started by Brannoc in Raid tactics. 14 replies, 388 views.

\n
\n
Post a reply
\n
\n
\n
\n \n Brannoc\n Officer\n Level 60 warden
Posts: 2,104\n
\n
\n
Posted on 5 October at 21:14#1
\n
\n
\n

How we beat the Gate Warden

\n

Three phases, one rule: nobody stands in the embers.

\n

I hold him at the north pillar. When he raises the shield, stop all harm at once; macro it with /stopattack if you must.

\n

Phase one

\n
    \n
  • Menders stand on the two marked stones.
    • \n
  • Rangers kill the cinder hounds as they come.
    • \n
\n

What drops

\n

The Gatekeeper's Bulwark and, once in a blue moon, Ashfall, the Last Ember. Loot rules are in the charter.

\n
\n
\n
\n \n Edited once\n
\n
\n
\n
\n
\n \n Ysolde\n Raider\n Level 60 arcanist
Posts: 871\n
\n
\n
Posted on 5 October at 21:40#2
\n
\n
\n
Brannoc wrote:When he raises the shield, stop all harm at once.
\n

Frost spells that are already in the air still land and still count. I will stop casting two seconds early.

\n
\n
\n
\n \n Online\n
\n
\n
\n
\n \n Post a reply\n
\n
\n
\n\n
\n
\n
    \n
  1. Hall
    2. \n
  2. »
    3. \n
  3. Applications
    4. \n
  4. »
    5. \n
  5. New application
    6. \n
\n
\n
\n

Apply to join

\n

Officers read every application and answer within a week.

\n
\n
See the roster
\n
\n
\n

Open now: rangers and menders. One place for an arcanist.

\n

Not sent yet. One field below needs another look.

\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n \n Paste the full address of your sheet in the armory.\n
\n
\n
\n \n
\n \n Tell us when you can play and who you have raided with.\n
\n
\n
\n Raid nights\n
\n \n \n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.game-fantasy.forum.s03.p03.t03.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"game-fantasy\",\n \"years\": [\n 2004,\n 2026\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-gf-3333\",\n \"short\": \"v1-gf-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #070e18;\n --color-canvas: #cdd5dc;\n --color-surface: #e1e7ec;\n --color-surface-alt: #d3dbe2;\n --color-surface-strong: #b9c5d0;\n --color-bar: #1c456e;\n --color-bar-text: #eaf4fd;\n --color-bar-alt: #26313d;\n --color-bar-alt-text: #c3d2e0;\n --color-inverse: #0d1a28;\n --color-inverse-text: #cfe6f8;\n --color-text: #232b33;\n --color-text-muted: #5b6875;\n --color-heading: #12324f;\n --color-heading-alt: #2d4a66;\n --color-link: #175a94;\n --color-link-quiet: #44566a;\n --color-link-visited: #54507c;\n --color-link-hover: #0a78b8;\n --color-link-active: #0b2238;\n --color-border: #a3b0bc;\n --color-border-strong: #8494a3;\n --color-border-muted: #c3ccd5;\n --color-accent: #0c7fbc;\n --color-accent-text: #ffffff;\n --color-accent-alt: #8f6a12;\n --color-fill-1: #1558b0;\n --color-fill-2: #7334a8;\n --color-fill-3: #b3570c;\n --color-fill-4: #0f7a80;\n --color-button: #1c5d8f;\n --color-button-text: #ffffff;\n --color-button-hover-text: #e3f4ff;\n --color-button-secondary: #c4ced8;\n --color-button-secondary-text: #1f2c3a;\n --color-input: #f3f6f9;\n --color-input-text: #1b242d;\n --color-input-border: #8d9cab;\n --color-disabled: #c7cfd6;\n --color-disabled-text: #8a96a2;\n --color-danger: #a82424;\n --color-danger-surface: #edd3d3;\n --color-success: #23753a;\n --color-warning: #9a6500;\n --color-notice: #d3e6f3;\n --color-notice-text: #173a56;\n --color-focus: #0c8fd0;\n --color-shadow: #02060c;\n --color-overlay: rgba(4, 10, 18, 0.65);\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", \"Lucida Grande\", \"Lucida Sans Unicode\", Tahoma, sans-serif;\n --font-heading: \"EB Garamond\", \"Hoefler Text\", Garamond, \"Times New Roman\", Times, serif;\n --font-ui: \"EB Garamond\", \"Hoefler Text\", Garamond, \"Times New Roman\", Times, serif;\n --font-mono: Consolas, Menlo, \"DejaVu Sans Mono\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 14px;\n --text-large: 17px;\n --text-display: 42px;\n --text-h1: 30px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.4;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 1px;\n --figure-shift: -0.01em;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: ridge;\n --radius-control: 4px;\n --radius-panel: 8px;\n --radius-pill: 12px;\n --radius-page: 12px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 75%, transparent), 0 6px 16px color-mix(in srgb, var(--color-shadow) 65%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), inset 0 -1px 0 color-mix(in srgb, black 25%, transparent), 0 0 7px color-mix(in srgb, white 70%, transparent);\n --shadow-control-pressed: inset 0 2px 5px color-mix(in srgb, black 45%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 10px 24px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n --shadow-text: 0 1px 1px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --fill-page: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--color-page), white 20%) 0, transparent 60%), repeating-linear-gradient(115deg, color-mix(in srgb, white 3%, transparent) 0, transparent 2px, transparent 9px, color-mix(in srgb, white 2%, transparent) 10px, transparent 23px), var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 30%) 0, color-mix(in srgb, var(--color-bar), white 10%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n --fill-bar-alt: repeating-linear-gradient(90deg, color-mix(in srgb, white 4%, transparent) 0, transparent 1px, transparent 3px), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 22%) 0, var(--color-bar-alt) 55%, color-mix(in srgb, var(--color-bar-alt), black 25%) 100%);\n --fill-inverse: linear-gradient(135deg, color-mix(in srgb, white 9%, transparent) 0, transparent 35%, color-mix(in srgb, white 5%, transparent) 36%, transparent 70%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%) 0, var(--color-inverse) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 40%) 0, color-mix(in srgb, var(--color-accent), white 12%) 50%, var(--color-accent) 50%, color-mix(in srgb, var(--color-accent), black 16%) 100%);\n --fill-panel: linear-gradient(120deg, transparent 0, transparent 30%, color-mix(in srgb, white 30%, transparent) 42%, transparent 55%), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface), white 55%) 0, var(--color-surface) 35%, color-mix(in srgb, var(--color-surface), black 8%) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 14%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 20%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 56%) 0, color-mix(in srgb, var(--color-button), white 26%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%) 0, color-mix(in srgb, var(--color-button-secondary), white 25%) 50%, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 12%) 100%);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 10%) 0, var(--color-input) 4px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }