/* The workshop's front page. Shares the palette and chrome from style.css, and
   the piece cards from shop.css. Everything here is specific to this page. */

/* ---------- hero ---------- */

.craft-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(76vh, 660px);
    padding: clamp(34px, 6vw, 78px);
    overflow: hidden;
    isolation: isolate;
}

/* Where the diagonal crosses the top edge. Raise it to give the studio more of
   the frame, lower it to give the workshop more; the foot of the line follows
   eight points behind it, which is what gives the split its lean. */
.craft-hero {
    --hero-split: 46%;
    --hero-split-foot: 38%;
}

.craft-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("hero-woodwork.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

/* The two photographs are the two crafts, divided on the diagonal that divides
   the S in the logo: the studio above and to the left, the workshop below and
   to the right. The studio photograph is upright and the panel it fills is
   upright too, so it needs no cropping - covering the panel keeps the window,
   the light across the table and the palette all in frame. */
.craft-hero-art {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center center;
    transform: scale(1.01);
}

.craft-hero-split .craft-hero-image {
    clip-path: polygon(
        var(--hero-split) 0,
        100% 0,
        100% 100%,
        var(--hero-split-foot) 100%
    );
    /* Hold the joinery toward the middle of its half rather than the edge. */
    background-position: 72% center;
}

/* A hairline of light along the join, so two photographs read as a deliberate
   split rather than one badly stitched image. */
.craft-hero-split::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(
        var(--hero-split) 0,
        calc(var(--hero-split) + 0.16%) 0,
        calc(var(--hero-split-foot) + 0.16%) 100%,
        var(--hero-split-foot) 100%
    );
    background: rgba(255, 255, 255, 0.5);
}

.craft-hero-copy {
    max-width: 640px;
    color: #fff;
}

.craft-hero h1 {
    margin: 8px 0 18px;
    font-size: clamp(38px, 6.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #fff;
}

.craft-hero h1 span { color: #e8b184; }

.craft-hero .eyebrow.light { color: #e8b184; }

.craft-hero-lead {
    max-width: 52ch;
    margin: 0 0 30px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------- what you can count on ---------- */

.craft-marks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(22px, 3.5vw, 56px);
    padding: clamp(38px, 6vw, 76px) clamp(24px, 6vw, 78px);
    border-bottom: 1px solid var(--line);
}

.craft-marks h2 {
    position: relative;
    margin: 0 0 12px;
    padding-top: 18px;
    font-size: 19px;
}

.craft-marks h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 3px;
    background: var(--warm);
}

.craft-marks p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- work on the page ---------- */

.featured {
    padding: clamp(40px, 6vw, 82px) clamp(24px, 6vw, 78px);
}

.featured .section-heading,
.process .section-heading,
.contact-form-section .section-heading {
    max-width: 60ch;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.featured .section-heading h2,
.process .section-heading h2 {
    margin: 4px 0 10px;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
}

.featured .section-heading p,
.process .section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

.home-grid {
    padding: 0 0 clamp(24px, 3vw, 38px);
}

.featured-empty {
    padding: 30px 0 10px;
    color: var(--muted);
    font-size: 17px;
}

.featured-empty a { color: var(--warm-dark); font-weight: 700; }

/* ---------- how a piece is made ---------- */

.process {
    padding: clamp(44px, 6vw, 86px) clamp(24px, 6vw, 78px);
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.process-steps li {
    padding-top: 20px;
    border-top: 2px solid var(--warm);
}

.step-number {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--warm-dark);
}

.process-steps h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.process-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- what else is coming ---------- */

.workshop-note {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 70px);
    padding: clamp(44px, 6vw, 86px) clamp(24px, 6vw, 78px);
}

.workshop-note h2 {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
}

.workshop-note p {
    margin: 0;
    max-width: 58ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- commissions ---------- */

.commission-band {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(40px, 6vw, 78px) clamp(24px, 6vw, 78px);
    background: var(--night);
    color: #fff;
}

.commission-band h2 {
    margin: 6px 0 12px;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.12;
}

.commission-band p {
    margin: 0;
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- getting in touch ---------- */

.contact-form-section {
    padding: clamp(44px, 6vw, 86px) clamp(24px, 6vw, 78px);
}

.contact-form-section .section-heading h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 3.2vw, 38px);
}

.contact-form-section .section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

@media (max-width: 900px) {
    .workshop-note,
    .commission-band {
        grid-template-columns: 1fr;
    }

    .workshop-note .logo-showcase { display: none; }
}

/* The old centred section headings came from the software pages. These blocks
   are left aligned, so the rule under the heading has to be too. */
.featured .section-heading h2::after,
.process .section-heading h2::after,
.contact-form-section .section-heading h2::after {
    margin-left: 0;
    margin-right: 0;
}

.contact-form-section .section-heading {
    text-align: left;
}

/* ---------- a band for each kind of work ---------- */

.kind-band {
    margin-bottom: clamp(28px, 4vw, 48px);
}

.kind-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: clamp(16px, 2vw, 24px);
    border-bottom: 2px solid var(--warm);
}

.kind-head h3 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 26px);
}

.kind-head a {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--warm-dark);
}

/* ---------- the art studio ---------- */

.studio {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    padding: clamp(44px, 6vw, 86px) clamp(24px, 6vw, 78px);
    border-bottom: 1px solid var(--line);
}

.studio .section-heading {
    max-width: 56ch;
    margin-bottom: 0;
    text-align: left;
}

.studio .section-heading h2 {
    margin: 4px 0 12px;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.12;
}

.studio .section-heading h2::after {
    margin-left: 0;
    margin-right: 0;
}

.studio .section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

/* With work to show, the studio stops being a note beside a heading and
   becomes a shelf of its own, laid out like the bench's above it. The cards
   stay white on the slate, which is how a gallery hangs a picture anyway. */
.studio-showing {
    grid-template-columns: 1fr;
}

.studio-showing .section-heading {
    max-width: 62ch;
    margin: 0 auto 34px;
    text-align: center;
}

.studio-showing .section-heading h2::after {
    margin-left: auto;
    margin-right: auto;
}

/* The section paints its text near-white for the slate behind it. A card is
   white, so without this the piece's name is white on white and disappears. */
.studio-showing .piece-card {
    color: var(--ink);
}

.studio-note {
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warm);
    border-radius: 10px;
    background: var(--soft);
}

.studio-note p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .studio { grid-template-columns: 1fr; }
}


@media (max-width: 700px) {
    .craft-hero-art { display: none; }

    .craft-hero-split .craft-hero-image {
        clip-path: none;
        background-position: center;
    }

    .craft-hero-split::before { display: none; }
}


/* ---------- the art studio, in the logo's other colour ---------- */

/* The workshop section is warm and light. This one takes the slate half of the
   mark, so the page reads as two crafts at a glance. Before there is any
   artwork to show it carries the colour alone, which is honest where a
   stand-in photograph would not be; once the studio has work on it, the
   pictures hang on the same slate. */
.studio {
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(circle at 12% 18%, rgba(232, 177, 132, 0.14), transparent 46%),
        linear-gradient(152deg, #33475c 0%, #22323f 52%, #101c28 100%);
    border-bottom: 0;
}

.studio .section-heading h2 {
    color: #fff;
}

.studio .eyebrow {
    color: #e8b184;
}

.studio .section-heading p {
    color: rgba(255, 255, 255, 0.76);
}

.studio .section-heading h2::after {
    background: #e8b184;
}

.studio-note {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 3px solid #e8b184;
    background: rgba(255, 255, 255, 0.05);
}

.studio-note p {
    color: rgba(255, 255, 255, 0.78);
}