/* Generated by build.mjs from portfolio-base/designs/student/site.css: never edit. */
:root {
  /* the palette (forest by default; html[data-palette] picks another): the ground of the bands, a line on it for the
     pattern, the accent for actions, a second "pop" colour for small labels, the cream between the bands */
  --ground: #133a34;  --ground-2: #1b4a42;  --ground-3: #0f2e29;  --ground-line: #215850;  --ground-edge: #2b6359;
  --cream: #f6eedd;  --paper: #fffaf0;    --ink: #18211f;      --ink-2: #39443f;  --muted: #56625e;
  --accent: #e8b04b; --accent-d: #b9852c; --accent-50: #f7e3b6; --pop: #c4553a; --pop-l: #e0795c; --soft: #9cc3a6;
  --head: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --gap: 24px; --wrap: 1200px; --pad: clamp(20px, 4vw, 40px);
  --section: clamp(84px, 9vw, 128px);
  --r: 14px; --r-lg: 20px;
  --hard: 6px 6px 0 var(--ground);
  /* the pattern on the bands (html[data-pattern]) and the shape behind the photo (html[data-frame]): drawn once as
     masks, coloured by the palette */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 36 36 0 72 36 36 72Z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M36 18c6 6 6 12 0 18-6-6-6-12 0-18zM36 54c6-6 6-12 0-18-6 6-6 12 0 18zM18 36c6-6 12-6 18 0-6 6-12 6-18 0zM54 36c-6-6-12-6-18 0 6 6 12 6 18 0z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='36' cy='36' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='72' cy='0' r='3'/%3E%3Ccircle cx='0' cy='72' r='3'/%3E%3Ccircle cx='72' cy='72' r='3'/%3E%3C/g%3E%3C/svg%3E"); --pattern-size: 72px 72px;
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='448' viewBox='-24 -24 448 448'%3E%3Ccircle cx='200' cy='200' r='186'/%3E%3Ccircle cx='386.0' cy='200.0' r='30'/%3E%3Ccircle cx='374.8' cy='263.6' r='30'/%3E%3Ccircle cx='342.5' cy='319.6' r='30'/%3E%3Ccircle cx='293.0' cy='361.1' r='30'/%3E%3Ccircle cx='232.3' cy='383.2' r='30'/%3E%3Ccircle cx='167.7' cy='383.2' r='30'/%3E%3Ccircle cx='107.0' cy='361.1' r='30'/%3E%3Ccircle cx='57.5' cy='319.6' r='30'/%3E%3Ccircle cx='25.2' cy='263.6' r='30'/%3E%3Ccircle cx='14.0' cy='200.0' r='30'/%3E%3Ccircle cx='25.2' cy='136.4' r='30'/%3E%3Ccircle cx='57.5' cy='80.4' r='30'/%3E%3Ccircle cx='107.0' cy='38.9' r='30'/%3E%3Ccircle cx='167.7' cy='16.8' r='30'/%3E%3Ccircle cx='232.3' cy='16.8' r='30'/%3E%3Ccircle cx='293.0' cy='38.9' r='30'/%3E%3Ccircle cx='342.5' cy='80.4' r='30'/%3E%3Ccircle cx='374.8' cy='136.4' r='30'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 0H96V8C80 8 80 24 64 24C48 24 48 8 32 8C16 8 16 24 0 24Z'/%3E%3C/svg%3E");
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M96 48H0V24C16 24 16 40 32 40C48 40 48 24 64 24C80 24 80 40 96 40Z'/%3E%3C/svg%3E");
}
[data-palette="ocean"] { --ground: #10303d; --ground-2: #184252; --ground-3: #0b2430; --ground-line: #1f4b5c; --ground-edge: #2a5d70;
  --cream: #f3f0e8; --paper: #fffdf8; --ink: #14212a; --ink-2: #344550; --muted: #52626c;
  --accent: #f2a65a; --accent-d: #c47a33; --accent-50: #fbe3cb; --pop: #c8434f; --pop-l: #ec6f78; --soft: #8fc7d8; }
[data-palette="terracotta"] { --ground: #4a1f17; --ground-2: #5e2b20; --ground-3: #3a1811; --ground-line: #6b3326; --ground-edge: #7c3f30;
  --cream: #f8efe4; --paper: #fffaf3; --ink: #24150f; --ink-2: #4a3328; --muted: #6e584c;
  --accent: #f4c95d; --accent-d: #c49a2f; --accent-50: #fbecc0; --pop: #1f7f73; --pop-l: #3aa99b; --soft: #9fd3c7; }
[data-palette="charcoal"] { --ground: #1f2124; --ground-2: #2a2d31; --ground-3: #17191b; --ground-line: #33373c; --ground-edge: #41464c;
  --cream: #f2f1ed; --paper: #fffffb; --ink: #17191b; --ink-2: #3b3f44; --muted: #5d6268;
  --accent: #d4f05a; --accent-d: #a3bd2c; --accent-50: #eef8c6; --pop: #d9502f; --pop-l: #ff7a59; --soft: #a9b4bf; }
[data-palette="wine"] { --ground: #4a1525; --ground-2: #5c1d30; --ground-3: #380f1b; --ground-line: #6b2639; --ground-edge: #7d3347;
  --cream: #f7efe6; --paper: #fffaf3; --ink: #22121a; --ink-2: #47303a; --muted: #6b5560;
  --accent: #f0b44c; --accent-d: #c0852a; --accent-50: #fae6c3; --pop: #1f8a76; --pop-l: #3fb39c; --soft: #f2b5b5; }
[data-pattern="dots"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.1' fill='%23000'/%3E%3C/svg%3E"); --pattern-size: 24px 24px; }
[data-pattern="flow"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48' viewBox='0 0 120 48'%3E%3Cpath d='M0 12C15 0 45 0 60 12C75 24 105 24 120 12M0 36C15 24 45 24 60 36C75 48 105 48 120 36' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); --pattern-size: 120px 48px; }
[data-pattern="grid"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M36 0V36H0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 0V36M0 18H36' fill='none' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E"); --pattern-size: 36px 36px; }
[data-pattern="chevron"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 18 12 6 24 18 36 6 48 18' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); --pattern-size: 48px 24px; }
[data-pattern="plain"] { --pattern: none; }
[data-frame="blob"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M327 58c58 42 84 121 70 196s-62 136-138 152-163-14-205-78S8 186 46 120 133 26 205 18s64 0 122 40z'/%3E%3C/svg%3E"); }
[data-frame="hexagon"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M200 6 370 104V300L200 398 30 300V104Z'/%3E%3C/svg%3E"); }
[data-frame="arch"] { --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='-20 -20 440 440'%3E%3Cpath d='M48 410V196a152 152 0 0 1 304 0v214Z'/%3E%3C/svg%3E"); }