{ "id": "v1-po-8a2a", "long_id": "v1.portals-2000s.shop.s08.p10.t02.u10", "name": "Travel booking, 2000 to 2004", "era": { "slug": "portals-2000s", "code": "po", "name": "Early-2000s portals", "years": [ 2000, 2004 ], "description": "Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space." }, "archetype": "shop", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A flight-booking site of the kind travel agents, airlines and portals' travel channels ran between 2000 and 2004: a 760px sheet hanging from the top of a 1024px window under a band of solid colour, with five large two-line tabs for the kinds of travel and a numbered step line under them. The home page sets a boxed search desk beside the week's offers; every page after it is a step of a booking, with a narrowing column or a price column beside ruled tables and forms. Titles are a bold serif up to 26px over 12px sans-serif text and 10px Verdana small print, and it gave way from about 2005 to wider pages with calendars that opened in place, photographs and rounded panels.", "url": "https://chrono.skin/s/v1-po-8a2a", "preview_url": "https://chrono.skin/s/v1-po-8a2a/specimen.html", "files": { "STYLE.md": "# Travel booking, 2000 to 2004\n\n## Summary\n\nA flight-booking site of the kind travel agents, airlines and portals' travel channels ran between 2000 and 2004: a 760px sheet hanging from the top of a 1024px window under a band of solid colour, with five large two-line tabs for the kinds of travel and a numbered step line under them. The home page sets a boxed search desk beside the week's offers; every page after it is a step of a booking, with a narrowing column or a price column beside ruled tables and forms. Titles are a bold serif up to 26px over 12px sans-serif text and 10px Verdana small print, and it gave way from about 2005 to wider pages with calendars that opened in place, photographs and rounded panels.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 760px; `.ds-page__frame` is a sheet of that width centred in the window (`margin: 0 auto`) and touching its top edge, closed at the bottom by a `--border-width-strong` rule. `.ds-page` pads the window at the sides and bottom only and paints `--fill-page`. No text sits on the page colour.\n- Navigation is three stacked parts of the header, all full width: `.ds-nav__top`, the band in the bar colour holding the wordmark on the left and the account links on the right; `.ds-nav__tabs`, five equal two-line tabs (a serif label over a 10px caption), of which the open one takes the secondary bar colour; and `.ds-nav__steps`, the strip in that same colour which the open tab runs into, listing the numbered steps of a booking with the current one in bold.\n- Everything below the header sits in `.ds-page__body`, padded `--space-5` (10px), and each view is one `.ds-page__flow`, a column of blocks `--space-5` apart.\n- The home page is `.ds-page__desk`: the `.ds-desk` search box in a `--size-desk` (252px) column on the left, and on the right a `.ds-page__flow` of the `.ds-hero` and the two-by-two `.ds-grid`. Under it `.ds-page__lower` mirrors the split: a `.ds-section` over a `.ds-list` on the left and one `.ds-panel` in a `--size-desk` column on the right. Columns stretch so both end level.\n- Inner pages keep the header and footer and have no hero and no search desk. Each opens with `.ds-breadcrumb`, then `.ds-page-header`, then the work. A list of results is `.ds-page__columns`: a `--size-filter` (168px) `.ds-sidebar` on the left and the `.ds-tabs`, `.ds-table` and `.ds-pagination` touching each other on the right. A page about one fare or one booking is `.ds-page__columns--summary`: the work on the left and a `--size-summary` (224px) column of `.ds-panel` boxes on the right. An account page uses the whole width: `.ds-stat`, tabs on the table with its `.ds-buttons` row, then `.ds-page__pair` for two half-width blocks.\n- Views. The specimen is one example site of five screens, one showing at a time; the header and footer are written once around them. `home` is step 1: the search desk, the offer of the week, four offers, fares that fell today and a box of advice. `results` is step 2: breadcrumb, page header, the narrowing column, a sort line on the fares table, pagination. `fare` is step 3: the two legs of the journey, the fare conditions as article text, a row of links, and the price column. `book` is step 4: page header, notices, the travellers form and the booking so far. `trips` is the signed-in page: page header, stat cells, tabs on the bookings table with its buttons, the cancel message box beside the empty past-trips block. The Flights tab marks the four steps and My trips marks `trips`; the step line marks the open step.\n- Spacing scale: `--space-1` 1px is the padding between checkbox rows; `--space-2` 2px is the vertical padding of buttons and inputs and of form rows; `--space-3` 4px is the vertical padding of table cells, list rows, tabs and title strips; `--space-4` 7px is the side padding of cells and boxes and the gap between fields; `--space-5` 10px is the padding of the sheet, the gutter between columns and the gap between blocks; `--space-6` 14px is the gap between links in a row and the padding round a dialog. There is no step above 14px.\n- Fixed sizes: `--size-price` 84px sets the price block of the hero; `--size-step` 16px the numbered square of a step; `--size-mark` 28px the brand tile; `--size-search` 112px a short input; `--size-field` 210px a text input; `--size-label` 116px the label column of a form; `--size-area` the height of a textarea; `--size-dialog` 340px a message box.\n- Blocks are separated by 10px of sheet and closed by rules, not boxed: only the search desk, panels, the form, notices, the hero and the dialog carry an outline.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Olive and khaki on white. `--color-page` #ffffff is the window; `--color-canvas` #faf8e3 is the pale cream sheet that shows in the gutters; panel bodies are `--color-surface` #f5f4db; plain tiles, table cells, the breadcrumb, the stat tile, the sidebar tile and the empty state are `--color-surface-alt` #ebebb4; picture slots, inactive tabs and page-number cells are `--color-surface-strong` #b0b249 with `--color-link-quiet` #333333 text.\n- `--color-bar` #666633 (dark olive) with `--color-bar-text` #ffffff is the navigation strip, panel and dialog titles, table heads, the current tab and the current page number; `--color-bar-alt` #999999 with white text is the service band, the footer strip and alternate panel titles. `--color-inverse` #333333 with `--color-inverse-text` #f5f4db is the one dark block (`.ds-panel--inverse`); links inside it take `--color-accent`.\n- Text is dark grey, not black: `--color-text` and `--color-heading` #333333, `--color-text-muted` #666666 for meta lines and labels, `--color-heading-alt` #666633 for tile titles and h3.\n- `--color-link` #083090 is the only blue and marks links in running text, list titles and the hero's main action; `--color-link-quiet` #333333 is every link inside a tile's link list, the directory, the index and the sidebar; hover #000000, active #cc0000, visited #666666. `--color-accent` #ebebb4 with `--color-accent-text` #333333 is the badge and the current navigation cell; `--color-accent-alt` #083090 marks promoted entries.\n- `--color-fill-1` to `--color-fill-4` (#ebebb4, #edebc6, #f1eed1, #f5f4db) are four steps of the same khaki, not four hues; they tint the search tile and directory (1), the hero body (2), further tiles and the grid cells. Text on a fill is `--color-text`, `--color-heading`, `--color-heading-alt` or a link colour, never the muted colour. Rules are olive (`--color-border` #b0b249); the dialog outline is `--color-border-strong` #666666.\n- Buttons are white (`--color-button` #ffffff, black label) with a `--border-width-strong` outset bevel in `--color-border-muted`; the secondary button is cream #f5f4db. `--color-danger` #cc0000 on `--color-danger-surface` #f8e0d8 is error text, the border of an invalid field and the label of a destructive button; `--color-success` #009933 and `--color-warning` #ffcc00 are badge fills only.\n- `--font-body` and `--font-ui` are Verdana; `--font-heading` is Tahoma, a narrower face, so tile titles stay compact beside wide body text. `--font-mono` is Courier New. One reference set its titles in a commercial narrow grotesque; Tahoma is the stand-in.\n- `--text-base` 11px for body, `--text-small` and `--text-ui` 10px for meta lines, strips, tabs, cells and buttons; `--text-large` 13px for a lead paragraph; `--text-h3` 13px for panel titles and grid titles; `--text-h2` 16px for tile titles, the wordmark and the sidebar title; `--text-h1` and `--text-display` 19px, used once or twice per page (hero title, page title, stat figures).\n- `--ui-transform` is uppercase: the navigation cells, tabs and button labels are small bold capitals (`--weight-ui` 700). Tile titles and headings are not uppercased and nothing is tracked.\n- Links carry no underline (`--link-decoration` none, `--link-decoration-quiet` none) and are told apart by colour and weight; the underline appears on hover (`--link-decoration-hover`). All line heights are `normal`.\n- Fills are flat colour under a fine screen texture, drawn as a pattern and never as a gradient: `--fill-page` lays a 4px dot grid over the page colour, and `--fill-bar`, `--fill-bar-alt`, `--fill-inverse` and `--fill-accent` lay faint 1px scan lines over their colour, so strips, bar titles and the current navigation cell read as lined. Tiles, panels, buttons and inputs are plain colour; a hovered button takes the secondary button fill, and a pressed one gains a 1px inset line (`--shadow-control-pressed`). No radius, no resting shadow, no gradient. `--border-style` is dashed: the rules inside tiles and between list items, the dividers of the stat tile, the panel body outline, notice and dialog outlines are 1px dashed lines. `--focus-ring` is a 1px dashed line in `--color-focus`; `--transition` none.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, and `solid` for the 1px dividers between cells of the navigation strip and link strips (the vocabulary has a single `--border-style`).\n\n- Broadsheet blues on white with one red. `--color-page`, `--color-canvas` and `--color-surface` are #ffffff. `--color-surface-alt` #cfdfef (pale blue) fills sidebars, forms and alternate rows; `--color-surface-strong` #95b7e0 is sidebar title strips and inactive tabs.\n- `--color-bar` #006699 with white text is the link bar, panel titles, table heads and the current tab; `--color-bar-alt` #ff0000 with white text is the dateline strip: utility and footer strips and alternate panel titles. `--color-inverse` #003366 with white text is the one dark block.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #333333; `--color-heading-alt` #004371 for section titles and h3.\n- `--color-link` and `--color-link-quiet` #003366 (dark navy, close to text), visited #336699, hover #cc0000, active #ff0000. `--color-accent` #f6dd42 with black text is the badge, the current navigation item and links on the dark block; `--color-accent-alt` #cc0000 marks promoted entries.\n- Block fills are all cool: `--color-fill-1` #eaeff4, `--color-fill-2` #d0dbe8, `--color-fill-3` #cfdfef, `--color-fill-4` #eeeeee. Rules `--color-border` #6699cc, outlines `--color-border-strong` #003366, faint dividers #dddddd.\n- `--color-button` #dddddd, secondary #eeeeee. `--color-danger` #cc0000 on `--color-danger-surface` #eeeeee. The palette has no green: `--color-success` is the mid blue #336699; `--color-warning` is the yellow #f6dd42. Both are badge fills only.\n\n- Ruled like a broadsheet. `--border-style` is dotted: every 1px rule and outline is a row of dots. `--border-width-strong` 3px: heavy rules are thick dotted lines and controls have a 3px bevel. Every radius is 0 and nothing casts a shadow at rest; a pressed button gains a 1px inset line.\n- No gradients. `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the plain colour underscored along the bottom edge by a light hairline over a dark 2px line, drawn as a pattern; `--fill-page` lays a faint newsprint dither over the page colour; `--fill-panel` is `--color-surface-alt`, so boxes are tinted. A hovered button takes `--color-surface-strong`. `--focus-ring` is 2px solid; `--transition` none.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Wrap everything in `.ds-page__frame`; put the views in `.ds-page__body`. `.ds-page__flow` is a column of blocks; `.ds-page__desk`, `.ds-page__lower`, `.ds-page__columns` (with `--summary`) and `.ds-page__pair` split it into columns. `.ds-block` groups things that must touch. `.ds-page__legal` is the 10px copyright line.\n- `.ds-brand`: the site's mark and name at the left of the top band, a link to the home page, once per page. `.ds-brand__mark` is a `--size-mark` (28px) tile dressed like the primary button: `--fill-button`, the mark in `--color-button-text`, a 1px `--color-border-strong` outline, `--radius-control` and `--shadow-control`. The mark is inline SVG with round caps and a 2.2 stroke. `.ds-brand__name` is the 26px wordmark in `--font-heading` and `--weight-display`, in `--color-bar-text` because it sits on the bar. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__top` holds the `.ds-brand` and `.ds-nav__account` (a list of `.ds-nav__account-link`). `.ds-nav__tabs` is the row of five `.ds-nav__item` entries, each a `.ds-nav__link` holding a `.ds-nav__label` and a `.ds-nav__caption`; `is-current` gives it the secondary bar colour. `.ds-nav__steps` lists `.ds-nav__step` links, each starting with a `.ds-nav__step-number` square, `is-current` on the open step, and may end with a `.ds-nav__steps-note` at the right.\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the start page). A real multi-page site does not need it.\n- `.ds-breadcrumb`: inner pages only, first thing in the view: a 10px trail over a thin rule, `.ds-link--quiet` entries, `.ds-breadcrumb__sep` slashes and a bold `.ds-breadcrumb__current`.\n- `.ds-desk`: the search box of the home page: `.ds-desk__title` strip over `.ds-desk__body`, a form of `.ds-desk__field` labels (`.ds-desk__label` over a full-width `.ds-form__input`), `.ds-desk__row` to set two or three fields abreast (`.ds-desk__field--wide` gives one of them more room), and `.ds-desk__foot` with a link and the large search button.\n- `.ds-hero`: the offer of the week, home page only. `.ds-hero__body` holds `.ds-hero__kicker`, the 21px `.ds-hero__title`, `.ds-hero__text` and `.ds-hero__actions` (one `.ds-button`, then a link); `.ds-hero__price` is the dark block at its right with the 26px `.ds-hero__figure` between two `.ds-hero__from` lines.\n- `.ds-section`: a serif title behind a small accent square, over a thin rule, with `.ds-section__title` and an optional `.ds-section__more` link at the right.\n- `.ds-page-header`: head of an inner page, once per page: `.ds-page-header__title` (the page's h1) and one line of `.ds-page-header__text` over a heavy rule, with `.ds-page-header__action` holding one button at the right end.\n- `.ds-stat`: the row. Three to five `.ds-stat__item` cells 10px apart, each tinted under a heavy top edge, with a 21px `.ds-stat__value` over a 10px `.ds-stat__label`.\n- `.ds-leg`: one leg of a journey: departure on the left and arrival on the right (`.ds-leg__end`), each a `.ds-leg__time` over a `.ds-leg__place` and the date, with `.ds-leg__facts` ruled above and below between them.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code` (outlined, for fare codes), strong; `.ds-prose__byline` for the 10px line of facts and `.ds-prose__lead` for the 13px first paragraph.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the navigation colour without underline. `.ds-links` is a row of links under an article, each behind a small accent square.\n- `.ds-button`: the coloured key for the main action; `.ds-button--large` for the one button that moves the booking on. `.ds-button--secondary` is the pale key with a lighter outline; `.ds-button--danger` is filled with the danger colour, for cancelling a booking; `disabled` or `is-disabled` greys it; `is-hover` and `is-active` use the surface set's hover and pressed shadows. `.ds-buttons` is the row under a table, with `.ds-buttons__label` saying what the buttons act on.\n- `.ds-form`: an outlined block of groups, each a `.ds-form__legend` strip over a `.ds-form__group` of `.ds-form__row` pairs: a right-aligned bold `.ds-form__label` (optional `.ds-form__hint`) and a `.ds-form__field` holding the control. Controls take `.ds-form__input` (`--small`, `--auto` for selects, `--area` for textareas); `is-invalid` with a `.ds-form__error` line marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the tinted row with the large button.\n- `.ds-table`: a fares table without an outline: tinted head over a heavy rule, a hairline under every row, `is-current` to tint the chosen row, `.ds-table__num` for right-aligned figures, `.ds-table__price` for the bold price, `.ds-table__keep` to stop a cell wrapping, `.ds-table__note` for the 10px line under a cell. `.ds-table__caption` is the small line under it.\n- `.ds-tabs`: the sort line: an outlined tinted strip standing on the table, opened by a muted `.ds-tabs__label`, with `.ds-tabs__tab` links; `is-current` is a cut-out in the sheet colour under a heavy top edge.\n- `.ds-list`: offers one to a line. Each `.ds-list__item` has a `.ds-list__body` (a bold `.ds-list__title` link over a `.ds-list__meta` line) and a serif `.ds-list__price` at the right; rows alternate two surfaces and are ruled apart.\n- `.ds-panel`: an outlined box: `.ds-panel__title` strip over `.ds-panel__body`, optional `.ds-panel__actions` foot with a button. Body helpers: `.ds-panel__text`, `.ds-panel__list` of `.ds-panel__row` (label left, figure right; `--total` is the ruled bold sum), `.ds-panel__small`. `.ds-panel--alt` is tinted under the secondary bar; `.ds-panel--inverse` is the one dark box of a page.\n- `.ds-sidebar`: the narrowing column: a tinted block under a heavy top edge, with ruled `.ds-sidebar__title` headings over `.ds-sidebar__list` lists whose `.ds-sidebar__item` rows hold a link and a `.ds-sidebar__count`.\n- `.ds-grid`: four `.ds-grid__cell` offers two by two, tinted `--color-fill-1` or with `--2`, `--3`, `--4`, each with a 15px `.ds-grid__title` link, a `.ds-grid__text` line and a 21px `.ds-grid__price` under a small `.ds-grid__from`.\n- `.ds-badge`: a small accent label (\"BEST PRICE\"). `.ds-badge--alt` is bare text in `--color-accent-alt`. Status labels change the fill: `.ds-badge--success` (ticketed, confirmed), `.ds-badge--warning` (pay by), `.ds-badge--danger` (card refused).\n- `.ds-notice`: an outlined message that opens with a bold `.ds-notice__title` on its own line. `.ds-notice--error` uses the danger colours and a heavier outline. Stack several in `.ds-notices`.\n- `.ds-pagination`: a typed line under the table: `.ds-pagination__count` on the left, then underlined page links with the current page as `.ds-pagination__current` on a tinted square.\n- `.ds-dialog`: the era's message box, in the page flow: a `--size-dialog` box with a heavy outline, a tinted serif `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and left-aligned `.ds-dialog__actions`, on the flat `.ds-dialog__backdrop`.\n- `.ds-empty`: an outlined block with a centred muted `.ds-empty__text` and one button; it fills the height of its row.\n- `.ds-footer`: a thin rule, then `.ds-footer__bar`, a row of underlined `.ds-footer__link` entries on the sheet, followed by `.ds-page__legal`.\n- `.ds-carousel`: marks the lead block as a rotator; `.ds-carousel__dots` is its row of numbered `.ds-carousel__dot` buttons, the showing one `.is-current`. Static: one slide is in the page.\n- `.ds-accordion`: a list of questions or help topics as `
` with `.ds-accordion__summary` (a plus or minus box before it) and `.ds-accordion__body`. Use it for FAQs and help, not for navigation.\n- `.ds-tooltip`: a help hint beside a field: `.ds-tooltip__trigger` is a boxed question mark, `.ds-tooltip__text` shows under it on hover or focus. Everywhere else use the browser's own `title`.\n\n## Never\n\n- `row-gap <= 6px`: rows of tables and lists touch.\n- `block-gap <= 14px`: blocks sit 10px apart.\n- `content-width <= 770px`: the sheet is fixed at 760px and does not stretch.\n- `palette-colours <= 20`: blues, one red, one yellow and greys; no green, no warm tint.\n- `font-size <= 19px`: the largest text is a 19px title.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 3`: Verdana, Tahoma for headings and a monospace for code.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 12%`: capitals are for navigation cells, tabs and button labels only, never for body text or tile titles.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 3px`: 1px dotted rules, 3px heavy rules and bevels.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: fills are flat colour.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new box copies `.ds-panel` (hairline outline, title strip in `--fill-bar`, body padded `--space-4`); a new search form copies `.ds-desk`; a new list of priced things copies `.ds-list` or `.ds-table` with the price at the right in the heading font; a new step of a booking copies the `fare` or `book` view (breadcrumb, `.ds-page-header`, `.ds-page__columns--summary` with the running price on the right) and adds its link to `.ds-nav__steps`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Keep body text at 12px with 10px small print, set titles and prices in the heading font, close blocks with rules instead of boxing them, and never add soft shadows, rounded containers, photographs as backgrounds or whitespace wider than 14px.\n", "components.css": "/* Layout tokens (structure part). A booking site: the search desk beside\n the offers, then a narrowing column or a price column on inner pages. */\n:root {\n --size-page: 760px;\n --size-desk: 252px;\n --size-filter: 168px;\n --size-summary: 224px;\n --size-mark: 28px;\n --size-search: 112px;\n --size-label: 116px;\n --size-field: 210px;\n --size-area: 5em;\n --size-dialog: 340px;\n --size-price: 84px;\n --size-step: 16px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 7px;\n --space-5: 10px;\n --space-6: 14px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: 0 var(--space-5) var(--space-5);\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/* The sheet hangs from the top of the window, with a heavy foot. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n}\n.ds-page__body {\n padding: var(--space-5);\n}\n.ds-page__flow {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* Home: the search desk on the left, the offers on the right. */\n.ds-page__desk {\n display: grid;\n grid-template-columns: var(--size-desk) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n/* Results: a narrowing column on the left. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-filter) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n/* Fare and booking pages: the price column on the right. */\n.ds-page__columns--summary {\n grid-template-columns: minmax(0, 1fr) var(--size-summary);\n}\n.ds-page__lower {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-desk);\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- views ---------- */\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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* A row of links, each behind a small square marker. */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-4) 0 0;\n}\n.ds-links .ds-link {\n padding-left: var(--space-5);\n background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left center / var(--space-3) var(--space-3);\n}\n\n/* ---------- nav ---------- */\n.ds-nav {\n display: block;\n}\n/* The top band: the wordmark on the bar colour, account links at the right. */\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n/* The mark sits on a tile dressed like the primary button. */\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-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-brand__mark svg {\n display: block;\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-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__account {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__account-link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__account-link:hover,\n.ds-nav__account-link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* Five equal two-line tabs across the sheet; the open one takes the\n secondary bar colour and runs into the step line under it. */\n.ds-nav__tabs {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) var(--space-5) 0;\n list-style: none;\n background: var(--color-surface-alt);\n}\n.ds-nav__item {\n display: block;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n text-decoration: none;\n}\n.ds-nav__label {\n display: block;\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 text-transform: var(--ui-transform);\n}\n.ds-nav__caption {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__link:hover .ds-nav__label,\n.ds-nav__link.is-hover .ds-nav__label {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current,\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.ds-page:has(#results:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#fare:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#book:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#trips:target) .ds-nav__link[href=\"#trips\"] {\n background: var(--color-bar-alt);\n color: var(--color-bar-alt-text);\n border-color: var(--color-border-strong);\n}\n.ds-nav__link.is-current .ds-nav__caption,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] .ds-nav__caption,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] .ds-nav__caption,\n.ds-page:has(#results:target) .ds-nav__link[href=\"#home\"] .ds-nav__caption,\n.ds-page:has(#fare:target) .ds-nav__link[href=\"#home\"] .ds-nav__caption,\n.ds-page:has(#book:target) .ds-nav__link[href=\"#home\"] .ds-nav__caption,\n.ds-page:has(#trips:target) .ds-nav__link[href=\"#trips\"] .ds-nav__caption {\n color: var(--color-bar-alt-text);\n}\n/* The step line: where the visitor is in a booking. */\n.ds-nav__steps {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-5) calc(var(--space-3) + var(--space-1));\n list-style: none;\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}\n.ds-nav__step {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__step:hover,\n.ds-nav__step.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__step-number {\n display: inline-block;\n box-sizing: border-box;\n width: var(--size-step);\n margin-right: var(--space-3);\n background: var(--color-canvas);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-nav__step.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__step[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__step[href=\"#home\"],\n.ds-page:has(#results:target) .ds-nav__step[href=\"#results\"],\n.ds-page:has(#fare:target) .ds-nav__step[href=\"#fare\"],\n.ds-page:has(#book:target) .ds-nav__step[href=\"#book\"] {\n font-weight: var(--weight-bold);\n}\n.ds-nav__step.is-current .ds-nav__step-number,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__step[href=\"#home\"] .ds-nav__step-number,\n.ds-page:has(#home:target) .ds-nav__step[href=\"#home\"] .ds-nav__step-number,\n.ds-page:has(#results:target) .ds-nav__step[href=\"#results\"] .ds-nav__step-number,\n.ds-page:has(#fare:target) .ds-nav__step[href=\"#fare\"] .ds-nav__step-number,\n.ds-page:has(#book:target) .ds-nav__step[href=\"#book\"] .ds-nav__step-number {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-nav__steps-note {\n margin-left: auto;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- section title ---------- */\n/* A serif title behind a square marker, over a thin rule. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2) var(--space-5);\n background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left center / var(--space-4) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading-alt);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__more {\n font-size: var(--text-small);\n}\n\n/* ---------- search desk ---------- */\n/* The booking box: a title strip over a tinted body of stacked fields. */\n.ds-desk {\n display: flex;\n flex-direction: column;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-desk__title {\n margin: 0;\n padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--space-2));\n background: var(--fill-bar);\n color: var(--color-bar-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 text-shadow: var(--shadow-text);\n}\n.ds-desk__body {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-4);\n}\n.ds-desk__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-desk__field {\n display: block;\n min-width: 0;\n}\n.ds-desk__row .ds-desk__field {\n flex: 1 1 0;\n}\n.ds-desk__row .ds-desk__field--wide {\n flex: 1.7 1 0;\n}\n.ds-desk__label {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-desk__field .ds-form__input {\n width: 100%;\n}\n.ds-desk__foot {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-4);\n margin-top: auto;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* ---------- hero ---------- */\n/* The offer of the week: text on the left, the price in a block on the right. */\n.ds-hero {\n display: flex;\n align-items: stretch;\n background: var(--color-fill-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-hero__body {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-hero__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-hero__price {\n display: flex;\n flex: none;\n flex-direction: column;\n justify-content: center;\n box-sizing: border-box;\n width: calc(var(--size-price) + var(--space-6) + var(--space-6));\n padding: var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-align: center;\n}\n.ds-hero__from {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-hero__figure {\n display: block;\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}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-2) 0 var(--space-4);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: var(--space-3) 0 0;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* Separate tinted cells under a heavy top edge: a large figure over a label. */\n.ds-stat {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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-display);\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}\n\n/* ---------- itinerary ---------- */\n/* One leg of a journey: departure, a line of flight facts, arrival. */\n.ds-leg {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n align-items: center;\n gap: var(--space-5);\n margin: 0 0 var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\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-leg__time {\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-display);\n line-height: var(--line-heading);\n}\n.ds-leg__place {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-leg__facts {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-leg__end {\n text-align: right;\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); color: var(--color-heading-alt); }\n.ds-prose h3 { font-size: var(--text-h3); font-family: var(--font-body); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 calc(var(--space-6) + var(--space-3));\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- buttons ---------- */\n/* A coloured key with a heavier foot. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom-width: var(--border-width-strong);\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-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: pointer;\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--large {\n padding: var(--space-3) var(--space-6);\n font-size: var(--text-large);\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: var(--color-border);\n font-weight: var(--weight-ui);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-bar-text);\n border-color: var(--color-danger);\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-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-4) 0;\n}\n.ds-buttons__label {\n margin-right: auto;\n font-weight: var(--weight-bold);\n}\n\n/* ---------- form ---------- */\n/* Groups under a tinted legend strip; labels set to the right, against\n their controls. */\n.ds-form {\n margin: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__legend {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-form__group {\n padding: var(--space-3) var(--space-4);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-2) 0;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\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-body);\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\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 font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: block;\n padding-top: var(--space-2);\n color: var(--color-danger);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--size-label) + var(--space-4) + var(--space-4));\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- table ---------- */\n/* A fares table: a tinted head over a heavy rule, hairlines between rows,\n the price in bold at the right. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: middle;\n}\n.ds-table tr.is-current td {\n background: var(--color-fill-2);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table td.ds-table__keep {\n white-space: nowrap;\n}\n.ds-table td.ds-table__price {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* A sort line: a tinted strip of cells; the open one is a cut-out in the\n sheet colour under a heavy top edge. */\n.ds-tabs {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: var(--space-3) var(--space-3) 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__label {\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-link);\n border-top: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-top-color: var(--color-border-strong);\n text-decoration: none;\n}\n\n/* ---------- list ---------- */\n/* Offers one to a line: route and details on the left, the price on the right. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-5);\n align-items: center;\n padding: var(--space-3) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:nth-child(odd) {\n background: var(--color-surface-alt);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-list__price {\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n white-space: nowrap;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--space-2));\n background: var(--fill-bar);\n color: var(--color-bar-text);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n flex: 1 1 auto;\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n}\n.ds-panel__row--total {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-panel__small {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-panel__actions {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-panel--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: var(--color-border-strong);\n}\n.ds-panel--inverse .ds-panel__title {\n padding-top: var(--space-4);\n background: transparent;\n color: var(--color-inverse-text);\n font-size: var(--text-h2);\n}\n.ds-panel--inverse .ds-panel__small {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited {\n color: var(--color-accent);\n}\n\n/* ---------- sidebar ---------- */\n/* The narrowing column: groups of links under ruled titles, no box. */\n.ds-sidebar {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: 0 0 var(--space-2);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) 0 var(--space-5);\n list-style: none;\n}\n.ds-sidebar__list:last-child {\n padding-bottom: 0;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- grid ---------- */\n/* Four offers, two by two: a tinted cell with the price set at the right. */\n.ds-grid {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: end;\n padding: var(--space-4);\n background: var(--color-fill-1);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__title {\n grid-column: 1 / -1;\n margin: 0 0 var(--space-2);\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}\n.ds-grid__text {\n margin: 0;\n}\n.ds-grid__price {\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-grid__from {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: right;\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-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-bar-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-bar-text);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width-strong) var(--border-style) var(--color-danger);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* ---------- pagination ---------- */\n/* A typed line under the table: the count on the left, pages on the right. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__count {\n margin-right: auto;\n color: var(--color-text-muted);\n}\n.ds-pagination__current {\n padding: 0 var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface);\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-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\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}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n height: 100%;\n padding: var(--space-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: block;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-4) var(--space-5) 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- carousel ---------- */\n/* The lead block as a rotator: numbered buttons name its slides, the one\n showing in the bar colours. Static; the buttons are not links. */\n.ds-carousel {\n position: relative;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n}\n.ds-carousel__dot {\n box-sizing: border-box;\n min-width: 3ch;\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-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- accordion ---------- */\n/* Questions that open and close, each with a plus or minus box. */\n.ds-accordion {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n list-style: none;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: calc(var(--text-small) + 2 * var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-2) calc(var(--space-2) * 3) no-repeat,\n var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n height: calc(var(--text-small) + 2 * var(--border-width));\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n var(--color-surface);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3) calc(2ch + var(--space-4));\n}\n\n/* ---------- tooltip ---------- */\n/* A help hint behind a boxed question mark, shown on hover or focus. */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n}\n.ds-tooltip__trigger {\n display: inline-block;\n box-sizing: border-box;\n min-width: 2ch;\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-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 6;\n box-sizing: border-box;\n width: 30ch;\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 font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: travel booking, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n \n \n
\n\n
\n\n \n
\n
\n
\n
\n

Find a flight

\n
\n
\n \n \n
\n \n \n
\n \n \n
\n
\n \n \n \n
\n \n
\n More options\n Search flights\n
\n
\n
\n\n
\n
\n
\n

Offer of the week ENDS SUNDAY

\n

Lisbon to Oslo and back, any day in March

\n

Two non-stop flights a day, a bag in the hold and no charge for changing the date once.

\n
\n See the flights\n What the fare includes\n
\n
  1. 1
  2. 2
  3. 3
\n
\n
\n return, from\n 118\n per adult\n
\n
\n\n
\n
\n

Weekend in Porto

\n

Fly Friday evening, back Sunday night. Two nights by the river.

\n from89\n
\n
\n

Bergen by the fjords

\n

Direct on Tuesdays and Saturdays until the end of April.

\n from134\n
\n
\n

Seville in spring

\n

Seven nights with a hire car waiting at the airport.

\n from212\n
\n
\n

Tallinn old town

\n

One change in Stockholm. Three nights inside the walls.

\n from167\n
\n
\n
\n
\n\n
\n
\n
\n

Fares that fell today

\n All late deals\n
\n
    \n
  • \n \n Lisbon to Copenhagen down 22\n Leaves Monday 17 March | non-stop | 9 seats left at this price\n \n 96\n
    • \n
  • \n \n Porto to Helsinki\n Leaves Wednesday 19 March | one change | 4 seats left at this price\n \n 141\n
    • \n
  • \n \n Lisbon to Gothenburg\n Leaves Thursday 20 March | non-stop | 12 seats left at this price\n \n 109\n
    • \n
  • \n \n Faro to Stockholm\n Leaves Saturday 22 March | non-stop | 6 seats left at this price\n \n 127\n
    • \n
\n
\n
\n

Before you fly

\n
\n

Check in closes 40 minutes before a flight leaves. Bring the passport you booked with.

\n
\n
What you can take on board

One bag in the cabin and one in the hold for each traveller.

\n
Passports and visas

Every traveller needs a passport valid for the whole journey.

\n
Airport guides and parking

Each airport page lists car parks, buses and the walk to check-in.

\n
\n

Change or cancel a booking

\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Flights
    2. \n
  2. /
    3. \n
  3. Search
    4. \n
  4. /
    5. \n
  5. Lisbon to Oslo
    6. \n
\n
\n
\n

Lisbon to Oslo, Friday 14 March

\n

23 flights for 2 adults, coming back Friday 21 March. Choose the flight out first.

\n
\n
Change the search
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
LeavesArrivesStopsJourneyFor 2 adults
07.10 Lisbon12.05 OsloNon-stop BEST PRICEFlight NA 4183 hr 55 min236Choose
09.40 Lisbon16.15 Oslo1 change, AmsterdamFlights KT 204 and KT 11715 hr 35 min251Choose
13.25 Lisbon18.20 OsloNon-stopFlight NA 4223 hr 55 min268Choose
06.00 Lisbon14.30 Oslo1 change, FrankfurtFlights LD 1167 and LD 8607 hr 30 min274Choose
17.50 Lisbon22.45 OsloNon-stopFlight NA 4263 hr 55 min302Choose
11.15 Lisbon20.40 Oslo2 changes, Madrid and CopenhagenThree flights, two airlines8 hr 25 min319Choose
\n \n

Local times. Prices were checked at 10.42 this morning and are held when you reach step 4.

\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Flights
    2. \n
  2. /
    3. \n
  3. Lisbon to Oslo
    4. \n
  4. /
    5. \n
  5. 07.10 non-stop
    6. \n
\n
\n
\n
\n
\n

Your flights

\n Choose different flights\n
\n
\n
07.10LisbonFriday 14 March
\n
Flight NA 418, non-stop
3 hr 55 min, breakfast served
\n
12.05OsloFriday 14 March
\n
\n
\n
13.30OsloFriday 21 March
\n
Flight NA 419, non-stop
4 hr 05 min, lunch served
\n
16.35LisbonFriday 21 March
\n
\n
\n
\n

What this fare includes

\n

Economy saver, fare code QLX7, checked 13 March at 10.42

\n

A seat, one bag in the hold and one in the cabin for each traveller, and a meal on both flights.

\n

Changing your plans

\n

You may move either flight to another date once without a charge, up to 24 hours before it leaves. After that a change costs 30 for each traveller, plus any difference in the fare.

\n
    \n
  • Cancel within 24 hours of booking for a full refund
    • \n
  • After that the fare is not refunded, but the taxes are
    • \n
  • Names cannot be changed once tickets are issued
    • \n
\n

If you telephone us

\n

Quote the fare code QLX7 and the flight number NA 418. The price is the same by telephone as it is here.

\n
\n

\n Baggage allowance\n Seat plan\n Meals on board\n Full conditions\n Back to the list\n

\n
\n
\n
\n

Price for 2 adults

\n
\n
    \n
  • Flights, 2 x 86172
    • \n
  • Airport taxes52
    • \n
  • Booking charge12
    • \n
  • To pay236
    • \n
\n

Nothing is charged until step 4.

\n
\n
Book this fare
\n
\n
\n

Add a hotel and save 40

\n
\n

Seven nights in Oslo from 29 a night when booked with these flights.

\n Show hotels for these dates\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Flights
    2. \n
  2. /
    3. \n
  3. Lisbon to Oslo, 07.10
    4. \n
  4. /
    5. \n
  5. Travellers
    6. \n
\n
\n
\n

Who is travelling?

\n

Give the names exactly as they appear in each passport. Your fare is held for 20 minutes.

\n
\n
Back to the fare
\n
\n
\n
\n
\n

Your fare of 236 is held until 11.02. If the page is left longer than that the price is checked again before you pay.

\n

One thing to put right. The passport number for the second traveller is too short.

\n
\n
\n

Traveller 1, adult

\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n

Traveller 2, adult

\n
\n
\n \n
\n
\n
\n \n
\n ?The number is on the photograph page of the passport: nine letters and figures.\n Six characters entered; a passport number has nine.\n
\n
\n
\n

Extras and contact

\n
\n
\n Add to the booking\n
\n \n \n
\n
\n
\n \n
\n
\n
\n
\n Continue to payment\n Go back a step\n
\n
\n
\n
\n
\n

Your booking so far

\n
\n

Out: Fri 14 March, 07.10 Lisbon to 12.05 Oslo, NA 418

\n

Back: Fri 21 March, 13.30 Oslo to 16.35 Lisbon, NA 419

\n
    \n
  • Flights and taxes236
    • \n
  • Insurance, 2 x 918
    • \n
  • To pay254
    • \n
\n
\n
\n
\n

Safe to book

\n
\n

Card details are sent over a secure connection and tickets arrive by e-mail within the hour.

\n How we protect your payment\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Flights
    2. \n
  2. /
    3. \n
  3. My account
    4. \n
  4. /
    5. \n
  5. My trips
    6. \n
\n
\n
\n

My trips

\n

Everything booked under r.lindqvist@example.org. Tickets and receipts can be printed from here.

\n
\n
Book another trip
\n
\n
    \n
  • 2trips booked
    • \n
  • 1waiting for payment
    • \n
  • 14days to the next flight
    • \n
  • 3,150traveller points
    • \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
BookingTripDatesTravellersPaidStatus
CK 48213Lisbon to Oslo and back14 to 21 March2 adults254Ticketed
CK 48377Lisbon to Porto, one way2 April1 adult0Pay by Friday
CK 47902Hotel in Bergen, 3 nights18 to 21 April2 adults186Confirmed
CK 47655Car hire, Seville airport3 to 10 May1 driver0Card refused
CK 47120Faro to Stockholm and back6 to 13 June2 adults, 1 child412New times
\n
\n Booking CK 48377:\n Pay now\n Change dates\n Cancel booking\n \n
\n
\n
\n
\n
\n

Cancel booking CK 48377?

\n
\n

Lisbon to Porto on 2 April has not been paid for, so nothing will be charged. The seat is released straight away and the fare may not be there again.

\n
\n Cancel the booking\n Keep it\n
\n
\n
\n
\n
\n

No past trips yet. Once you have flown, your journeys are kept here for two years with their receipts.

\n Find a flight\n
\n
\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.shop.s08.p10.t02.u10\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"portals-2000s\",\n \"years\": [\n 2000,\n 2004\n ]\n },\n \"archetype\": \"shop\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-po-8a2a\",\n \"short\": \"v1-po-8a2a\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #cfdfef;\n --color-surface-strong: #95b7e0;\n --color-bar: #006699;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ff0000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #003366;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #333333;\n --color-heading: #000000;\n --color-heading-alt: #004371;\n --color-link: #003366;\n --color-link-quiet: #003366;\n --color-link-visited: #336699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #6699cc;\n --color-border-strong: #003366;\n --color-border-muted: #dddddd;\n --color-accent: #f6dd42;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #eaeff4;\n --color-fill-2: #d0dbe8;\n --color-fill-3: #cfdfef;\n --color-fill-4: #eeeeee;\n --color-button: #dddddd;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #003366;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #eeeeee;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #eeeeee;\n --color-success: #336699;\n --color-warning: #f6dd42;\n --color-notice: #eaeff4;\n --color-notice-text: #000000;\n --color-focus: #003366;\n --color-shadow: #000000;\n --color-overlay: #d0dbe8;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Arial, Helvetica, sans-serif;\n --font-heading: Tahoma, Arial, Helvetica, sans-serif;\n --font-ui: Verdana, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 19px;\n --text-h1: 19px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\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: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 0 0 1px var(--color-shadow);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.12'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white' fill-opacity='.14'/%3E%3C/svg%3E\");\n --fill-bar: var(--color-bar) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-bar-alt: var(--color-bar-alt) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-inverse: var(--color-inverse) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface-strong);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }